vue可选按钮实现

Vue 可选按钮实现

在 Vue 中实现可选按钮（如单选或切换按钮组），可以通过多种方式完成。以下是几种常见的方法：

使用 v-model 绑定单选值

通过 v-model 绑定一个变量，配合 v-for 动态生成按钮组，实现单选效果。

<template>
  <div>
    <button
      v-for="option in options"
      :key="option.value"
      @click="selected = option.value"
      :class="{ active: selected === option.value }"
    >
      {{ option.label }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项1', value: 'opt1' },
        { label: '选项2', value: 'opt2' },
        { label: '选项3', value: 'opt3' }
      ]
    };
  }
};
</script>

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

使用 v-radio 组件（如 Element UI）

如果使用 UI 库（如 Element UI），可以直接使用内置的单选按钮组件。

<template>
  <el-radio-group v-model="selected">
    <el-radio-button
      v-for="option in options"
      :key="option.value"
      :label="option.value"
    >
      {{ option.label }}
    </el-radio-button>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项1', value: 'opt1' },
        { label: '选项2', value: 'opt2' },
        { label: '选项3', value: 'opt3' }
      ]
    };
  }
};
</script>

使用自定义组件实现切换按钮

通过封装一个可复用的切换按钮组件，支持单选或多选。

<template>
  <div>
    <toggle-button
      v-for="option in options"
      :key="option.value"
      :value="option.value"
      :label="option.label"
      v-model="selected"
    />
  </div>
</template>

<script>
import ToggleButton from './ToggleButton.vue';

export default {
  components: { ToggleButton },
  data() {
    return {
      selected: [],
      options: [
        { label: '选项1', value: 'opt1' },
        { label: '选项2', value: 'opt2' },
        { label: '选项3', value: 'opt3' }
      ]
    };
  }
};
</script>

自定义 ToggleButton 组件

<template>
  <button
    @click="toggle"
    :class="{ active: isSelected }"
  >
    {{ label }}
  </button>
</template>

<script>
export default {
  props: {
    value: { type: [String, Number], required: true },
    label: { type: String, required: true },
    modelValue: { type: [Array, String], default: () => [] }
  },
  computed: {
    isSelected() {
      if (Array.isArray(this.modelValue)) {
        return this.modelValue.includes(this.value);
      }
      return this.modelValue === this.value;
    }
  },
  methods: {
    toggle() {
      if (Array.isArray(this.modelValue)) {
        const newValue = [...this.modelValue];
        if (this.isSelected) {
          newValue.splice(newValue.indexOf(this.value), 1);
        } else {
          newValue.push(this.value);
        }
        this.$emit('update:modelValue', newValue);
      } else {
        this.$emit('update:modelValue', this.value);
      }
    }
  }
};
</script>

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

使用 v-bind 和动态样式

通过动态绑定样式类或内联样式，实现按钮的选中状态反馈。

<template>
  <div>
    <button
      v-for="option in options"
      :key="option.value"
      @click="toggleSelection(option.value)"
      :style="{
        backgroundColor: selected.includes(option.value) ? '#42b983' : '',
        color: selected.includes(option.value) ? 'white' : ''
      }"
    >
      {{ option.label }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { label: '选项1', value: 'opt1' },
        { label: '选项2', value: 'opt2' },
        { label: '选项3', value: 'opt3' }
      ]
    };
  },
  methods: {
    toggleSelection(value) {
      const index = this.selected.indexOf(value);
      if (index === -1) {
        this.selected.push(value);
      } else {
        this.selected.splice(index, 1);
      }
    }
  }
};
</script>

以上方法可以根据需求选择，灵活实现单选、多选或切换按钮功能。