vue排他思想实现

Vue 排他思想实现方法

排他思想的核心是确保同一时间只有一个元素被激活或选中。Vue 中可以通过多种方式实现这种逻辑。

方法一：使用 v-for 和 v-if 结合

<template>
  <div>
    <button 
      v-for="(item, index) in items" 
      :key="index"
      @click="selectItem(index)"
      :class="{ active: selectedIndex === index }"
    >
      {{ item }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['选项1', '选项2', '选项3'],
      selectedIndex: -1
    }
  },
  methods: {
    selectItem(index) {
      this.selectedIndex = index
    }
  }
}
</script>

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

方法二：使用计算属性

<template>
  <div>
    <button 
      v-for="(item, index) in items" 
      :key="index"
      @click="selectedItem = item"
      :class="{ active: isActive(item) }"
    >
      {{ item }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['选项1', '选项2', '选项3'],
      selectedItem: null
    }
  },
  computed: {
    isActive() {
      return (item) => item === this.selectedItem
    }
  }
}
</script>

方法三：使用 Vuex 状态管理

// store.js
export default new Vuex.Store({
  state: {
    selectedItem: null
  },
  mutations: {
    setSelectedItem(state, item) {
      state.selectedItem = item
    }
  }
})

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

方法四：使用自定义指令

// main.js
Vue.directive('exclusive', {
  bind(el, binding, vnode) {
    el.addEventListener('click', () => {
      const group = binding.arg || 'default'
      const value = binding.value
      vnode.context.$exclusive[group] = value
    })
  },
  update(el, binding, vnode) {
    const group = binding.arg || 'default'
    const value = binding.value
    el.classList.toggle('active', vnode.context.$exclusive[group] === value)
  }
})

Vue.prototype.$exclusive = {}

<template>
  <div>
    <button 
      v-exclusive:group1="'option1'"
      @click="$exclusive.group1 = 'option1'"
    >选项1</button>
    <button 
      v-exclusive:group1="'option2'"
      @click="$exclusive.group1 = 'option2'"
    >选项2</button>
  </div>
</template>

方法五：使用事件总线

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

<template>
  <div>
    <button 
      v-for="(item, index) in items" 
      :key="index"
      @click="emitSelection(item)"
      :class="{ active: selectedItem === item }"
    >
      {{ item }}
    </button>
  </div>
</template>

<script>
import { EventBus } from './eventBus'
export default {
  data() {
    return {
      items: ['选项1', '选项2', '选项3'],
      selectedItem: null
    }
  },
  created() {
    EventBus.$on('item-selected', (item) => {
      this.selectedItem = item
    })
  },
  methods: {
    emitSelection(item) {
      EventBus.$emit('item-selected', item)
    }
  }
}
</script>

这些方法各有优缺点，可以根据项目复杂度和需求选择最适合的实现方式。简单场景推荐使用方法一或方法二，大型项目推荐使用方法三或方法五。