《Vue.j实战》一书 p117 页练习 1 试做

练习1 ：给pane 组件新增一个prop: closable 的布尔值，来支持是否可以关闭这个pane ，如
果开启，在tabs 的标签标题上会有一个关闭的按钮。

鼠标 mouseover x 按钮，会显示为红色。点击后即可关闭当前按钮标签。

IDE:Vscode

项目结构：

3 个 .vue文件：app.vue, tabs.vue, pane.vue，1 个 main.js

app.vue中改动之处：

1， data中添加名为 pans的对象数组，用于在template中，渲染生成 3 个pane组件并传递相关参数

      pans:[
        {
          label:'标签一',
          name:'1',
          closable:true,
          mes:'标签一的内容'
        },
        {
          label:'标签二',
          name:'2',
          closable:true,
          mes:'标签二的内容'
        },
        {
          label:'标签三',
          name:'3',
          closable:true,
          mes:'标签三的内容'
        },
      ]

2. template中，修改如下：

    <tabs v-model="activeKey" @on-click="handleOnclick" @on-close="handleOnclose">
      <pane v-for="item in pans" 
      :key="item.mes"
      :label="item.label"
      :name="item.name"
      :closable="item.closable"
      >
        {{item.mes}}
      </pane>
    </tabs>

留意：A在使用v-for渲染组件，传递参数时，需使用v-bind绑定，否则传递的只是字符串，而非数据

B 传递 closable参数，默认设置为 true，表示开启按钮上的关闭功能。

C 在tabs上监听 2 个自定义事件，一个是 on-click事件，这是原书中既有，一个是 on-close 事件，监听按钮标签上的关闭 X是否被点击。如被点击，则进行相关操作。

3 methods中，添加对 2 个自定义事件的监听器

    handleOnclick(name){

    },
    handleOnclose(name){
        var index=0;
        for(var i=0;i<this.pans.length;i++)    {
          if(this.pans[i].name===name){
            index=i;
            break;
          }
        }
        this.pans.splice(index,1);
    }

重点是 handleOnclose函数，当监听到关闭事件发生后，根据传递来的 name 参数，获取应被删除的 pane 组件索引号 index，随后在 pans数组中将其删除。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

tabs 组件修改如下：

1， template修改：

            <template v-if="item.closable">
            <a href="#" class="del" v-show="item.name===currentValue"
            @click="handleClose(item,index)"
            >x</a>
            </template>

添加 a元素构成的关闭 X，并绑定处理函数，可看到使用了template元素，并绑定了item.closable，为 true，则显示关闭按钮。使用v-show指令，指示唯有当前激活的按钮标签，才显示关闭功能。

            @click.self="handleChange(index)">

留意：在标签组件上绑定的ｃｌｉｃｋ事件上，添加ｓｅｌｆ事件修饰符，这样当关闭按钮事件发生后，不会冒泡至父元素上导致父元素上的handleChange函数被调用。

2，script修改

        updateNav(){
            this.navList=[];
            var _this = this;

            this.getTabs().forEach(function(pane, index){
                _this.navList.push({
                    label:pane.label,
                    name: pane.name || index,
                    closable:pane.closable
                });
                if(!pane.name) pane.name = index;
                if(index === 0){
                    if(!_this.currentValue){
                        _this.currentValue = pane.name || index;
                    }
                }
            });
            this.updateStatus();
        },

在遍历pane组件并填充 navList数组时，增加了一项： closable:pane.closable，此参数用于开关标签上的关闭按钮。

2，新增 handleClose函数

        handleClose(item,index){
            this.navList.splice(index,1);
            //console.log(this.navList.length);
            var name = item.name;
            //console.log(name)
            this.handleChange(0)
            this.$emit('on-close',name);            
        },

当监听到关闭事件时，从navList数组中删除对应数据，调用 handleChange并传入参数 0 ，这样，当删除掉 3 个按钮中的任意一个后，剩余标签按钮中的第一个为当前激活按钮。

附后使用$emit向父组件发送自定义事件，并传递 name 属性，用于在父组件中，确定应删除的 pane 组件索引。

《Vue.j实战》一书 p117 页练习 1 试做

猜你喜欢