uniapp封装picker选择器组件,支持关键字查询

CommonPicker.vue组件

路径在 components\CommonPicker.vue

javascript 复制代码
<template>
    <view>
        <uni-easyinput v-model="searchQuery" :placeholder="placeholder" />
        <picker :range="filteredOptions" :range-key="'text'" v-model="selectedIndex" @change="onPickerChange">
            <view class="picker">{{ `当前选择: ${selectedText}` }}</view>
        </picker>
    </view>
</template>

<script>
export default {
    props: {
        value: { // v-model 的值 
            type: [String, Number],
            default: ''
        },
        options: { // 数据来源 格式为 [{value: '1', text: '选项1'}, {value: '2', text: '选项2'}]
            type: Array,
            required: true
        },
        placeholder: {
            type: String,
            default: '筛选'
        }
    },
    data() {
        return {
            selectedIndex: 0,
            selectedText: '',
            searchQuery: ''
        };
    },
    computed: {
        filteredOptions() {
            if (!this.searchQuery) {
                return this.options;
            }
            return this.options.filter(option => option.text.includes(this.searchQuery));
        }
    },
    watch: {
        value(val) {
            const index = this.filteredOptions.findIndex(option => option.value === val);
            if (index !== -1) {
                this.selectedIndex = index;
                this.selectedText = this.filteredOptions[index].text;
            }
        },
        options: {
            immediate: true,
            handler() {
                const index = this.filteredOptions.findIndex(option => option.value === this.value);
                if (index !== -1) {
                    this.selectedIndex = index;
                    this.selectedText = this.filteredOptions[index].text;
                }
            }
        },
        searchQuery() {
            this.updateSelectedText();
        }
    },
    methods: {
        onPickerChange(e) {
            const index = e.detail.value;
            const selectedOption = this.filteredOptions[index];
            this.selectedIndex = index;
            this.selectedText = selectedOption.text;
            this.$emit('input', selectedOption.value); // 触发 v-model 绑定的更新
        },
        updateSelectedText() {
            const index = this.filteredOptions.findIndex(option => option.value === this.value);
            if (index !== -1) {
                this.selectedIndex = index;
                this.selectedText = this.filteredOptions[index].text;
            } else {
                this.selectedText = '';
                this.selectedIndex = 0;
            }
        }
    },
    mounted() {
        this.updateSelectedText();
    }
};
</script>

<style lang="scss" scoped>
.picker {
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    text-align: left;
    margin-top: 10px;
}
</style>

在main.js中全局注册

javascript 复制代码
import CommonPicker from '@/components/CommonPicker.vue';
Vue.component('CommonPicker', CommonPicker)

使用

javascript 复制代码
<template>
    <uni-card>
        <CommonPicker v-model="id" :options="options" :placeholder="`筛选`" />
    </uni-card>
</template>

<script>
export default {
    data() {
        return {
            options: [{
                text: '小明',
                value: "1"
            }, {
                text: '小红',
                value: "2"
            }, {
                text: '小王',
                value: "3"
            }],
            id: undefined,
        }
    }
}
</script>

相关推荐
2501_9160074714 分钟前
iOS 混淆与团队协作,研发、安全、运维、测试如何在加固流程中高效配合(iOS 混淆、ipa 加固、协作治理)
android·ios·小程序·https·uni-app·iphone·webview
前端橙一陈26 分钟前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
~无忧花开~30 分钟前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
泰迪智能科技0142 分钟前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts
CodeCraft Studio1 小时前
借助Aspose.Email,使用 Python 读取 Outlook MSG 文件
前端·python·outlook·aspose·email·msg·python读取msg文件
家里有只小肥猫3 小时前
react 初体验2
前端·react.js·前端框架
慧慧吖@3 小时前
前端发送请求时,参数的传递格式
前端
L李什么李3 小时前
HTML——使用表格制作简历
前端·javascript·html
未来之窗软件服务3 小时前
万象EXCEL开发(八)excel公式解析与依赖映射 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
linuxxx1103 小时前
ajax() 回调函数参数详解
前端·ajax·okhttp