vant中radio单选框组件实现可以不选的功能

Posted 2023-04-09

参考技术A 这里我使用的是Vant框架的Vue3.0版本，选择搭配Cell组件使用Radio单选框。

如有错误，欢迎指出，谢谢！

elementUI单选框按钮样式

elementUI 单选框按钮样式，用el-radio-group标签嵌套着el-radio-button，就是单选框的按钮样式

可以通过size属性，指定单选框按钮的大小，size属性可选的值有medium,small,mini

el-radio-button的其他用法和el-radio一样

例子：

<template>
<div>
  <el-radio-group v-model="radio" @change="getValue()" size="mini">
    <el-radio-button v-for="(item,i) in items" :key="i" :label="i" :disabled="item.disabled">item.content</el-radio-button>
  </el-radio-group>
</div>
</template>
<script>
export default 
  name: "HelloWorld",
  data () 
    return 
      radio:0,
      items:[
        id:0,content:"选项一",disabled:false,
        id:1,content:"选项二",disabled:true,
        id:2,content:"选项三",disabled:false,
      ]
    ;
  ,
  methods: 
    getValue()
      console.log(this.radio)
    
  ,

</script>
<style lang="css" scoped>
</style>