更新记录

1.0.5（2024-09-14） 下载此版本

更新说明

1.0.4（2024-01-04） 下载此版本

修复单选没有高亮显示

1.0.3（2023-12-12） 下载此版本

修复绑定options值改变时，v-model值不再重新初始化

平台兼容性

next-data-select --当选项过多时，使用下拉菜单展示并选择内容

遇到问题或有建议可以加入QQ群(455948571)反馈
如果觉得组件不错，给五星鼓励鼓励咯！

注意

作者不介意你对组件源码进行改造使用，为了开源更加高效，谢谢你的配合；为了节省不必要的沟通浪费，以下情况请不要再反馈给作者，请自行解决；

在这感各位的理解，我支持开源，但是作者时间有限；谢谢各位的配合；在这里期望我写的小小插件能为你提供便捷；

1.如果你对源码进行了修改使用，请不需要对作者做任何的反馈，作者确实没有空陪你做技术分析解答；
2.如果你引入插件，连插件是否有正常被uniapp框架识别解析都不清楚，请你换个插件使用；
3.如果你引入插件，针对自己项目进行功能改造的，请自行仔细阅读源码并了解其原理，自行改造；这里作者不愿意浪费过多时间进行技术解答；
4.理论上作者不再解决由于本地开发环境问题所导致的插件使用问题，请自行到uniapp官网学习解决；

如果有使用问题请加群

注意：如果插件问题，请务必给一个完整的复现demo，谢谢配合； 点击链接加入群聊前端开发（uniapp插件）】

使用

从uniapp插件市场导入

vue3 + ts 使用

<template>
    <view style="padding:15px;">
        <view style="font-size: 14px;color: #999;padding: 8px;background-color: #f0f0f0;margin-bottom: 6px"><text>1、自定义显示格式</text></view>
        <next-data-select label="下拉框" @change="onchange" format="{text}-{value}-{lable}" :options="options" v-model="testModel" />
        <view style="font-size: 14px;color: #999;padding: 8px;background-color: #f0f0f0;margin-bottom: 6px"><text>2、使用：过滤模式</text></view>
        <next-data-select @change="onchange" :filterable="true" :options="options" v-model="testModel" />
        <view style="font-size: 14px;color: #999;padding: 8px;background-color: #f0f0f0;margin-bottom: 6px"><text>3、使用：过滤多选模式</text></view>
        <next-data-select @change="onchange" :filterable="true" :multiple="true" :options="options" v-model="testModel" />
        <view style="font-size: 14px;color: #999;padding: 8px;background-color: #f0f0f0;margin-bottom: 6px"><text>4、使用：过滤多选模式+收起显示模式</text></view>
        <next-data-select @change="onchange" :collapseTags="true" :filterable="true" :multiple="true" :options="options" v-model="testModel" />
        <view style="font-size: 14px;color: #999;padding: 8px;background-color: #f0f0f0;margin-bottom: 6px"><text>5、使用：过滤多选模式+收起显示模式配置控制</text></view>
        <next-data-select @change="onchange" :collapseTags="true" :collapseTagsNum="2" :filterable="true" :multiple="true" :options="options" v-model="testModel" />
    </view>
</template>
<script setup lang="ts">
import {ref, unref} from 'vue';
const testModel = ref();
const options = ref([
    {
        text: '测试1',
        value: 1,
        lable: '选项1'
    },
    {
        text: '测试2',
        value: 2,
        disabled: true,
        lable: '选项2'
    },
    {
        text: '测试3',
        value: 3,
        lable: '选项3'
    },
    {
        text: '测试4',
        value: 4,
        lable: '选项4'
    },
    {
        text: '测试5',
        value: 5,
        lable: '选项5'
    },
    {
        text: '测试6',
        value: 6,
        lable: '选项6'
    },
    {
        text: '测试7',
        value: 7,
        lable: '选项7'
    },
    {
        text: '测试8',
        value: 8,
        lable: '选项8'
    },
]);
function onchange() {
    console.log(1111111, unref(testModel))
}
</script>
<style lang="scss">
</style>

vue2 使用

<template>
    <view style="padding:15px;">
        <view style="font-size: 14px;color: #999;padding: 8px;background-color: #f0f0f0;margin-bottom: 6px"><text>1、自定义显示格式</text></view>
        <next-data-select label="下拉框" @change="onchange" format="{text}-{value}-{lable}" :options="options" v-model="testModel" />
        <view style="font-size: 14px;color: #999;padding: 8px;background-color: #f0f0f0;margin-bottom: 6px"><text>2、使用：过滤模式</text></view>
        <next-data-select @change="onchange" :filterable="true" :options="options" v-model="testModel" />
        <view style="font-size: 14px;color: #999;padding: 8px;background-color: #f0f0f0;margin-bottom: 6px"><text>3、使用：过滤多选模式</text></view>
        <next-data-select @change="onchange" :filterable="true" :multiple="true" :options="options" v-model="testModel" />
        <view style="font-size: 14px;color: #999;padding: 8px;background-color: #f0f0f0;margin-bottom: 6px"><text>4、使用：过滤多选模式+收起显示模式</text></view>
        <next-data-select @change="onchange" :collapseTags="true" :filterable="true" :multiple="true" :options="options" v-model="testModel" />
        <view style="font-size: 14px;color: #999;padding: 8px;background-color: #f0f0f0;margin-bottom: 6px"><text>5、使用：过滤多选模式+收起显示模式配置控制</text></view>
        <next-data-select @change="onchange" :collapseTags="true" :collapseTagsNum="2" :filterable="true" :multiple="true" :options="options" v-model="testModel" />
    </view>
</template>
<script setup lang="ts">
export default {
    data() {
        options: [
            {
                text: '测试1',
                value: 1,
                lable: '选项1'
            },
            {
                text: '测试2',
                value: 2,
                disabled: true,
                lable: '选项2'
            },
            {
                text: '测试3',
                value: 3,
                lable: '选项3'
            },
            {
                text: '测试4',
                value: 4,
                lable: '选项4'
            },
            {
                text: '测试5',
                value: 5,
                lable: '选项5'
            },
            {
                text: '测试6',
                value: 6,
                lable: '选项6'
            },
            {
                text: '测试7',
                value: 7,
                lable: '选项7'
            },
            {
                text: '测试8',
                value: 8,
                lable: '选项8'
            },
        ],
        testModel: ''
    },
    methods: {
        onchange() {
            console.log(1111111, this.testModel)
        }
    }
}
</script>

预览

功能预览

API

next-data-select Props