vue实现点选效果

Vue 实现点选效果的方法

使用 v-bind 和 v-on 绑定动态类与点击事件

通过 v-bind:class 动态绑定 CSS 类，结合 v-on:click 切换选中状态。以下是一个基础实现：

<template>
  <div 
    v-for="item in items" 
    :key="item.id"
    :class="{ 'active': selectedItem === item.id }"
    @click="selectItem(item.id)"
  >
    {{ item.name }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' }
      ],
      selectedItem: null
    };
  },
  methods: {
    selectItem(id) {
      this.selectedItem = id;
    }
  }
};
</script>

<style>
.active {
  background-color: #42b983;
  color: white;
}
</style>

使用计算属性管理选中状态

通过计算属性判断当前项是否被选中，适合复杂逻辑的场景：

<template>
  <div 
    v-for="item in items" 
    :key="item.id"
    :class="getItemClass(item.id)"
    @click="selectItem(item.id)"
  >
    {{ item.name }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' }
      ],
      selectedItem: null
    };
  },
  computed: {
    getItemClass() {
      return (id) => ({
        'active': this.selectedItem === id,
        'disabled': id === 2 // 示例：额外条件
      });
    }
  },
  methods: {
    selectItem(id) {
      this.selectedItem = id;
    }
  }
};
</script>

使用 Vuex 管理全局选中状态

若需跨组件共享选中状态，可通过 Vuex 实现：

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    selectedItem: null
  },
  mutations: {
    setSelectedItem(state, id) {
      state.selectedItem = id;
    }
  }
});

组件中调用：

<template>
  <div 
    v-for="item in items" 
    :key="item.id"
    :class="{ 'active': $store.state.selectedItem === item.id }"
    @click="$store.commit('setSelectedItem', item.id)"
  >
    {{ item.name }}
  </div>
</template>

使用第三方库实现高级交互

对于拖拽点选等复杂场景，可借助 vuedraggable 或自定义指令：

<template>
  <draggable 
    v-model="items" 
    @start="onDragStart" 
    @end="onDragEnd"
  >
    <div 
      v-for="item in items" 
      :key="item.id"
      :class="{ 'active': selectedItem === item.id }"
      @click="selectItem(item.id)"
    >
      {{ item.name }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      items: [/* ... */],
      selectedItem: null
    };
  },
  methods: {
    selectItem(id) {
      this.selectedItem = id;
    },
    onDragStart() { /* ... */ },
    onDragEnd() { /* ... */ }
  }
};
</script>

注意事项

• 性能优化：对于长列表，建议使用 Object.freeze 冻结静态数据或虚拟滚动。
• 无障碍访问：为选中项添加 aria-selected 属性：

  <div 
    :aria-selected="selectedItem === item.id"
  >
  </div>

• 多选支持：将 selectedItem 改为数组即可实现多选逻辑。