更新记录

1.2.3（2021-08-19） 下载此版本

添加重置选项方法

1.2.2（2021-08-17） 下载此版本

添加隐藏按钮属性

1.2.1（2021-08-17） 下载此版本

优化代码，添加小程序兼容，完善说明文档

平台兼容性

ListCheckBox

效果图

使用说明

方法

如要自定义全选功能，获取全选的数据可使用$refs操作 调用selectAllData方法 上述select方法将会返回选中数据

selectAll(){
    this.$refs.listcheckbox.selectAllData()
}

data数据说明：

data数据格式为：

[
    {
        name:'张三',
        value:1,
        selected:true,
        disabled:true,
    },
    {
        name:'里斯',
        value:2
    },
]

其中selected默认为false,disabled默认为false,可设置。 其余数据可自定义设置

自定义内容

微信小程序不支持按钮自定义

 <template v-slot:checkSlot="item">
    <view class="test">
        <text>{{item.data.name}}</text>
        <text>{{item.data.value}}</text>
    </view>
 </template>

按钮自定义

//点击按钮自定义
<template v-slot:customBtn>
    <image style="width: 30rpx;height: 30rpx;" src="../../static/select.png" mode=""></image>
</template>
//禁用按钮自定义
<template v-slot:customDisabledBtn>
    <image style="width: 30rpx;height: 30rpx;" src="../../static/disabledSel.png" mode=""></image>
</template>

使用方法(例子)

<template>
    <view class="content">
        <ListCheckBox :disabledAll="true" :data="data" @select="selectData">
            <template v-slot:checkSlot="item">
                <view class="test">
                    <text>{{item.data.name}}</text>
                    <text>{{item.data.value}}</text>
                </view>
            </template>
            <template v-slot:customBtn>
                <image style="width: 30rpx;height: 30rpx;" src="../../static/select.png" mode=""></image>
            </template>
            <template v-slot:customDisabledBtn>
                <image style="width: 30rpx;height: 30rpx;" src="../../static/disabledSel.png" mode=""></image>
            </template>
        </ListCheckBox>
    </view>
</template>

<script>
    import ListCheckBox from '@/components/peng-ListCheckBox/ListCheckBox.vue'
    export default {
        data() {
            return {
                data: [{
                        name: '名称一',
                        value: '可自定义内容',
                        selected: true
                    },
                    {
                        name: '名称二',
                        value: 2,
                        disabled: true,
                        selected: true
                    },
                    {
                        name: '名称三',
                        value: 3,
                        disabled: true,
                    },
                    {
                        name: '名称四',
                        value: 4
                    }
                ]
            }
        },
        components: {
            ListCheckBox
        },
        onLoad() {

        },
        methods: {
            selectData(data) {
                console.log(data)
            }
        }
    }
</script>

<style>
    .content {
        padding: 40rpx;

    }

    .test {
        display: flex;
        flex-direction: column;
    }
</style>

type为custom时，自定义选择效果：

选中自定义按钮

//添加插槽名为customBtn
<template v-slot:customBtn>
    <image style="width: 15px;height: 15px;" src="../../static/select.png" mode=""></image>
</template>

禁止选中自定义按钮

//添加插槽名为customBtn
<template v-slot:customDisabledBtn>
    <image style="width: 15px;height: 15px;" src="../../static/disabledSel.png" mode=""><image>
</template>

github

https://github.com/GPBOB/ListCheckBox/tree/vue2.0