Radio 单选框

Radio 单选框

#介绍

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

#引入

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

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

Vue.use(Radio);

#代码演示

#基础用法

<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>

#图标位置

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>

#禁用状态

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>

#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	自定义选项内容