Home > Web Front-end > JS Tutorial > body text

How element-ui control operates iview

php中世界最好的语言
Release: 2018-05-02 17:25:48
Original
3165 people have browsed it

This time I will bring you the method of operating iview with element-ui control. What are the precautions for operating iview with element-ui control? The following is a practical case, let’s take a look.

Implementation principle

Modified the element-ui source code, extracted the tree module in the source code

Then modified the checkbox and other components that come with element as Checkbox of iview, and compatible method

Finally modified the element style, changed it to iview style, and added some styles myself

The new tree component can be said to be the logic of element and the style of iview

<template>
 <p
  @click.stop="handleClick"
  v-show="node.visible">
  <p class="chu-tree-nodecontent"
   :style="{ &#39;padding-left&#39;: (node.level - 1) * tree.indent + &#39;px&#39; }">
   <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>
Copy after login
Modify handleCheckChange because the logic of iview's checkbox component is different and the return of the function is different. It needs to be compatible with

handleCheckChange(ev) {
    this.node.setChecked(ev, !this.tree.checkStrictly);
   },
Copy after login
The project structure after extraction is completed, and encapsulated into an npm plug-in

How to use

Must install iview

All styles are replaced with ivew

The functions are all in accordance with element- The ui is the same as before

npm i chu-tree-iview
Copy after login
import chuView from 'chu-tree-iview'
Vue.use(chuView)
<chu-tree></chu-tree>
Copy after login
The usage documentation is exactly the same as element-ui

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the use case of the created method

Detailed explanation of the use case of the router attribute of Angular4

The above is the detailed content of How element-ui control operates iview. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!