vue 变更ui 框架按钮的样式?

Question

环境 (ant Design Vue) vue3 vite win10
ant Design Vue ui框架
问题: 按钮样式 通过type="primary" 控制,现在想点击当前按钮时type="primay",其他为type="",我改怎么修改toggleMenu 才能实现了.

    <a-row justify="center" align="center">
      <a-button type="primary" @click="toggleMenu('login')"
        >Login</a-button
      >
      <a-button type="" @click="toggleMenu('reg')">register</a-button>
    </a-row>
<script>

const toggleMenu = (value) => {
  console.log()
};
</script>

Answer 1

写一个 mapping

const typeMapping = reactive({
    login: '',
    reg: '',
    ...
})
const toggleMenu = (value) => {
  for (let i in typeMapping) {
    if (i === value) {
        typeMapping[value] = 'primary'
    } else {
        typeMapping[value] = ''
    }
  }
}

<a-row justify="center" align="center">
  <a-button :type="typeMapping['login']" @click="toggleMenu('login')"
    >Login</a-button
  >
  <a-button :type="typeMapping['register']" @click="toggleMenu('reg')">register</a-button>
</a-row>