1.VXE-Toolbar

        在VXE-Toolbar中,可以使用vxe-button组件实现按钮的选中切换效果,并且可以根据不同的选中状态显示不同的样式。你可以通过设置status属性来控制按钮的选中状态,并通过监听按钮的点击事件来切换选中状态。需要在vxe-toolbar中添加多个vxe-button组件,并为每个按钮设置一个唯一的标识符(例如:button1、button2、button3等)。

2.代码

<template>
  <div>
    <vxe-toolbar>
      <vxe-button :status="button1 ? 'primary' : ''" @click="toggleButton('button1')">按钮1</vxe-button>
      <vxe-button :status="button2 ? 'primary' : ''" @click="toggleButton('button2')">按钮2</vxe-button>
      <vxe-button :status="button3 ? 'primary' : ''" @click="toggleButton('button3')">按钮3</vxe-button>
    </vxe-toolbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      button1: false,
      button2: false,
      button3: false
    };
  },
  methods: {
    toggleButton(button) {
      this[button] = !this[button];
    }
  }
};
</script>

Logo

电影级数字人,免显卡端渲染SDK,十行代码即可调用,工业级demo免费开源下载!

更多推荐