更新记录

1.1.0（2024-01-30） 下载此版本

路径更改

1.0.0（2024-01-30） 下载此版本

底部弹出多选、单选框，支持选择项禁用、回显

平台兼容性

jt-checkbox

使用说明

底部弹出多选、单选框，支持选择项禁用、回显

参数配置

list数据初始化格式

disable 为true，不可以选择

list: [
                    {
                        id: 0,
                        name: '苹果',
                        checked: false,
                        disable: false
                    },
                    {
                        id: 1,
                        name: '草莓',
                        checked: false,
                        disable: false
                    },
                ],

页面使用

<template>
    <view class="content">
        <view style="margin: 20px;height: 1200px;">
            <view @tap="openCheckbox">请选择的水果：</view>
            <view v-for="(item, i) in selectVal" :key="i">
                {{ item.label }}
            </view>
        </view>
        <jt-checkbox 
        :isShow="isShow" 
        :list="list" 
        :defaultSelect="selectVal" 
        :isCheckbox="true"
        label="name" 
        value="id" 
        @close="close"
        @change="selectchange"></jt-checkbox>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [
                    {
                        id: 0,
                        name: '苹果',
                        checked: false,
                        disable: false
                    },
                    {
                        id: 1,
                        name: '草莓',
                        checked: false,
                        disable: false
                    },
                    {
                        id: 2,
                        name: '香蕉',
                        checked: false,
                        disable: true
                    },
                    {
                        id: 3,
                        name: '哈密瓜',
                        checked: false,
                        disable: false
                    },
                    {
                        id: 4,
                        name: '柚子',
                        checked: false,
                        disable: false
                    },
                    {
                        id: 5,
                        name: '橙子',
                        checked: false,
                        disable: false
                    }
                ],
                selectVal: [],
                isShow: false
            }
        },
        onLoad() {

        },
        methods: {
            openCheckbox() {
                this.isShow = true
            },
            selectchange(data) {
                if (data.length > 0) {
                    this.selectVal = data
                }
                this.isShow = false
            },
            close() {
                this.isShow = false
            }
        }
    }
</script>