使用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 相关文章推荐
JavaScript While 循环基础教程
Apr 05 Javascript
xml和web特殊字符
Apr 28 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
JS中常用的正则表达式
Sep 29 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
layui table 参数设置方法
2018/08/14 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
Python实现SQL注入检测插件实例代码
2019/02/02 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
python自定义时钟类、定时任务类
2021/02/22 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
中海讯通笔试题
2015/09/15 面试题
linux面试题参考答案(8)
2015/08/11 面试题
医学类导师推荐信范文
2013/11/19 职场文书
商业街策划方案
2014/05/31 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
导游欢送词
2015/01/31 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL