更新记录

v2.0.1（2020-06-12）

问题修复

• 修复evan-checkbox-group的max属性在不使用双向数据绑定时无效的问题

v2.0.0（2020-05-14）

break change

• 修改组件的位置，支持easycom模式

  问题修复

• 修复因为uniapp更新导致的Cannot read property 'includes' of null at at evan-checkbox-popup.vue问题
• 修复uni-icons更新导致的图标偏大的问题

  新特性

• 增加了全选功能
• 增加了反选功能
• 增加了清空功能
• evan-checkbox-popup增加objConfirm事件

v1.1.0（2020-03-03）

• 增加evan-checkbox-popup组件支持弹出框选择

平台兼容性

evan-checkbox

uniapp复选框组件，支持双向数据绑定，支持自定义icon
测试过微信小程序、app（包括nvue模式）、h5

1.基本用法

<template>
    <evan-checkbox v-model="checked">复选框</evan-checkbox>
    <evan-checkbox-group v-model="color">
        <evan-checkbox v-for="item in colorList" :key="item.value" :label="item.value">{{item.label}}</evan-checkbox>
    </evan-checkbox-group>
</template>
<script>
export default{
    data(){
        return{
            checked:true,
            color: null,
            colorList: [{
                    label: '红色',
                    value: 'red'
                },
                {
                    label: '绿色',
                    value: 'green'
                },
                {
                    label: '蓝色',
                    value: 'blue'
                },
                {
                    label: '粉色',
                    value: 'pink'
                },
                {
                    label: '黑色',
                    value: 'black'
                }
            ]
        }
    }
}
</script>

2.更多用法

参考github demo中的用法

3.注意点

1.nvue模式下checkbox的文本需要包裹在text组件中

<evan-checkbox v-model="checked">复选框</evan-checkbox>
<evan-checkbox v-model="checked"><text class="your-class">复选框</text></evan-checkbox>

2.通过slot方式自定义图标时两种状态如果是某个图标的显示与隐藏，在外层套一个view，不然在h5下有问题

<evan-checkbox v-model="checked">
    完全自定义图标
    <template slot="icon">
        <image v-if="checked" style="width: 20px;height: 20px;display: block;" src="/static/logo.png"></image>
        <image v-else style="width: 30px;height: 30px;display: block;" src="/static/logo.png"></image>
    </template>
</evan-checkbox>

<evan-checkbox v-model="checked">
    完全自定义图标
    <template slot="icon">
        <view>
            <uni-icons v-if="checked" type="checkmarkempty" size="30" color="#108ee9"></uni-icons>
        </view>
    </template>
</evan-checkbox>

3.demo项目需要安装依赖，记得先npm install，因为加入了与EvanForm组件配合使用的例子

4.如果层级出现问题去调一下uniPopup组件的层级试试（uniPopup组件推荐将popup写在其他元素后面，但是目前是在组件中的，因此如果嵌套比较深可能无法弹出）

evan-checkbox props

evan-checkbox events

evan-checkbox methods

evan-checkbox slot

evan-checkbox-group props

evan-checkbox-group events

evan-checkbox-group methods

evan-checkbox-popup props

evan-checkbox-popup slot

evan-checkbox-popup events

evan-checkbox-popup methods