Vue 按钮切换 CSS 使用复选框

Question

我正在使用 VueJS 下面是我的 css

.button-css {
 align-items: center;
 background-color: var(--azure-radiance);
 border-radius: 30px;
 display: flex;
 height: 50px;
 min-width: 200px;
 padding: 0 60px;
}

.opensans-bold-white-18px {
 color: var(--white);
 font-family: var(--font-family-open_sans);
 font-size: var(--font-size-xxxl);
 font-style: normal;
 font-weight: 700;
 align-self: center;
}

然后是 Vue 脚本

new Vue({
el: "#app",
data: {
   termsState: false,
   validated: false
  },
computed: {
  termsError() {
  return this.validated && !this.termsState
  }
},
methods: {
  handleTermsState() {
  this.validated = false
},

handleSubmit() {
  this.validated = true
 }
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
<label for="terms">
        Terms and Privacy Policy
        <input type="checkbox" id="terms" name="terms" v-model="termsState"    @change="handleTermsState">
        {{ termsState }}
    </label>
      <div><button class="button-css opensans-bold-white-18px" type="submit" :disabled="!termsState" @click="handleSubmit">Submit</button></div>
</div>

该按钮仅在启用时保留 CSS 即 'oval shape button' 当复选框被选中时，当它被禁用时它采用灰色矩形按钮。我想保留按钮的形状为灰色椭圆形按钮禁用模式如何实现？

以下是前后对比图

我希望之前和之后的图像都是椭圆形

Answer 1

其实和Vue没有关系。您所要做的就是像这样修改您的CSS：

先去掉颜色属性:

.opensans-bold-white-18px {
   /* color: var(--white); */
   font-family: var(--font-family-open_sans);
   font-size: var(--font-size-xxxl);
   font-style: normal;
   font-weight: 700;
   align-self: center;
  }

其次，更改您的按钮 css class 以像这样绑定计算属性：

<button :class="cssClass" type="submit" :disabled="!termsState" @click="handleSubmit">Submit</button>

并添加你的计算属性:

  computed: {
    cssClass() {
      return "overlap-group-23 opensans-bold-white-18px button-css " + (this.termsState ? "button-enabled" : "");
    }
  }

已在 Safari 和 Chrome 上测试。

这是你想要的吗？

Vue 按钮切换 CSS 使用复选框

Vue button toggling CSS using checkbox

css

checkbox

togglebutton

vue.js