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