今回は、Element-ui コントロールを使用して iview を操作する方法について説明します。Element-ui コントロールを使用して iview を操作する場合の 注意事項 について説明します。
実装原理
要素UIのソースコードを変更し、ソースコード内のツリーモジュールを抽出しますその後、要素自身のチェックボックスと他のコンポーネントをiviewのチェックボックスに変更し、互換性を持たせます最後に要素スタイルを変更しますiview スタイルに、自分でいくつかのスタイルも追加しました 新しいツリー コンポーネントは、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(ev) { this.node.setChecked(ev, !this.tree.checkStrictly); },
使用説明書
iview をインストールする必要がありますすべてのスタイルは ivew に置き換えられます機能はすべて element-ui と同じですnpm i chu-tree-iview
import chuView from 'chu-tree-iview' Vue.use(chuView) <chu-tree></chu-tree>
Angular4のrouter属性のユースケースの詳細な説明
以上がelement-ui コントロールによる iview の動作方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。