24 - 激活的样式-指令

[huuutao]

<script setup lang='ts'>

import { ref, computed, watch } from "vue"

/**
 * Implement the custom directive
 * Make sure the list item text color changes to red when the `toggleTab` is toggled
 *
*/
const VActiveStyle = {
  created(el, { value }) {
    const [style, fn] = value
    let bool = computed(fn)
    console.log(bool.value)
    const changStyle = () => {
      if (bool.value) {
        Object.keys(style).forEach((key) => el.style[key] = style[key])
      } else {
        el.style = ''
      }
    }
    changStyle()
    watch(() => bool.value, changStyle)
  }
}

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': 'blue' }, () => activeTab === index]"
      @click="toggleTab(index)">
      {{ item }}
    </li>

  </ul>
</template>