更新记录

1.1.2(2021-12-13)

v-model 改为仅支持字符串类型,新增组件演示

1.1.1(2021-12-13)

v-model 支持数字类型

查看更多

平台兼容性

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

选择框

组件演示

本组件主要用于PC端页面,符合 datacom 规范,支持本地数据和云加载数据显示。
选项弹框:目前只能通过点击 选项或页面内的选框 关闭,弹出方向目前只能向下,暂不支持根据页面位置自动判断弹出方向。

引入方法

点击本页面右上角按钮(使用 HBuilderX 导入插件 )安装之后,可直接在代码里使用

Props

属性名称 数据类型 默认值 说明
placeholder string 请选择 提示文字
value string '' 选中值,支持 v-model
width number 200 宽度,单位px
localdata Array [] 选项列表
useCloudData Boolean false 是否启用云加载
handleCloudData Function 处理云请求返回的数据,如果返回的数据不符合要求,可以使用此函数处理,你可以把它理解为生命周期函数或拦截器,它在数据加载之后,渲染之前执行

事件请查看示例代码

示例代码

<template>
    <view>
        <view class="component">
            <view class="component-content">
                <uni-row :gutter="30">
                    <uni-col :span="6">
                        <text>基本</text>
                    </uni-col>
                    <uni-col :span="18">
                        <zg-data-select
                            v-model="selectValue1" 
                            :localdata="selectList" 
                        ></zg-data-select>
                    </uni-col>
                    <uni-col :span="6">
                        设置提示
                    </uni-col>
                    <uni-col :span="18">
                        <zg-data-select
                            v-model="selectValue2" 
                            :localdata="selectList" 
                            placeholder="请点击此处选择选项"
                        ></zg-data-select>
                    </uni-col>
                    <uni-col :span="6">
                        禁用
                    </uni-col>
                    <uni-col :span="18">
                        <zg-data-select
                            v-model="selectValue3" 
                            :localdata="selectList" 
                            disabled
                        ></zg-data-select>
                    </uni-col>
                    <uni-col :span="6">
                        默认值
                    </uni-col>
                    <uni-col :span="18">
                        <zg-data-select
                            v-model="selectValue4" 
                            :localdata="selectList" 
                        ></zg-data-select>
                    </uni-col>
                </uni-row>
            </view>
        </view>
        <view class="component">
            <view class="component-title">
                <text>本地数据</text>
                <text>云数据</text>
            </view>
            <view class="component-content">
                <uni-row :gutter="30">
                    <uni-col :span="12">
                        <zg-data-select
                            v-model="selectValue5" 
                            :localdata="selectList" 
                            @on-select="onChange5"
                        ></zg-data-select>
                    </uni-col>
                    <uni-col :span="12">
                        <zg-data-select
                            v-model="selectValue6" 
                            useCloudData
                            collection="logs"
                            field="type"
                            distinct
                            :handleCloudData="handleCloudData"
                            placeholder="点击选择选项"
                            @on-select="onChange6"
                        ></zg-data-select>
                    </uni-col>
                </uni-row>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                selectValue1: '',
                selectValue2: '',
                selectValue3: '',
                selectValue4: '2',
                selectValue5: '',
                selectValue6: '课程激活',
                selectList: [
                    {
                        value: '1',
                        text: '选项一',
                        selected: false,
                        disable: false,
                    },
                    {
                        value: '2',
                        text: '选项二',
                        selected: false,
                        disable: false,
                    },
                    {
                        value: '3',
                        text: '选项三',
                        selected: false,
                        disable: true,
                    },
                ]
            }
        },
        methods: {
            /**
             * 选择之后
             * @param {Object} e
             * @param {Number} e.index 选项索引
             * @param {Object} e.item 选项数据
             * @param {String} e.item.value 选项值
             * @param {String} e.item.text 选项文本
             * @param {Boolean} e.item.selected 是否选中此选项
             * @param {Boolean} e.item.disable 是否禁用此选项
             */
            onChange5(e) {
                console.log('选中项的数据',e);
                console.log('选中值的值',this.selectValue5);
            },
            onChange6(e) {
                console.log('选中项的数据',e);
                console.log('选中值的值',this.selectValue6);
            },
            /**
             * 处理返回的数据
             * @param {Array} cloud_data 云数据
             * @return {Array} 注意:一定要返回数据项,必须包含以下属性:value,text,selected,disable
             */
            handleCloudData(cloud_data) {
                // 此处你可以自由写处理逻辑,但是一定记得要返回处理的数据
                const list = cloud_data.map(i => {
                    i.value = i.type
                    i.text = i.type
                    i.selected = false
                    i.disable = false
                    return i
                })
                console.log(list);
                return list
            }
        }
    }
</script>

<style scoped>
    .component {
        margin: 60rpx 0;
        padding: 0 30rpx;
    }
    .component-title {
        padding-bottom: 30rpx;
        display: flex;
        justify-content: space-between;
    }
    .component-content {

    }
</style>

隐私、权限声明

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

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

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

许可协议

MIT协议

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