vue实现当前元素高亮
Vue 实现当前元素高亮的方法
使用动态 class 绑定
通过 v-bind:class 或简写 :class 动态切换高亮样式。定义一个变量存储当前高亮元素的索引或唯一标识，点击时更新该变量。
<template>
<div>
<div
v-for="(item, index) in items"
:key="index"
:class="{ 'highlight': activeIndex === index }"
@click="activeIndex = index"
>
{{ item }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3'],
activeIndex: null
};
}
};
</script>
<style>
.highlight {
background-color: yellow;
}
</style>使用计算属性
对于复杂逻辑，可通过计算属性返回高亮状态。
<template>
<div>
<div
v-for="item in items"
:key="item.id"
:class="getHighlightClass(item.id)"
@click="setActiveItem(item.id)"
>
{{ item.text }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' }
],
activeId: null
};
},
methods: {
setActiveItem(id) {
this.activeId = id;
}
},
computed: {
getHighlightClass() {
return (id) => ({ 'highlight': this.activeId === id });
}
}
};
</script>使用 Vuex 管理状态
若项目使用 Vuex，可将高亮状态集中管理。
// store.js
export default new Vuex.Store({
state: {
activeItemId: null
},
mutations: {
setActiveItem(state, id) {
state.activeItemId = id;
}
}
});组件中通过 mapState 和 mapMutations 使用：
<template>
<div>
<div
v-for="item in items"
:key="item.id"
:class="{ 'highlight': activeItemId === item.id }"
@click="setActiveItem(item.id)"
>
{{ item.text }}
</div>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState(['activeItemId'])
},
methods: {
...mapMutations(['setActiveItem'])
}
};
</script>使用路由高亮
若高亮与路由相关，可通过 router-link 的 active-class 实现。
<template>
<div>
<router-link
v-for="route in routes"
:key="route.path"
:to="route.path"
active-class="highlight"
>
{{ route.name }}
</router-link>
</div>
</template>注意事项
- 样式优先级：确保高亮样式的优先级高于默认样式。
- 性能优化：列表较大时，避免频繁的 DOM 操作，可使用虚拟滚动。
- 无障碍：为高亮元素添加
aria-current属性提升可访问性。
