使用mint-ui开发项目的一些所得

2018-06-24 00:08:20来源：未知阅读 ()

使用mint-ui开发项目的一些所得

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();
}

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：vue组件知识总结

下一篇：社交列表的添加【js、DOM】

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签