vNavCurrent

当前导航高亮指令(仅支持在vue3项目中使用)

引入版本

0.80.0

Demo

<script setup lang="ts">
  import { vNavCurrent } from '@wyfex/iutils'

  const currentIndex = ref(0)
  const handleLi = (index: number) => {
    currentIndex.value = index
  }
</script>

<template>
  <ul v-navCurrent="{ currentIndex, className: 'li', activeClass: 'active' }">
    <li
      class="li"
      v-for="(item, index) in 4"
      :key="item"
      @click="handleLi(index)"
    >
      选项{{ item }}
    </li>
  </ul>
</template>

<style scoped lang="scss">
  ul {
    border: 1px solid var(--theme-color);
    display: inline-flex;
    .li {
      padding: 5px 10px;
      cursor: pointer;
      &:not(:last-of-type) {
        border-right: 1px solid var(--theme-color);
      }
      &:hover,
      &.active {
        background-color: var(--theme-color);
        color: #fff;
      }
    }
  }
</style>