element-ui功能替换ivew

这次给大家带来element-ui功能替换ivew，element-ui功能替换ivew的注意事项有哪些，下面就是实战案例，一起来看一下。

实现原理

修改了element-ui源码，把源码里面的tree模块提取出来

然后修改element自带checkbox等组件为iview的checkbox，并且兼容方法

最后修改element样式，改为iview风格，自己也添加了一些样式

新的tree组件可以说是element的逻辑，iview的风格

emplate> 
  
                         
     
           
   

修改handleCheckChange，因为iview的checkbox组件逻辑不同，函数的返回不一样，需要兼容

handleCheckChange(ev) {    this.node.setChecked(ev, !this.tree.checkStrictly);   },

提取完成后的项目结构，以及封装成npm插件

使用方法

必须安装iview

样式风格全部替换成了ivew

功能全部按照element-ui原先一样

npm i chu-tree-iview

import chuView from 'chu-tree-iview'Vue.use(chuView)

使用文档跟element-ui一模一样

相信看了本文案例你已经掌握了方法，更多精彩请关注本站其它相关文章！

推荐阅读：

怎样对vue.js+created进行使用

做出json与数组键值大小写转换