使用mint-ui开发项目的一些心得(分享)


Posted in Javascript onSeptember 07, 2017

Mint-ui:

1、Cell

开发过程中,有时需要修改mt-cell自带的icon和value的标签样式,这时我们可以在<mt-cell></mt-cell>内新添如下标签进行改写:

<si-cell class="user-cell item-cell" title="当前产品" to="/selectproduct" is-link>

  <i class="siiconfont siicon-product"></i>

  <span>{{productSelected}}</span>

</si-cell>

mt-cell无法直接绑定v-click事件,修改做法可以在<mt-cell></mt-cell>外面包一层<div></div>,在div上绑定click事件,代码可参照第2点search中的代码;

2、Search

通常情况下我们的参数不会直接是一个数组,可能需要对数据进行一些自定义处理,我的写法如下:

<si-search v-model="value" :result="filterResult">

  <div v-for="item in filterResult" :key="item" @click="switchCustomer(item)">

  <si-cell :title="item"></si-cell>

  </div>

</si-search>

filterResult是计算属性,以此过滤好后台传来的数据后,再将其绑定在cell外的div层,还可以如第1点所说的绑定click事件,此处filterResult进行了中英文过滤,可以通过数据的中文名和英文名两个属性进行搜索。

filterResult() {
  var that = this;
  that.defaultResult = [];
  var re = /^[a-zA-Z]+$/;
  var data = that.result.data;
  var val = that.value;
  if (re.test(val)) {
  for (var i = 0;i < data.length;i++) {
   console.log(data[i].englishname);
   if (new RegExp(val, 'i').test(data[i].englishname)) {
   that.defaultResult.push(data[i].title);
   }
  }
  return that.defaultResult;
  }
  else {
  for (var i = 0;i < data.length;i++) {
   that.defaultResult.push(data[i].title);
  }
  return that.defaultResult.filter(value => new RegExp(val, 'i').test(value));
  }
 }

3、Tabbar

通常情况下,底部的tabbar栏是需要在多页面复用的,所以可以独立成一个组件,然后通过外部容器作为父组件进行使用,切换tab的同时,tabbar需要向父组件传递选中的一个自定义的tabchange事件

selectTab: function(id) {
 this.$emit('tabchange', id);
}

父组件接收自定义事件tabchange,触发setSelected函数进行数据更新,通过数据驱动视图更新:

<si-tabbar :Selected="selected" @tabchange="setSelected"></si-tabbar>

修改selected的值来切换tab

setSelected: function(data) {
 this.selected = data;
 this.tabToggle(data);
}

template内有关tab-container里的代码如下:

<div class="page-wrap">
 <si-tab-container class="page-tabbar-container" v-model="selected">
 <si-tab-container-item id="konwledge">
  <si-news></si-news>
 </si-tab-container-item>
 <si-tab-container-item id="dashboard">
  <si-overview></si-overview>
 </si-tab-container-item>
 <si-tab-container-item id="report">
  <si-report></si-report>
 </si-tab-container-item>
 <si-tab-container-item id="user">
  <si-user></si-user>
 </si-tab-container-item>
 </si-tab-container>
</div>

4、Header

mt-header的title因为是mint-ui框架自带生成的,所以在父组件上我们可能无法在title上绑定click事件,但功能需求中有这样的要求:

虽然应该极力避免直接操作dom,但目前我的解决方法还在页面渲染完成之后,在mounted的生命周期中用原生js绑定click事件,因为此时html元素已经生成,所以可以绑定到title的标签<h1>。

mounted () {

 // 绑定click事件到mint-ui自动生成的头部标题上

 var h1 = document.getElementsByTagName('h1');

 var that = this;

 if (that.headOptions.isTitleIcon == true) {

  h1[0].addEventListener("click",function() {

  that.$router.push({path: '/selectproduct'});

  })

 }

 },

5、datetime-picker

使用该组件一定要注意mint-ui的版本,2.2.5以上才可以,版本低会导致无法正常调用open方法显示datetime-picker。

open(picker) {
 this.$refs[picker].open();
}

以上这篇使用mint-ui开发项目的一些心得(分享)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
清除输入框内的空格
Dec 21 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 #Javascript
AngularJS 打开新的标签页实现代码
Sep 07 #Javascript
基于Cookie常用操作以及属性介绍
Sep 07 #Javascript
基于require.js的使用(实例讲解)
Sep 07 #Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 #Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 #jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 #jQuery
You might like
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
Python常用模块介绍
2014/11/21 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
利用python发送和接收邮件
2016/09/27 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
python怎么提高计算速度
2020/06/11 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
机械设计及其自动化专业推荐信
2013/10/31 职场文书
厨房管理计划书
2014/04/27 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
暑期实践个人总结
2015/03/06 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
Redis分布式锁Redlock的实现
2021/08/07 Redis