Heim  >  Artikel  >  Web-Frontend  >  Die Element-UI-Funktion ersetzt ivew

Die Element-UI-Funktion ersetzt ivew

php中世界最好的语言
php中世界最好的语言Original
2018-06-12 14:54:392743Durchsuche

Dieses Mal werde ich Ihnen die Element-UI-Funktion zum Ersetzen von ivew vorstellen. Was sind die Vorsichtsmaßnahmen zum Ersetzen von ivew durch die Element-UI-Funktion? Das Folgende ist ein praktischer Fall.

Implementierungsprinzip

Der Element-UI-Quellcode wurde geändert und das Baummodul im Quellcode extrahiert.

Dann wurden das Kontrollkästchen und andere Komponenten geändert kommen mit Element als Kontrollkästchen von iview und kompatibler Methode

Endlich den Elementstil geändert, in iview-Stil geändert und selbst einige Stile hinzugefügt

Man kann sagen, dass die neue Baumkomponente die ist Logik des Elements und Stil von iview

<template>
 <p
  @click.stop="handleClick"
  v-show="node.visible">
  <p class="chu-tree-node__content"
   :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>

Ändern Sie handleCheckChange, da die Logik der Kontrollkästchenkomponente von iview unterschiedlich ist und die Rückgabe der Funktion unterschiedlich sein muss. Sie muss mit der Projektstruktur nach

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

wurde extrahiert und in ein npm-Plug-in gepackt

Gebrauchsanweisung

Iview muss installiert werden

Die Stile werden alle durch ivew ersetzt

Die Funktionen stimmen alle mit Element überein. Die Benutzeroberfläche ist dieselbe wie zuvor.

npm i chu-tree-iview
import chuView from 'chu-tree-iview'
Vue.use(chuView)
<chu-tree></chu-tree>

Die Verwendungsdokumentation ist genau die gleiche wie bei Element -ui

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie vue.js+created

JSON- und Array-Schlüsselgröße erstellen Schreibkonvertierung

Das obige ist der detaillierte Inhalt vonDie Element-UI-Funktion ersetzt ivew. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn