Radio Group
<template> <div class="wxc-demo"> <scroller class="scroller"> <wxc-radio :list="list" @wxcRadioListChecked="wxcRadioListChecked"></wxc-radio> <text class="radio-text">checkedItem: {{checkedInfo}}</text> <category title="Radio disabled"></category> <wxc-radio :list="list2"></wxc-radio> </scroller> </div> </template> <script> import { WxcRadio } from 'weex-ui' export default { components: { WxcRadio }, data: () => ({ list: [ { title: 'option1', value: 1 }, { title: 'option2', value: 2, checked: true }, { title: 'option3', value: 3 }, { title: 'option4', value: 4 }, ], list2: [ { title: 'unchecked and disabled', value: 5, disabled: true }, { title: 'checked and disabled', value: 6, disabled: true, checked: true }, ], checkedInfo: { title: 'option2', value: 2 } }), methods: { wxcRadioListChecked (e) { this.checkedInfo = e; } } } </script>
More details can be found in here
Prop | Type | Required | Default | Description |
---|---|---|---|---|
list | Array | Y | [] | Radio config list(*1) |
config | Object | N | {} | overwrite color and icon(*2) |
Prop | Type | Required | Default | Description |
---|---|---|---|---|
title | String | Y | - | radio label |
Value | [String、Number、Object] | Y | - | radio value |
checked | Boolean | N | false | whether is been checked |
disabled | Boolean | N | false | whether is been disabled |
config | Object | N | {} | overwrite color and icon |
*1: list
const list=[ { title: 'option1', value: 1 }, { title: 'option2', value: 2, checked: true }, { title: 'checked and disabled', value: 5, disabled: true }, { title: 'option3', value: 3 }, { title: 'option4', value: 4 } ];
*2: config
// you can overwrite it like this: <wxc-radio :list="list" :config="config"></wxc-radio> const config={ checkedIcon:'https://gw.alicdn.com/tfs/TB1Y9vlpwMPMeJjy1XcXXXpppXa-72-72.png', disabledIcon:'https://gw.alicdn.com/tfs/TB1PtN3pwMPMeJjy1XdXXasrXXa-72-72.png', checkedColor: '#000000' }
// @wxcRadioListChecked="wxcRadioListChecked" will return e.value、e.title、e.oldIndex、e.index