使用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 IE中的DOM ready应用技巧
Jul 23 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
微信小程序自动客服功能
Nov 02 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
ReactRouter的实现方法
Jan 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
基于文本的搜索
2006/10/09 PHP
php与php MySQL 之间的关系
2009/07/17 PHP
php数组去重的函数代码
2013/02/03 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
js window.event对象详尽解析
2009/02/17 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
教你学会使用Python正则表达式
2017/09/07 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
Python中property函数用法实例分析
2018/06/04 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
Python docx库用法示例分析
2019/02/16 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
phpquery中文手册
2021/03/18 PHP
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
高一生物教学反思
2014/01/17 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
导游带团欢迎词
2015/09/30 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书