wxc-radio

Weex 单选组组件

Demo

wxc-radio 单选 - 图1 wxc-radio 单选 - 图2

使用方法

  1. <template>
    2.   <div class="wxc-demo">
    3.     <scroller class="scroller">
    4.       <wxc-radio :list="list" @wxcRadioListChecked="wxcRadioListChecked"></wxc-radio>
    5.       <text class="radio-text">checkedItem: {{checkedInfo}}</text>
    6.       <category title="Radio不可选"></category>
    7.       <wxc-radio :list="list2"></wxc-radio>
    8.     </scroller>
    9.   </div>
    10. </template>
    11.   12. <script>
    13.   import { WxcRadio } from 'weex-ui'
    14.   export default {
    15.     components: { WxcRadio },
    16.     data: () => ({
    17.       list: [
    18.         { title: '选项1', value: 1 },
    19.         { title: '选项2', value: 2, checked: true },
    20.         { title: '选项3', value: 3 },
    21.         { title: '选项4', value: 4 },
    22.       ],
    23.       list2: [
    24.         { title: '未选不可修改', value: 5, disabled: true },
    25.         { title: '已选不可修改', value: 6, disabled: true, checked: true },
    26.       ],
    27.       checkedInfo: { title: '选项2', value: 2 }
    28.     }),
    29.     methods: {
    30.       wxcRadioListChecked (e) {
    31.         this.checkedInfo = e;
    32.       }
    33.     }
    34.   }
    35. </script>Click to copy

更详细代码可以参考 demo

可配置参数

Prop Type Required Default Description
list Array Y [] Radio 列表配置(注1)
config Object N {} 覆盖颜色和 icon(注2)
#### 子item详细说明
Prop Type Required Default Description
--- --- --- --- ---
title String Y - Radio 显示 label
Value [String、Number、Object] Y - Radio 的 value
checked Boolean N false Radio 是否选中
disabled Boolean N false Radio 是否不可选
config Object N {} 覆盖颜色和 icon
注1: list
1. const list=[
2. { title: '选项1', value: 1 },
3. { title: '选项2', value: 2, checked: true },
4. { title: '未选不可修改', value: 5, disabled: true },
5. { title: '选项3', value: 3 },
6. { title: '选项4', value: 4 }
7. ];Click to copy

注2: config 1. 2. // 你可以这样来覆盖原有的样式和icon设置 3. 4. 5. const config={ 6. checkedIcon:'https://gw.alicdn.com/tfs/TB1Y9vlpwMPMeJjy1XcXXXpppXa-72-72.png', 7. disabledIcon:'https://gw.alicdn.com/tfs/TB1PtN3pwMPMeJjy1XdXXasrXXa-72-72.png', 8. checkedColor: '#000000' 9. }Click to copy

事件回调

  1. //点击事件回调 `@wxcRadioListChecked="wxcRadioListChecked"`
    2. 将会返回 e.value、e.title、e.oldIndex、e.indexClick to copy

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-radio/