Vue自定义指令——实现tab的切换
一、不适用自定义指令实现
Tab.vue
<template>
<div>
<ul>
<li
v-for="(item, index) in arr"
:key="index"
@click="change(index)"
:class="curIndex === index ? 'activeClass' : 'liClass'"
>
{
{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: ["标题1", "标题2", "标题3"],
curIndex: 0,
};
},
methods: {
change(index) {
this.curIndex = index;
},
},
};
</script>
<style>
li {
list-style: none;
display: inline-block;
border: red solid 1px;
width: 100px;
height: 40px;
line-height: 40px;
cursor: pointer;
}
.liClass {
background-color: white;
}
.activeClass {
background-color: aquamarine;
}
</style>
二、使用Vue自定义指令
第一步：创建js文件:tabChange.js
第二步：修改tab.vue文件
<template>
<div>
<ul
v-tab-change="{
className: 'liClass',
activeClass: 'activeClass',
curIndex,
}"
>
<li
v-for="(item, index) in arr"
:key="index"
@click="change(index)"
class="liClass"
>
{
{ item }}
</li>
</ul>
</div>
</template>
<script>
import tabChange from "../directives/tabChange";
export default {
directives: {
tabChange,
},
data() {
return {
arr: ["标题1", "标题2", "标题3"],
curIndex: 0,
};
},
methods: {
change(index) {
this.curIndex = index;
},
},
};
</script>
<style>
li {
list-style: none;
display: inline-block;
border: red solid 1px;
width: 100px;
height: 40px;
line-height: 40px;
cursor: pointer;
}
.liClass {
background-color: white;
}
.activeClass {
background-color: aquamarine;
}
</style>
第三步：编写模块代码：
tabChange.js：了解bind和update以及参数
export default {
//加载完成就会执行
bind(el, binding) {
console.log('el', el)
console.log('binding', binding)
},
//修改内容会执行
update(el, binding) {
console.log('el', el)
console.log('binding', binding)
}
}
tabChange.js：实现默认项的选中
export default {
bind(el, binding) {
console.log('bind:el', el)
console.log('bind:binding', binding)
const options = binding.value;
//解构赋值
const {
className, activeClass, curIndex } = options;
const children = el.getElementsByClassName(className);
children[curIndex].className += ` ${
activeClass}`;//这里需要注意两个class之间要用空格
},
update(el, binding) {
console.log('update:el', el)
console.log('update:binding', binding)
}
}
tabChange.js：实现切换
export default {
bind(el, binding) {
console.log('bind:el', el)
console.log('bind:binding', binding)
const options = binding.value;
//解构赋值
const {
className, activeClass, curIndex } = options;
const children = el.getElementsByClassName(className);
children[curIndex].className += ` ${
activeClass}`;//这里需要注意两个class之间要用空格
},
update(el, binding) {
console.log('update:el', el)
console.log('update:binding', binding)
const options = binding.value;
const oldOptions = binding.oldValue;
//解构赋值
const {
className, activeClass, curIndex } = options;
const {
curIndex: oldIndex } = oldOptions;
const children = el.getElementsByClassName(className);
children[curIndex].className += ` ${
activeClass}`;//这里需要注意两个class之间要用空格
children[oldIndex].className = `${
className}`;//在切换的同时要重新设置元素的样式
}
}
以上就是Vue自定义指令的实现，关注《前端面试题》专栏。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。