Checkbox复选框

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.    "vtu-checkbox": "/miniprogram_npm/vtuweapp/checkbox/checkbox/vtu-checkbox",
    3.    "vtu-checkbox-prop": "/miniprogram_npm/vtuweapp/prop/checkbox/prop/vtu-checkbox-prop",
    4.    "vtu-checkbox-prop-item": "/miniprogram_npm/vtuweapp/prop/checkbox/item/vtu-checkbox-prop-item"
    5. }
    6.

    代码演示

    基础用法

    1. <vtu-checkbox-group model="{{value1}}" bind:change="change">
    2.   <vtu-checkbox value="1" label="北京"></vtu-checkbox>
    3.   <vtu-checkbox value="2" label="上海"></vtu-checkbox>
    4.   <vtu-checkbox value="3" label="深圳"></vtu-checkbox>
    5.   <vtu-checkbox value="4" label="南京"></vtu-checkbox>
    6. </vtu-checkbox-group>
    8. Page({
    9.   data: {
    10.     value1: ['2', '4']
    11.   },
    13.   change: function(e) {
    14.     this.setData({
    15.       value1: e.detail.value
    16.     })
    17.   }
    18. });
    19.  
    20.

    自定义

    1. <vtu-checkbox-group model="{{value1}}" align="right" active-color="red" checkbox-icon="iconfont icon-fangxingweixuanzhong" active-checkbox-icon="iconfont icon-fangxingxuanzhongfill" bind:change="change">
    2.   <vtu-checkbox value="1" label="北京"></vtu-checkbox>
    3.   <vtu-checkbox value="2" label="上海" disabled></vtu-checkbox>
    4.   <vtu-checkbox value="3" label="深圳"></vtu-checkbox>
    5.   <vtu-checkbox value="4" label="南京"></vtu-checkbox>
    6. </vtu-checkbox-group>
    7.

    自定义图标

    1. <vtu-checkbox-group model="{{value1}}" max="{{3}}" align="right" checkbox-icon="" active-color="orange" active-checkbox-icon="iconfont icon-duihao" active-checkbox-color="blue" bind:change="change">
    2.   <vtu-checkbox value="1" label="北京" icon="iconfont icon-biaoxing" ></vtu-checkbox>
    3.   <vtu-checkbox value="2" label="上海" icon="iconfont icon-xihuan" ></vtu-checkbox>
    4.   <vtu-checkbox value="3" label="深圳" icon="iconfont icon-sousuo"></vtu-checkbox>
    5.   <vtu-checkbox value="4" label="南京" icon="iconfont icon-shangchuan"></vtu-checkbox>
    6. </vtu-checkbox-group>
    7.

    弹出复选框

    1. <vtu-btn type="primary" bind:click="openCheckboxProp">弹出复选框</vtu-btn>
    2. <vtu-checkbox-prop show="{{showProp}}" model="{{value1}}" max="{{3}}" align="right" checkbox-icon="" active-color="orange" active-checkbox-icon="iconfont icon-duihao" active-checkbox-color="blue" bind:change="change">
    3.   <vtu-checkbox-prop-item value="1" label="北京" icon="iconfont icon-biaoxing" ></vtu-checkbox-prop-item>
    4.   <vtu-checkbox-prop-item value="2" label="上海" icon="iconfont icon-xihuan" ></vtu-checkbox-prop-item>
    5.   <vtu-checkbox-prop-item value="3" label="深圳" icon="iconfont icon-sousuo"></vtu-checkbox-prop-item>
    6.   <vtu-checkbox-prop-item value="4" label="南京" icon="iconfont icon-shangchuan"></vtu-checkbox-prop-item>
    7. </vtu-checkbox-prop>
    9. Page({
    10.   data: {
    11.     value1: ['2', '4'],
    12.     showProp: false
    13.   },
    15.   change: function(e) {
    16.     this.setData({
    17.       value1: e.detail.value
    18.     })
    19.   },
    21.   openCheckboxProp: function(){
    22.     this.setData({
    23.       showProp: true
    24.     })
    25.   }
    26. });
    27.  
    28.

    组件参数

    Checkbox 复选 - 图1