vant_radio组件实现勾选+取消勾选

需求

需求：在注册之前需要用户阅读会员协议以及隐私协议并同意协议内容

实现：van-radio

如上图 van-radio单选框点击不能取消勾选，只能切换选择值！

但是需求期望—> 点击切换勾选值

需求

<template>
  <div>
    <!-- 组件：根据需求使用 vant 的 radio 做了一个单选按钮 -->
    <!-- vant的radio组件默认逻辑：当点击radio的icon或文本时会自动选中并将group双向绑定的值改为当前radio的name属性值(因此多次点击无作用-不会取消选中)-->
    <!-- 问题：点击无法取消勾选 -->
    <!-- 逻辑实现：
      【1】group存在change事件(仅当选中值发生改变时触发-无论是组件内部修改还是我们自己手动修改都会触发)
      【2】radio存在click事件(当元素被点击时触发)
       逻辑：当用户点击该按钮时
        (1)判断group绑定值是否发生变化了；
         -发生变化-无需手动修改(组件内部处理了)；
         -没有发生变化-说明需要手动处理将值改变
        (2) 每次点击将group值改变标识设置为true
         -将ischange改为false
     -->
    <van-radio-group v-model="isSelect" @change="changmethod">
      <van-radio :name="true" icon-size="15px" @click="clickmethod">提交视为同意<<用户隐私政策>></van-radio>
    </van-radio-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isSelect: false,
      ischange: false
    }
  },
  methods: {
    changmethod () {
      this.ischange = true
    },
    clickmethod () {
      this.isSelect = this.ischange ? this.isSelect : !this.isSelect
      this.ischange = false
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

实现：van-checkbox

使用 van-radio 来实现上述需求无疑是把问题想复杂了，

使用van-checkbox实现更简单

• 可以勾选/取消勾选
• 可以切换形状(圆形/方形/自定义)

<van-checkbox v-model="checked">复选框van-checkbox>
1