24 - 激活的样式-指令

[Sunny264]

<script setup lang='ts'>

import { ref } from "vue"

/**
 * Implement the custom directive
 * Make sure the list item text color changes to red when the `toggleTab` is toggled
 *
*/
const VActiveStyle = {
  handler:(el, binding)=>{
    if(binding.value[1]()){
      Array.from(el.parentNode.children).forEach(item=>{
        item.style.color ='black'
      })
      el.style.color = binding.value[0]['color']
    }
  },
  mounted(el, binding){
    VActiveStyle.handler(el, binding)
    el.onclick = ()=>{
      console.log(el, binding)
      VActiveStyle.handler(el, binding)
   }
  }
}

const list = [1, 2, 3, 4, 5, 6, 7, 8]
const activeTab = ref(0)
function toggleTab(index: number) {
  activeTab.value = index
}

</script>

<template>
  <ul>
    <li
      v-for="(item,index) in list"
      :key="index"
      v-active-style="[{'color':'red'},() => activeTab === index]"
      @click="toggleTab(index)"
    >
      {{ item }}
    </li>
  </ul>
</template>