vue自定义指令实现切换

最新推荐文章于 2022-12-07 15:58:09 发布

醉红梦颜

最新推荐文章于 2022-12-07 15:58:09 发布

阅读量202

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_16495187/article/details/118380959

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1.html

<div class="panel" v-SelectItem="{className:'panel-model',activeClass:'active-model',currentIndex:SelectIndex}">
	<div class="panel-model"  v-for="(item,index) in State" :key="index" @click="SelectIndexFun(index)">
		<span>{{item.ModelName}}</span>
   	</div>
</div>

2.全局自定义指令注册(需要在main.js文件定义)

const app =createApp(App)
//全局调用自定义指令()
app.directive('SelectItem', {
    // 指令绑定元素挂载前
    beforeMount(el) {},
    // 指令绑定元素挂载后
    mounted(el, binding) {
        let options = binding.value
        let {className,activeClass,currentIndex} = options
        let children = el.getElementsByClassName(className)
        children[currentIndex].className+=` ${activeClass}`
    },
    // 指令绑定元素因为数据修改触发修改前
    beforeUpdate(el) {},
    // 指令绑定元素因为数据修改触发修改后
    updated(el,binding) {
        let options = binding.value
        let oldoptions = binding.oldValue
        let {className,activeClass,currentIndex} = options
        let children = el.getElementsByClassName(className)
        let {currentIndex:oldcurrentindex}=oldoptions
        children[currentIndex].className+=` ${activeClass}`
        children[oldcurrentindex].className+=className
    },
    // 指令绑定元素销毁前
    beforeUnmount(el) {},
    // 指令绑定元素销毁后
    unmounted(el) {},
});

3.局部自定义指令注册

directives: {
    SelectItem: {
      mounted(el, binding) {
        let options = binding.value;
        let { className, activeClass, currentIndex } = options;
        let children = el.getElementsByClassName(className);
        children[currentIndex].className += ` ${activeClass}`;
      },
      updated(el, binding) {
        let options = binding.value;
        let oldoptions = binding.oldValue;
        let { className, activeClass, currentIndex } = options;
        let children = el.getElementsByClassName(className);
        let { currentIndex: oldcurrentindex } = oldoptions;
        children[currentIndex].className += ` ${activeClass}`;
        children[oldcurrentindex].className += className;
      },
    },
  },

4.数据

  setup(){
    let SelectIndex=ref(0)
    let SelectIndexFun=(index)=>{
      SelectIndex.value = index
    }
    let State=reactive([
      {ModelName:"选项一"},
      {ModelName:"选项二"},
      {ModelName:"选项三"},
      {ModelName:"选项四"},
      {ModelName:"选项五"},
    ])
    return{
      State,
      SelectIndex,
      SelectIndexFun
    }
  }