Mango UI

Radio 单选 pass 0.0.13+

基础用法

直接拿来用,这种方式需要每个都用 v-model 绑定值

展开查看
<mg-radio v-model="v1" style="margin-right:20px" :value="1">鱼</mg-radio>
<mg-radio v-model="v1" :value="2">熊掌</mg-radio>
<mg-radio :disabled="true" :value="3">啥也不要</mg-radio>
<mg-radio :value="true">凑数的</mg-radio>
1
2
3
4

配合 RadioGroup

只需要一个 v-model 而且默认带有间隔

展开查看
<mg-radio-group v-model="radioGroupValue">
  <mg-radio :value="1">第二个鱼</mg-radio>
  <mg-radio :value="2">第二个熊掌</mg-radio>
  <mg-radio :disabled="true" :value="3">禁用</mg-radio>
  <mg-radio :value="true">凑数</mg-radio>
</mg-radio-group>
<script>
  export default{
    setup(){
      const radioGroupValue = ref(1)
      return {
        radioGroupValue
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

按钮样式的单选

RadioButton 自己是不可以使用 v-model 的，所以一定记得结合 RadioGroup~~ 其实实现上是可以支持自定义样式的...对不起，妹拿出时间整...

展开查看
<mg-radio-group v-model="btnGroupModel" @change="change">
  <mg-radio-button :value="1" :label="'吃东西'"></mg-radio-button>
  <mg-radio-button :value="2" :label="'敲代码'"></mg-radio-button>
  <mg-radio-button :disabled="true" :value="3" :label="'全都要'"></mg-radio-button>
  <mg-radio-button :value="4" :label="'做运动'"></mg-radio-button>
</mg-radio-group>
<script>
  export default{
    setup(){
      const btnGroupModel = ref(1)
      const change = (v)=>{
        console.log(v)
      }
      return {
        btnGroupModel
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

需要注意展示文字需要使用 label 属性而非插槽

Radio Attributes

参数说明类型可选值默认值
v-model----
value单选框绑定值---
disabled是否禁用boolean--

RadioButton Attributes

参数说明类型可选值默认值
value单选框绑定值---
disabled是否禁用boolean--
label文本内容string--

Radio Event & RadioButton Event

事件说明回参
checked选中时触发被选中单选框的绑定值

RadioGroup Event

事件说明回参
change绑定值变化时触发当前选中的值