Directiva personalizada de Vue: realice el cambio de pestaña
1. No aplicable a la implementación de instrucciones personalizadas
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>
2. Usa las directivas personalizadas de Vue
Paso 1: Crea un archivo js: tabChange.js
Paso 2: Modifique el archivo 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>
Paso 3: Escriba el código del módulo:
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}`;//在切换的同时要重新设置元素的样式
}
}
Lo anterior es la implementación de las instrucciones personalizadas de Vue, preste atención a la columna " Preguntas de la entrevista inicial ".
Compartiré los problemas comunes en mis proyectos habituales y el conocimiento de la prueba escrita y la entrevista contigo en CSDN, y progresaremos juntos.