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,它们控制