wxc-checkbox

wxc-checkbox

Weex 复选框组件

规则

建议以成组的方式出现，使用wxc-checkbox-list

Demo

使用方法

  1. <template>
    2.   <div class="wxc-demo">
    3.     <scroller class="scroller">
    4.       <wxc-checkbox title="默认"></wxc-checkbox>
    5.       <wxc-checkbox title="默认选中"
    6.                     :checked="true"></wxc-checkbox>
    7.       <wxc-checkbox title="未选中不可更改"
    8.                     :disabled="true"></wxc-checkbox>
    9.       <wxc-checkbox title="选中不可更改"
    10.                     :disabled="true"
    11.                     :checked="true"></wxc-checkbox>
    12.       <div class="margin">
    13.         <wxc-checkbox-list :list="list"
    14.                            @wxcCheckBoxListChecked="wxcCheckBoxListChecked"></wxc-checkbox-list>
    15.         <text class="checked-text">选中项 {{checkedList.toString()}}</text>
    16.       </div>
    17.     </scroller>
    18.   </div>
    19. </template>
    20.   21. <script>
    22.   import { WxcCheckbox,WxcCheckboxList } from 'weex-ui'
    23.   export default {
    24.     components: { WxcCheckbox, WxcCheckboxList },
    25.     data: () => ({
    26.       list: [
    27.         { title: '选项1', value: 1 },
    28.         { title: '选项2', value: 2, checked: true },
    29.         { title: '选项3', value: 3 },
    30.         { title: '选项4', value: 4 }
    31.       ],
    32.       checkedList: [2]
    33.     }),
    34.     methods: {
    35.       wxcCheckBoxListChecked (e) {
    36.         this.checkedList = e.checkedList;
    37.       }
    38.     }
    39.   }
    40. </script>Click to copy

更多详细情况可以参考 demo

可配置参数

Checkbox

Prop	Type	Required	Default	Description
title	`String`	`Y`	`-`	checkbox显示label
Value	`[String、Number、Object]`	`Y`	`-`	checkbox的value
checked	`Boolean`	`N`	`false`	checkbox是否选中
disabled	`Boolean`	`N`	`false`	checkbox是否不可选
config	`Object`	`N`	`{}`	覆盖颜色和 icon
has-top-border	`Boolean`	`N`	`false`	是否显示上边
has-bottom-border	`Boolean`	`N`	`true`	是否显示下边
* 事件回调
//点击事件回调 `@wxcCheckBoxItemChecked="wxcCheckBoxItemChecked"`
将会返回e.value、e.checkedClick to copy

CheckboxList

Prop	Type	Required	Default	Description
list	`Array`	`Y`	`[]`	checkbox列表配置 (*1)
config	`Object`	`N`	`{}`	覆盖颜色和 icon (*2)
* 注1: list

const list=[
{ title: '选项1', value: 1 },
{ title: '选项2', value: 2, checked: true },
{ title: '选项3', value: 3 },
{ title: '选项4', value: 4 }
];Click to copy * 注2: config

  1. // 你可以这样覆盖样式和 icon:
    2. <wxc-checkbox-list :list="list"
    3.                    :config="config"
    4.                    @wxcCheckBoxListChecked="wxcCheckBoxListChecked"></wxc-checkbox-list>
    5.   6. const config={
    7.     checkedIcon:'https://gw.alicdn.com/tfs/TB1Y9vlpwMPMeJjy1XcXXXpppXa-72-72.png',
    8.     disabledIcon:'https://gw.alicdn.com/tfs/TB1PtN3pwMPMeJjy1XdXXasrXXa-72-72.png',
    9.     checkedDisabledIcon:'https://gw.alicdn.com/tfs/TB1aPabpwMPMeJjy1XcXXXpppXa-72-72.png',
    10.     unCheckedDisabledIcon:'https://gw.alicdn.com/tfs/TB1lTuzpwoQMeJjy0FoXXcShVXa-72-72.png',
    11.     checkedColor: '#000000'
    12. }Click to copy

事件回调
//点击事件回调 @wxcCheckBoxListChecked="wxcCheckBoxListChecked"
将会返回已经选中的e.checkedListClick to copy

Please feel free to use and contribute to the development.

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

wxc-checkbox 多选