表单组件 Form - Radio 单选框 - 《Mand Mobile v1.x 组件文档》

引入
代码演示
API

Radio 单选框

可自定义或编辑单选框

引入

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

代码演示

普通单选框 getSelectedValuegetSelectedIndex

通过default-index默认选中

<template>
  <div class="md-example-child md-example-child-radio md-example-child-radio-0">
    <md-radio
      ref="radio"
      :options="data"
      :default-index="1"
    >
    </md-radio>
  </div>
</template>
<script>
import {Radio, Dialog} from 'mand-mobile'
export default {
  name: 'radio-demo',
  components: {
    [Radio.name]: Radio,
  },
  data() {
    return {
      data: [{text: '选项1', disabled: true}, {text: '选项2'}, {text: '选项3'}],
    }
  },
  mounted() {
    window.RadioTrigger0 = () => {
      this.getSelectedValue('radio')
    }
    window.RadioTrigger1 = () => {
      this.getSelectedIndex('radio')
    }
  },
  methods: {
    getSelectedValue(radio) {
      Dialog.alert({
        content: `<pre>${JSON.stringify(this.$refs[radio].getSelectedValue())}</pre>`,
      })
    },
    getSelectedIndex(radio) {
      Dialog.alert({
        content: `<pre>${JSON.stringify(this.$refs[radio].getSelectedIndex())}</pre>`,
      })
    },
  },
}
</script>

自定义选项内容1

使用slot-scope

<template>
  <div class="md-example-child md-example-child-radio md-example-child-radio-2">
    <md-radio
      ref="radio"
      :options="data"
    >
      <template slot-scope="{ option }">
        <div class="md-radio-custom-title" v-text="option.text"></div>
        <div class="md-radio-custom-brief">{{ option.text }}的自定义描述</div>
      </template>
    </md-radio>
  </div>
</template>
<script>
import {Radio} from 'mand-mobile'
export default {
  name: 'radio-demo',
  components: {
    [Radio.name]: Radio,
  },
  data() {
    return {
      data: [{text: '选项1'}, {text: '选项2'}],
    }
  },
}
</script>
<style lang="stylus">
.md-example-child-radio-2
  .md-radio-custom-title
    font-size 28px
  .md-radio-custom-brief
    font-size 20px
    color #999
</style>

Icon设置

<template>
  <div class="md-example-child md-example-child-radio md-example-child-radio-4">
    <md-radio
      ref="radio"
      :options="data"
      :default-index="0"
      icon="circle-right"
      icon-inverse="circle"
      icon-position="left"
    >
    </md-radio>
  </div>
</template>
<script>
import {Radio} from 'mand-mobile'
export default {
  name: 'radio-demo',
  components: {
    [Radio.name]: Radio,
  },
  data() {
    return {
      data: [{text: '选项1'}, {text: '选项2'}, {text: '选项3'}],
    }
  },
}
</script>

可编辑选项单选框 selectByIndex(2)

通过v-model初始值默认选中

<template>
  <div class="md-example-child md-example-child-radio md-example-child-radio-1">
    <md-radio
      ref="radio"
      :options="data"
      v-model="optionValue"
      input-option-label="其它选项"
      input-option-placeholder="其它选项内容"
      has-input-option
      @change="onRadioChange"
      @input="onRadioInput"
    ></md-radio>
  </div>
</template>
<script>
import {Radio} from 'mand-mobile'
export default {
  name: 'radio-demo',
  components: {
    [Radio.name]: Radio,
  },
  data() {
    return {
      data: [{text: '选项1'}, {text: '选项2'}],
      optionValue: '选项2',
    }
  },
  mounted() {
    window.RadioTrigger2 = () => {
      this.selectByIndex('radio', 2)
    }
  },
  methods: {
    onRadioChange(value, index) {
      console.log(`[Mand-Mobile]: Radio, options: ${JSON.stringify(value)}, index: ${index}`)
    },
    onRadioInput(value) {
      console.log(`[Mand-Mobile]: Radio, options: ${JSON.stringify(value)}`)
    },
    selectByIndex(radio, index) {
      this.$refs[radio].selectByIndex(index)
    },
  },
}
</script>

自定义选项内容2

使用option-render

<template>
  <div class="md-example-child md-example-child-radio md-example-child-radio-3">
    <md-radio
      ref="radio"
      :options="data"
      :optionRender="optionRender"
    ></md-radio>
  </div>
</template>
<script>
import {Radio} from 'mand-mobile'
export default {
  name: 'radio-demo',
  components: {
    [Radio.name]: Radio,
  },
  data() {
    return {
      data: [{text: '选项1'}, {text: '选项2'}],
    }
  },
  methods: {
    optionRender(item) {
      return `<div class="md-radio-custom-title">${item.text}</div><div class="md-radio-custom-brief">${item.text}的自定义描述</div>`
    },
  },
}
</script>
<style lang="stylus">
.md-example-child-radio-3
  .md-radio-custom-title
    font-size 28px
  .md-radio-custom-brief
    font-size 20px
    color #999
</style>

API

Radio Props

属性	说明	类型	默认值	备注
v-model	选中项的`value`	String	-	如果数据源中没有`value`, 则为`text`或`label`
options	选项数据源	Array<{text, value, disabled, …}>	`[]`	`disabled`为选项是否禁用
default-index	默认选择项索引	Number	`-1`	`v-model`有初始值时无效
invalid-index	禁用选择项索引	Number/Array	`-1`	作用等同于`options`元素中的属性`disabled`
has-input-option	是否具有可编辑项	Boolean	`false`	-
input-option-label	可编辑项的名称	String	-	仅用于`has-input-option`为`true`
input-option-placeholder	可编辑项的占位提示	String	-	仅用于`has-input-option`为`true`
icon	选中项的图标	String	`right`	-
icon-inverse	非选中项的图标	String	-	-
icon-size	图标大小	String	`sm`	-
icon-position	图标位置	String	`right`	`left`, `right`
option-render	返回各选项自定义渲染内容	Function({text, value, disabled, …}): String	-	`vue 2.1.0+`可使用`slot-scope`，见附录
is-slot-scope	是否强制使用或不使用`slot-scope`	Boolean	-	某些情况下需要根据业务逻辑动态确定是否使用
is-across-border^1.5.0+	边框通栏，两侧无间距	Boolean	false	-

Radio Methods

getSelectedValue(): option

获取当前选中项

属性	说明	类型
option	选中项的数据	`Object:{text, value, disabled, …}`，如果选中为可编辑项，则为`String`

getSelectedIndex(): index

获取当前选中项索引值

属性	说明	类型
index	选中项索引值	Number

selectByIndex(index)

设置选中项

参数	说明	类型
index	选中项索引值	Number

Component Events

@change(option, index)

切换选中项事件

属性	说明	类型
option	选中项的数据	`Object:{text, value, disabled, …}`，如果选中为可编辑项，则为`String`
index	选中项索引值	Number

附录

<template>
  <md-radio
    :options="data"
  >
    <!-- option 为每个选项的数据 -->
    <template slot-scope="{ option }">
      <div class="md-radio-custom-title" v-text="option.text"></div>
      <div class="md-radio-custom-brief">{{ option.text }}的自定义描述</div>
    </template>
  </md-radio>
</template>