element-ui控件操作iview的方法

來源：懂視網責編：小采時間：2020-11-27 19:50:45

element-ui控件操作iview的方法

element-ui控件操作iview的方法:這次給大家?guī)韊lement-ui控件操作iview的方法，element-ui控件操作iview的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。實現(xiàn)原理修改了element-ui源碼，把源碼里面的tree模塊提取出來然后修改element自帶checkbox等組件為iview的chec

推薦度：

點擊下載本文 文檔為doc格式

導讀element-ui控件操作iview的方法:這次給大家?guī)韊lement-ui控件操作iview的方法，element-ui控件操作iview的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。實現(xiàn)原理修改了element-ui源碼，把源碼里面的tree模塊提取出來然后修改element自帶checkbox等組件為iview的chec

這次給大家?guī)韊lement-ui控件操作iview的方法，element-ui控件操作iview的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

實現(xiàn)原理

修改了element-ui源碼，把源碼里面的tree模塊提取出來

然后修改element自帶checkbox等組件為iview的checkbox，并且兼容方法

最后修改element樣式，改為iview風格，自己也添加了一些樣式

新的tree組件可以說是element的邏輯，iview的風格

<template>
 <p
 @click.stop="handleClick"
 v-show="node.visible">
 <p class="chu-tree-nodecontent"
 :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
 <span :class="arrowClasses" @click.stop="handleExpandIconClick">
 <Icon v-if="!node.isLeaf" type="arrow-right-b"></Icon>
 </span>
 <Checkbox
 v-if="showCheckbox"
 :value="node.checked"
 :indeterminate="node.indeterminate"
 :disabled="!!node.disabled"
 @click.native.stop
 @on-change="handleCheckChange"></Checkbox>
 <span
 v-if="node.loading"
 class="ivu-load-loop">
 </span>
 <node-content :node="node"></node-content>
 </p>
 <collapse-transition>
 <p
 v-show="expanded">
 <el-tree-node
 :render-content="renderContent"
 v-for="child in node.childNodes"
 :key="getNodeKey(child)"
 :node="child"
 @node-expand="handleChildNodeExpand">
 </el-tree-node>
 </p>
 </collapse-transition>
 </p>
</template>

修改handleCheckChange，因為iview的checkbox組件邏輯不同，函數(shù)的返回不一樣，需要兼容

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)
<chu-tree></chu-tree>

使用文檔跟element-ui一模一樣

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

element-ui控件操作iview的方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：使用方式控件

熱門焦點

element-ui控件操作iview的方法

element-ui控件操作iview的方法

element-ui控件操作iview的方法

最新推薦

猜你喜歡

熱門推薦