Checkbox
<template> <div class="wxc-demo"> <scroller class="scroller"> <wxc-checkbox title="default"></wxc-checkbox> <wxc-checkbox title="default checked" :checked="true"></wxc-checkbox> <wxc-checkbox title="unchecked and disabled" :disabled="true"></wxc-checkbox> <wxc-checkbox title="checked and disabled" :disabled="true" :checked="true"></wxc-checkbox> <div class="margin"> <wxc-checkbox-list :list="list" @wxcCheckBoxListChecked="wxcCheckBoxListChecked"></wxc-checkbox-list> <text class="checked-text">checked list {{checkedList.toString()}}</text> </div> </scroller> </div> </template> <script> import { WxcCheckbox,WxcCheckboxList } from 'weex-ui' export default { components: { WxcCheckbox, WxcCheckboxList }, data: () => ({ list: [ { title: 'option1', value: 1 }, { title: 'option2', value: 2, checked: true }, { title: 'option3', value: 3 }, { title: 'option4', value: 4 } ], checkedList: [2] }), methods: { wxcCheckBoxListChecked (e) { this.checkedList = e.checkedList; } } } </script>
More details can be found in here
Prop | Type | Required | Default | Description |
---|---|---|---|---|
title | String | Y | - | label |
Value | [String、Number、Object] | Y | - | original value |
checked | Boolean | N | false | whether is checked |
disabled | Boolean | N | false | whether is been disabled |
config | Object | N | {} | overwrite color and icon |
has-top-border | Boolean | N | false | whether show top-border |
has-bottom-border | Boolean | N | true | whether show bottom-border |
// @wxcCheckBoxItemChecked="wxcCheckBoxItemChecked" will return e.value、e.checked
Prop | Type | Required | Default | Description |
---|---|---|---|---|
list | Array | Y | [] | config list(*1) |
config | Object | N | {} | overwrite color and icon(*1) |
list
const list=[ { title: 'option1', value: 1 }, { title: 'option2', value: 2, checked: true }, { title: 'option3', value: 3 }, { title: 'option4', value: 4 } ];
config
// you can overwrite it like this: <wxc-checkbox-list :list="list" :config="config" @wxcCheckBoxListChecked="wxcCheckBoxListChecked"></wxc-checkbox-list> const config={ checkedIcon:'https://gw.alicdn.com/tfs/TB1Y9vlpwMPMeJjy1XcXXXpppXa-72-72.png', disabledIcon:'https://gw.alicdn.com/tfs/TB1PtN3pwMPMeJjy1XdXXasrXXa-72-72.png', checkedDisabledIcon:'https://gw.alicdn.com/tfs/TB1aPabpwMPMeJjy1XcXXXpppXa-72-72.png', unCheckedDisabledIcon:'https://gw.alicdn.com/tfs/TB1lTuzpwoQMeJjy0FoXXcShVXa-72-72.png', checkedColor: '#000000' }
//@wxcCheckBoxListChecked="wxcCheckBoxListChecked" will return e.checkedList