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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vant中radio单选框组件实现可以不选的功能相关的知识,希望对你有一定的参考价值。

参考技术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>

 

以上是关于vant中radio单选框组件实现可以不选的功能的主要内容,如果未能解决你的问题,请参考以下文章

iView的tree组件实现单选功能

checbox复选框实现radio单选框的单选功能

Flutter -- 基础组件单选开关(Switch)& 单选框(Radio) & 复选框(Checkbox)

elementUI单选框按钮样式

修改原生单选框样式(vue单选组件)

vue + element 中的tree树,自定义增加单选按钮radio实现单选