wxc-checkbox

Weex 复选框组件

规则

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

Demo

wxc-checkbox 多选 - 图1 wxc-checkbox 多选 - 图2

使用方法

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

更多详细情况可以参考 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=&#34;wxcCheckBoxItemChecked&#34;
    将会返回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>
  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. }
  • 事件回调
    //点击事件回调 @wxcCheckBoxListChecked=&#34;wxcCheckBoxListChecked&#34;
    将会返回已经选中的e.checkedListClick to copy

Please feel free to use and contribute to the development.

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