使用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 (六) jquery中的AJAX使用
Feb 23 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
开启BootStrap学习之旅
May 04 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
浅谈js中对象的使用
Aug 11 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 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 一元分词算法
2009/11/30 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
js 数值项目的格式化函数代码
2010/05/14 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Python之py2exe打包工具详解
2017/06/14 Python
Python extract及contains方法代码实例
2020/09/11 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
铭立家具面试题
2012/12/06 面试题
小学生自我鉴定
2013/10/12 职场文书
应届生的求职推荐信范文
2013/11/30 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
安徽导游词
2015/02/12 职场文书
2015年推普周活动总结
2015/03/27 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
用Java实现简单计算器功能
2021/07/21 Java/Android
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技