Vue.js示例：樹型視圖； 模式組件；

樹型圖

本示例是一個簡單的樹形視圖實現，它展現了組件的遞歸使用。

mycode pen:   https://codepen.io/chentianwei411/pen/KGKQxE 

 

重點：遞歸是如何形成的。嵌套組件！！

 

如果不使用嵌套組件，而使用<li>元素的話，不會形成遞歸效果。

 

 

基本結構：

//組件模版結構：最外層根元素是<li>，這也是形成遞歸效果的必要元素。
<li>
    <div></div>        　　//顯示對象的children元素，一個數組。
    <ul>　　　　　　　　　　　//顯示children元素的子元素，都是對象。
       <組件></組件>　　　　 //使用自身組件，形成遞歸效果。
       <li></li>
    </ul>
</li>

 

功能：

1. 單擊子元素，顯示／隱藏 子元素。
2. 雙擊子元素，如果子元素不是folder，則把它的格式改為數組[],並附加一個子元素對象。
3. 單擊加號+，附加一個子元素對象。

 

實現思路：

首先，演示數據data是一個多層嵌套的對象結構。但每層只有name和children兩個key/value對兒。

 

其次，構思基本結構。如上圖所示👆。

• 只有一個prop，傳入data對象。
• 只有一個data選項open，用於決定是否toggle一個Folder。

<ul>進行2次判斷，是否是Folder，如果是的話，是否顯示v-show='open'

...上面是<div>...
<ul v-show="open" v-if="isFolder">
    <item ...略>略</item>
    <li @click='addChild'></li>
</ul>

 

 

再次，先實現單擊data對象中的子元素，第一個功能toggle方法，和第三個功能addChild方法。並試驗遞歸模式。

⚠️this.model指的是調用這個函數的數據對象。可以是model對象也可以是model.children中的子對象。

<item class="item"
    v-for="(model, index) in model.children"
    :key="index"
    :model="model">

 

 

然后，實現雙擊子元素的功能。changeType方法

 

    changeType: function() {
      if (this.isFolder == undefined) {
        Vue.set(this.model, 'children', [])    this.addChild()
        this.open = true
      }
    },

 

最后，檢查。

---

---

 

模式組件

codepen:

https://codepen.io/chentianwei411/pen/KGwNXB

 

特性：slot(content insertion)，過渡 (transitions)。

使用了CSS#modal box, 也可以使用bootstrap4中的modal模版。

自己寫的比較清楚。

 

這個組件主要是練習css，及CSS#transition, 和Vue的內置組件transition.

 

重點：

display: table  //這是<display-inside>的一種類型。定義了內容樣式的格式。如flex,grid都是。

display: table-cell 　　

//<display-internal>的一種。table有一個復雜的內部結構，其中table-cell是子元素的一種類型。使用這個布局的元素，類似<td>

 

Vue的內置組件transition.

1. 在HTMLDOM中使用<transiton name='組件的名字'></transiton>
2. <style>中使用props類，如enter-class, leave-class,它們控制