更新记录

1.1.0(2024-01-30)

路径更改

1.0.0(2024-01-30)

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


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

jt-checkbox

使用说明


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

参数配置

名称 描述 类型 默认值
isShow 弹框显示、隐藏 Boolean
list 要展示的数据 Array
defaultSelect 要回显的数据 Array
isCheckbox 是否开启多选 Boolean false
label 数据 key String
value 数据 value String
close 关闭弹框事件 Function
selectchange 选择之后点击确定事件,返回选中内容 Function

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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问