《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)">
留意:在标签组件上绑定的 click事件上,添加 self事件修饰符,这样当关闭按钮事件发生后,不会冒泡至父元素上导致父元素上的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 组件 索引。