Radio 单选框

Scan me!

可自定义或编辑单选框

引入

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

代码演示

普通单选框 getSelectedValuegetSelectedIndex

通过default-index默认选中
  1. <template>
  2. <div class="md-example-child md-example-child-radio md-example-child-radio-0">
  3. <md-radio
  4. ref="radio"
  5. :options="data"
  6. :default-index="1"
  7. >
  8. </md-radio>
  9. </div>
  10. </template>
  11. <script>
  12. import {Radio, Dialog} from 'mand-mobile'
  13. export default {
  14. name: 'radio-demo',
  15. components: {
  16. [Radio.name]: Radio,
  17. },
  18. data() {
  19. return {
  20. data: [{text: '选项1', disabled: true}, {text: '选项2'}, {text: '选项3'}],
  21. }
  22. },
  23. mounted() {
  24. window.RadioTrigger0 = () => {
  25. this.getSelectedValue('radio')
  26. }
  27. window.RadioTrigger1 = () => {
  28. this.getSelectedIndex('radio')
  29. }
  30. },
  31. methods: {
  32. getSelectedValue(radio) {
  33. Dialog.alert({
  34. content: `<pre>${JSON.stringify(this.$refs[radio].getSelectedValue())}</pre>`,
  35. })
  36. },
  37. getSelectedIndex(radio) {
  38. Dialog.alert({
  39. content: `<pre>${JSON.stringify(this.$refs[radio].getSelectedIndex())}</pre>`,
  40. })
  41. },
  42. },
  43. }
  44. </script>

自定义选项内容1

使用slot-scope
  1. <template>
  2. <div class="md-example-child md-example-child-radio md-example-child-radio-2">
  3. <md-radio
  4. ref="radio"
  5. :options="data"
  6. >
  7. <template slot-scope="{ option }">
  8. <div class="md-radio-custom-title" v-text="option.text"></div>
  9. <div class="md-radio-custom-brief">{{ option.text }}的自定义描述</div>
  10. </template>
  11. </md-radio>
  12. </div>
  13. </template>
  14. <script>
  15. import {Radio} from 'mand-mobile'
  16. export default {
  17. name: 'radio-demo',
  18. components: {
  19. [Radio.name]: Radio,
  20. },
  21. data() {
  22. return {
  23. data: [{text: '选项1'}, {text: '选项2'}],
  24. }
  25. },
  26. }
  27. </script>
  28. <style lang="stylus">
  29. .md-example-child-radio-2
  30. .md-radio-custom-title
  31. font-size 28px
  32. .md-radio-custom-brief
  33. font-size 20px
  34. color #999
  35. </style>

Icon设置

  1. <template>
  2. <div class="md-example-child md-example-child-radio md-example-child-radio-4">
  3. <md-radio
  4. ref="radio"
  5. :options="data"
  6. :default-index="0"
  7. icon="circle-right"
  8. icon-inverse="circle"
  9. icon-position="left"
  10. >
  11. </md-radio>
  12. </div>
  13. </template>
  14. <script>
  15. import {Radio} from 'mand-mobile'
  16. export default {
  17. name: 'radio-demo',
  18. components: {
  19. [Radio.name]: Radio,
  20. },
  21. data() {
  22. return {
  23. data: [{text: '选项1'}, {text: '选项2'}, {text: '选项3'}],
  24. }
  25. },
  26. }
  27. </script>

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

通过v-model初始值默认选中
  1. <template>
  2. <div class="md-example-child md-example-child-radio md-example-child-radio-1">
  3. <md-radio
  4. ref="radio"
  5. :options="data"
  6. v-model="optionValue"
  7. input-option-label="其它选项"
  8. input-option-placeholder="其它选项内容"
  9. has-input-option
  10. @change="onRadioChange"
  11. @input="onRadioInput"
  12. ></md-radio>
  13. </div>
  14. </template>
  15. <script>
  16. import {Radio} from 'mand-mobile'
  17. export default {
  18. name: 'radio-demo',
  19. components: {
  20. [Radio.name]: Radio,
  21. },
  22. data() {
  23. return {
  24. data: [{text: '选项1'}, {text: '选项2'}],
  25. optionValue: '选项2',
  26. }
  27. },
  28. mounted() {
  29. window.RadioTrigger2 = () => {
  30. this.selectByIndex('radio', 2)
  31. }
  32. },
  33. methods: {
  34. onRadioChange(value, index) {
  35. console.log(`[Mand-Mobile]: Radio, options: ${JSON.stringify(value)}, index: ${index}`)
  36. },
  37. onRadioInput(value) {
  38. console.log(`[Mand-Mobile]: Radio, options: ${JSON.stringify(value)}`)
  39. },
  40. selectByIndex(radio, index) {
  41. this.$refs[radio].selectByIndex(index)
  42. },
  43. },
  44. }
  45. </script>

自定义选项内容2

使用option-render
  1. <template>
  2. <div class="md-example-child md-example-child-radio md-example-child-radio-3">
  3. <md-radio
  4. ref="radio"
  5. :options="data"
  6. :optionRender="optionRender"
  7. ></md-radio>
  8. </div>
  9. </template>
  10. <script>
  11. import {Radio} from 'mand-mobile'
  12. export default {
  13. name: 'radio-demo',
  14. components: {
  15. [Radio.name]: Radio,
  16. },
  17. data() {
  18. return {
  19. data: [{text: '选项1'}, {text: '选项2'}],
  20. }
  21. },
  22. methods: {
  23. optionRender(item) {
  24. return `<div class="md-radio-custom-title">${item.text}</div><div class="md-radio-custom-brief">${item.text}的自定义描述</div>`
  25. },
  26. },
  27. }
  28. </script>
  29. <style lang="stylus">
  30. .md-example-child-radio-3
  31. .md-radio-custom-title
  32. font-size 28px
  33. .md-radio-custom-brief
  34. font-size 20px
  35. color #999
  36. </style>
  37.  

API

Radio Props

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

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

附录

  1. <template>
  2. <md-radio
  3. :options="data"
  4. >
  5. <!-- option 为每个选项的数据 -->
  6. <template slot-scope="{ option }">
  7. <div class="md-radio-custom-title" v-text="option.text"></div>
  8. <div class="md-radio-custom-brief">{{ option.text }}的自定义描述</div>
  9. </template>
  10. </md-radio>
  11. </template>