尝试用自定义指令实现以下方法
一. 首先显示模板
<template><div class="navBar" ><div @click="changeIndex(index)" v-for="(item, index) in list" :class="['item']">{{ item }}</div></div></template><script setup>import { reactive, toRefs, toRef } from "vue";let state = reactive({curIndex: 0,list: ['选项1', '选项2', '选项3', '选项4']})let { list } = toRefs(state)let curIndex = toRef(state, 'curIndex')let changeIndex = (index) => {//点击改变当前下标curIndex.value = index}</script><style>.navBar {margin: 0 auto;width: 400px;height: 100px;display: flex;}.item {width: 100px;border: 1px solid red;line-height: 100px;text-align: center;}.active {background-color: pink;}</style>
二.用插件的形式准备注册一个自定义指令
参考文档:插件 | Vue.js
他会执行install方式,把app实例传进来,这时候可以在app上挂载一些实例了,这时候顺便在main.js中注册先
三.注册一个全局自定义指令
参考文档:自定义指令 | Vue.js
export default {install(app) {app.directive('clickAndAddClass', {})}}
添加上代码
export default {install(app) {app.directive('clickAndAddClass', {mounted(el, binding) {//拿到自定义指令传过来的配置项const option = binding.value//拿到childconst child = el.getElementsByClassName(option.className)//点击谁,就把最新的下标传进来,并且添加上active类名child[option.curIndex].className += ` ${option.avtiveClass}`},// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用updated(el, binding) {const option = binding.value//获取旧的配置项const oldOption = binding.oldValueconst child = el.getElementsByClassName(option.className)//把上一个item的类名还原child[oldOption.curIndex].className = oldOption.className//再把新的item添加上active,记得别忘了不加空格child[option.curIndex].className += ` ${option.avtiveClass}`},})}}
四.传入自定义指令的配置项
<template><div class="navBar" v-clickAndAddClass="{curIndex,avtiveClass: 'active',className: 'item' }"><div @click="changeIndex(index)" v-for="(item, index) in list" :class="['item']">{{ item }}</div></div></template>
搞定
如果觉得《vue3用自定义的形式写一个点击谁谁改变背景色》对你有帮助，请点赞、收藏，并留下你的观点哦！
