点我扫二维码，查看demo

# Radio 单选框

# 介绍

用于在多个备选项中选中单个状态

# 引入

通过以下方式来按需注册组件。

import Vue from 'vue';
import { Radio } from '@dolphin-iot/ui'

Vue.use(Radio);

1
2
3
4

# 代码演示

# 基础用法

<div class="demo-list">
    <div class="panel">
        <div class="demo-panel">
          <mx-radio v-model="checked1" theme="transparent" text="单选一" @change="onChange1"/>
          <mx-radio v-model="checked2" theme="transparent" text="单选二" @change="onChange2"/>
        </div> 
    </div>
</div>
<script>
export default {
    data() {
        return {
          checked1: false,
          checked2: true,
        }
    },
    methods: {
        onChange1(){
          if(this.checked1) {
            this.checked2 = false;
          }
        },
        onChange2(){
          if(this.checked2) {
            this.checked1 = false;
          }
        },
    }
}
</script>
<style lang="scss" scoped>
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;

  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }

  .demo-panel{
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 28px;
  }
}
</style>

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55

# 图标位置

radio组件可以根据 icon-position属性修改展示的位置；可选值为：left right。

<div class="demo-list">
    <div class="panel">
        <div class="demo-panel">
          <mx-radio v-model="checked1" icon-position="left" theme="transparent" text="单选一" @change="onChange1"/>
          <mx-radio v-model="checked2" icon-position="left" theme="transparent" text="单选二" @change="onChange2"/>
        </div> 
    </div>
</div>
<script>
export default {
    data() {
        return {
          checked1: false,
          checked2: true,
        }
    },
    methods: {
        onChange1(){
          if(this.checked1) {
            this.checked2 = false;
          }
        },
        onChange2(){
          if(this.checked2) {
            this.checked1 = false;
          }
        },
    }
}
</script>
<style lang="scss" scoped>
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;

  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }

  .demo-panel{
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 28px;
  }
}
</style>

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55

# 禁用状态

radio组件通过disabled属性，对当前选项实行禁用。


<div class="demo-list">
    <div class="demo-panel">
        <mx-radio v-model="disableChecked" disabled theme="transparent"  text="禁用选项一" />
        <mx-radio v-model="disableChecked2" disabled theme="transparent"  text="禁用选项二" />
    </div>
</div>
<script>
export default {
    data() {
        return {
          disableChecked: true,
          disableChecked2: false,
        }
    }
}
</script>
<style lang="scss" scoped>
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;

  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }

  .demo-panel{
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 28px;
  }
}
</style>

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

# API

# Props

字段	说明	类型	默认值
v-model	判断选项当前是否被选中	boolean	`false`
value	判断选项当前是否被选中	boolean	`false`
text	选项值	string
disabled	选项禁用	boolean	`false`
icon	默认状态下的选项图标	string	`checked`
active-icon	选中状态下的选项图标	string	`icon_unselect`
theme	单选框主题, 可选值为： `transparent` `brand`	string	`brand`
size	修改图标大小	number	`20`
icon-position	改变图标位置，可选值为：`left` `right`	string	`right`

# Events

事件名	说明	回调函数
change	切换选项时触发	`false`

# Slots

名称	说明
default	自定义选项内容

← Rate 评分 SearchBar 搜索栏 →