更新记录

1.1.2（2021-12-13） 下载此版本

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

1.1.1（2021-12-13） 下载此版本

v-model 支持数字类型

1.1.0（2021-12-11） 下载此版本

新增云加载支持

平台兼容性

选择框

组件演示

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

引入方法

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

Props

事件请查看示例代码

示例代码

<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>