淘宝开放平台

登录
文档中心 > 天猫精灵IoT开放平台

天猫精灵IoT开放平台

Radio 选择框

更新时间：2019/01/28 访问次数：1446

一、Radio 选择框



参数


参数 类型 必选 默认值 说明
checked Boolean 否 false 按钮是否选中
value Boolean, String, Number ’’ 按钮被选中后的值 ——
borderColor string 否 #7383a2 边框样式

Events


事件名称 参数 说明
change (value) 按钮被选中时，触发该事件，参数为按钮值。取消选中时，不会触发该事件

使用示例

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
<template>
  <div>
    <Radio :checked="checked" @change="onChange" :borderColor="'red'"/>
  </div>
</template>
 
<script>
import { Radio } from 'genie-ui'
 
export default {
  components: {
    Radio
  },
  data () {
    return {
      checked: false
    }
  },
 
  methods: {
    // 按钮被选中时，触发该事件，参数为按钮值。取消选中时，不会触发该事件
    onChange() {
      this.checked = !this.checked;
    }
  }
}
</script>





二、RadioGroup


单选按钮组，实际使用按钮时，使用该组件更为方便。



参数


参数 类型 必选 默认值 说明
value Boolean, String, Number 是 ’’ 按钮组中，当前被选中的按钮值
options Array 是 [] 初始化按钮列表，其属性见下表说明
borderColor string 否 #7383a2 边框样式

options


参数 类型 必选 默认值 说明
value Boolean, String, Number 是 —— 该按钮被选中时的值
title String 是 —— 该按钮选项标题



Events


事件名称 参数 说明
change (value) 按钮被选中时，触发该事件，参数为按钮值

使用示例

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
<template>
  <div>
    <h2>选中值: {{value}}</h2>
    <radio-group
      v-model="value"
      :options="options"
      @change="onChange"
    ></radio-group>
  </div>
</template>
 
<script>
import { RadioGroup } from 'genie-ui'
 
export default {
  components: {
    RadioGroup
  },
  data () {
    return {
      options: [{ value: 1, checked: true, title: '东方红' }, { value: 2, checked: false, title: '东方红2' }],
      value: 1
    }
  },
 
  methods: {
    onChange (v) {
      console.log('radio changed, new value:', v)
    }
  }
}
</script>

FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部