更新记录

1.0.32（2024-04-27）

添加是否显示省略号配置，添加选项自定义插槽option，具体看示例代码

1.0.31（2024-04-27）

优化微信小程序显示问题

1.0.30（2024-04-27）

优化代码

平台兼容性

lu-data-select

数据下拉选择组件

单选、多选，关键词过滤，清空，空数据插槽，标题过长显示省略号

数据列表较多时，选中再次打开，选中的数据项，自动滚动到可视区域

示例代码

<template>
    <view class="content">
        <view class="title">1.单选，过滤</view>
        <lu-data-select placeholder="请选择数据" :options="selectData" v-model="condition1" :multiple="false" :filterable="true" @change=""></lu-data-select>

        <view class="title">2.单选，过滤，change返回对象格式</view>
        <lu-data-select placeholder="请选择数据" :options="selectData" v-model="condition1" filterable changeType="objectValue" @change=""></lu-data-select>

        <view class="title">3.多选，过滤</view>
        <lu-data-select placeholder="请选择数据" :options="selectData" v-model="condition" :filterable="true" :multiple="true" @change=""></lu-data-select>

        <view class="title">4.多选，过滤，change返回对象格式</view>
        <lu-data-select
            disabled
            placeholder="请选择数据"
            :options="selectData"
            v-model="condition"
            :filterable="true"
            :multiple="true"
            changeType="objectValue"
            @change=""
        ></lu-data-select>

        <view class="title">5.自定义空数据插槽</view>
        <lu-data-select placeholder="请选择数据" :options="selectData1" v-model="condition" :multiple="true" :clearable="true" :filterable="true" @change="">
            <template #empty>
                <view style="text-align: center; padding: 20rpx; color: #f00">空数据插槽</view>
            </template>
        </lu-data-select>
        <view class="title">6.自动判断弹出方向，演示，无需配置</view>
        <lu-data-select placeholder="请选择数据" :options="selectData" v-model="condition" :multiple="true" :clearable="true" :filterable="true" @change="">
            <template #empty>
                <view style="text-align: center; padding: 20rpx; color: #f00">空数据插槽</view>
            </template>
        </lu-data-select>

        <view class="title">7.边框，css的border属性，单选模式选择框高度height，多选默认自动增高</view>
        <lu-data-select
            placeholder="请选择数据"
            :options="selectData"
            v-model="condition1"
            :multiple="false"
            :filterable="true"
            height="100rpx"
            border="1px solid #f00"
            @change=""
        ></lu-data-select>

        <view class="title">8.禁用选择</view>
        <lu-data-select placeholder="请选择数据" disabled :options="selectData" v-model="condition1"></lu-data-select>
    </view>
</template>

<script setup>
import { ref, watch } from 'vue';
const condition1 = ref('8');
const condition2 = ref('8');
const condition = ref(['7']); //多选必须是数组格式

const selectData1 = ref([]);
const selectData = ref([
    {
        value: '1',
        label: '测试标题测试标题测试标题测试标题测试标题测试标题测试标题1'
    },
    {
        value: '2',
        label: '数据2',
        disabled: true
    },
    {
        value: '3',
        label: '数据3',
        disabled: false
    },
    {
        value: '4',
        label: '数据4',
        disabled: true
    },
    {
        value: '5',
        label: '数据5'
    },
    {
        value: '6',
        label: '数据6'
    },
    {
        value: '7',
        label: '数据7'
    },
    {
        value: '8',
        label: '数据8'
    },
    {
        value: '9',
        label: '数据9'
    },
    {
        value: '10',
        label: '数据10'
    },
    {
        value: '11',
        label: '数据数据数据数据数据数据数据数据数据数据数据数据数据11'
    },
    {
        value: '12',
        label: '数据12'
    },
    {
        value: '13',
        label: '数据列表13'
    }
]);
const  = (e) => {
    console.log(e);
};
</script>
<style lang="scss" scoped>
.content {
    padding: 20px;

    .title {
        padding: 10px 0;
    }
}
</style>

参数

options 参数

事件

插槽