更新记录

1.0.6(2022-08-17)

评论区修复微信小程序端报错

1.0.5(2022-08-15)

应评论区需要,增加分页功能支持

查看更多

平台兼容性

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

插件使用方法:

<select-lay :value="tval" name="name" :options="datalist" @selectitem="selectitem"></select-lay>

配置参数:

属性名 类型 默认值 说明
showClearIcon Boolean false 是否显示全部清空按钮
showValueClear Boolean true 是否显示单个删除
zindex Number "" 层级,默认999,防止多个组件一起使用时下拉栏穿透
slabel String label 自定义列表中键值对关系,参考示例
svalue String value 自定义列表中键值对关系,该值对应value,参考示例
placeholder String 请选择 无选项时展示的文字
showplaceholder Boolean true 下拉时是否展示请选择按钮
options Array 数据列表
disabled Boolean false 是否禁用
value Array 选中值及回显
isPaging Boolean false 是否开启分页默认不需要

事件:

事件名 说明 返回值
@change 点击项目或者删除触发的事件 返回全量选中项及只有value的选中项
@scrolltolower 分页触底事件 发送你的请求获取分页数据

说明:

此插件依赖scss,请务必安装!!!

示例:

    <template>
        <view class="content">
            <form @submit="formSubmit">
                <view class="item">写法:</view>
                <select-cy :value="tval" placeholder="请选择项目" :options="datalist" @change="change"></select-cy>
                <select-cy :value="tval" placeholder="请选择项目1" :options="datalist" @change="change"></select-cy>
                <button type="submit" @click="formSubmit">提交</button>
            </form>
        </view>
    </template>

    <script>
    export default {
        data() {
            return {
                //模拟数据列表
                datalist: [],
                //模拟初始数据
                tval: []
            };
        },
        onReady() {
            this.datalist = [
                {
                    label: 'label1',
                    value: 'value1'
                },
                {
                    label: 'label2',
                    value: 'value2'
                },
                {
                    label: 'label3',
                    value: 'value3'
                },
                {
                    label: 'label4',
                    value: 'value4'
                },
                {
                    label: 'label5',
                    value: 'value5'
                },
                {
                    label: 'label6',
                    value: 'value6'
                },
                {
                    label: 'label7',
                    value: 'value7'
                },
                {
                    label: 'label8',
                    value: 'value8'
                },
                {
                    label: 'label9',
                    value: 'value9'
                }
            ];
        },
        methods: {
            formSubmit(e) {
                console.log(this.tval,'提交参数');
            },
            change(item,value) {
                console.log(item,value);
                this.tval = value;
            }
        }
    };
    </script>

    <style lang="scss">
    .content {
        width: 300px;
        padding: 20px 0;
        margin: 0 auto;

        .item {
            margin-bottom: 10px;
        }

        .btn {
            margin-top: 20px;
        }
    }
    </style>

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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