Radio 单选框 - 《Mand Mobile v2.x 组件文档》

引入
代码演示
- 普通单选框
- 列表模式
- 表单项内联
API
- Radio Props
- Radio List Props
- Radio List Methods
  - select(value)
- Radio List Events
  - @change(option, index)
- Radio List Slots

Radio 单选框

Scan me!

可自定义或编辑单选框

引入

import { Radio, RadioList } from 'mand-mobile'
Vue.component(Radio.name, Radio)
Vue.component(RadioList.name, RadioList)

代码演示

普通单选框

Radio 单选框 - 图2

        <template>
  <div class="md-example-child md-example-child-radio md-example-child-radio-0">
    <md-radio name="0" v-model="checked" label="单选项1" />
    <md-radio name="1" v-model="checked" label="单选项2" />
  </div>
</template>
<script>
import {Radio} from 'mand-mobile'
export default {
  name: 'radio-demo',
  components: {
    [Radio.name]: Radio,
  },
  data() {
    return {
      checked: '0',
    }
  },
}
</script>

列表模式

Radio 单选框 - 图3

        <template>
  <div class="md-example-child md-example-child-radio md-example-child-radio-2">
    <md-field title="简单选择列表" class="radio-field">
      <md-radio-list
        v-model="myBank"
        :options="banks"
        icon-size="lg"
      />
    </md-field>
    <md-field title="输入项" class="radio-field">
      <md-radio-list
        :options="reasons"
        v-model="myReason"
        icon="right"
        icon-inverse=""
        icon-disabled=""
        icon-position="right"
        has-input
        input-label="其他"
        input-placeholder="请输入原因"
      />
    </md-field>
  </div>
</template>

<script>
import {Field, RadioList} from 'mand-mobile'

export default {
  name: 'radio-demo',
  components: {
    [Field.name]: Field,
    [RadioList.name]: RadioList,
  },
  data() {
    return {
      myBank: '',
      banks: [
        {
          value: '0',
          text: '交通银行(尾号3089)',
          brief: '选项摘要描述',
        },
        {
          value: '1',
          text: '招商银行(尾号2342)',
          brief: '选项摘要描述',
        },
        {
          value: '2',
          text: '建设银行(尾号4321)',
          brief: '选项摘要描述',
          disabled: true,
        },
      ],
      myReason: '',
      reasons: [
        {
          value: '0',
          text: '我有其他保险',
        },
        {
          value: '1',
          text: '每单都扣，我担心扣太多',
        },
        {
          value: '2',
          text: '我身体好，不需要重疾险',
        },
        {
          value: '3',
          text: '接单少，加入这个没什么用',
        },
        {
          value: '4',
          text: '我不了解这是什么计划',
        },
      ],
    }
  },
}

</script>

<style lang="stylus" scoped>
  .radio-field
    margin-bottom 40px
</style>

表单项内联

Radio 单选框 - 图4

        <template>
  <div class="md-example-child md-example-child-radio md-example-child-radio-1">
    <md-field>
      <md-field-item title="婚姻状况" solid>
        <md-radio name="2" v-model="marriage" label="已婚" inline />
        <md-radio name="1" v-model="marriage" label="未婚" inline />
        <md-radio name="3" v-model="marriage" label="保密" inline />
      </md-field-item>
    </md-field>
  </div>
</template>

<script>
import {Radio, Field, FieldItem} from 'mand-mobile'

export default {
  name: 'radio-demo',
  components: {
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Radio.name]: Radio,
  },
  data() {
    return {
      marriage: '2',
    }
  },
}

</script>

API

Radio Props

属性	说明	类型	默认值	备注
v-model	选中项的`name`	any	-
name	唯一键值	any	-	-
label	描述文案	String-	-
disabled	是否禁用选项	Boolean	`false`	-
inline	是否内联显示	Boolean	`false`	-
icon	选中项的图标	String	`checked`	-
icon-inverse	非选中项的图标	String	`check`	-
icon-disabled	禁用项的图标	String	`check-disabled`	-
icon-svg	使用svg图标	Boolean	`false`	-
size	图标大小	String	`md`	-

Radio List Props

属性	说明	类型	默认值	备注
v-model	选中项的`value`	any	-
options	选项数据源	Array<{text, value, disabled, …}>	`[]`	`disabled`为选项是否禁用
has-input	是否具有可编辑项	Boolean	`false`	-
input-label	可编辑项的名称	String	-	仅用于`has-input`为`true`
input-placeholder	可编辑项的占位提示	String	-	仅用于`has-input`为`true`
icon	选中项的图标	String	`checked`	-
icon-inverse	非选中项的图标	String	`check`	-
icon-disabled	禁用项的图标	String	`check-disabled`	-
icon-size	图标大小	String	`lg`	-
icon-svg	使用svg图标	Boolean	`false`	-
icon-position	图标位置	String	`left`	`left`, `right`
is-slot-scope	是否强制使用或不使用`slot-scope`	Boolean	-	某些情况下需要根据业务逻辑动态确定是否使用，可避免直接组件上加`if/else`

Radio List Methods

select(value)

设置选中项

参数	说明	类型
value	选中项的value	String

Radio List Events

@change(option, index)

切换选中项事件

属性	说明	类型
option	当前选中项的数据	Object:{text, value, disabled, …}
index	当前选中项的索引	Number

Radio List Slots

<template>
  <md-radio-list :options="data">
    <template slot-scope="{ option }">
      <div class="custom-title" v-text="option.text"></div>
      <div class="custom-brief">{{ option.text }}的自定义描述</div>
    </template>
  </md-radio-list>
</template>