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>

相关推荐
魔云连洲8 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
00后程序员张10 分钟前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
专注VB编程开发20年12 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒18 分钟前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku25 分钟前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing29 分钟前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_4569042730 分钟前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说34 分钟前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日4567038 分钟前
学习日记-HTML-day51-9.9
前端·学习·html
狗头大军之江苏分军1 小时前
iPhone 17 vs iPhone 17 Pro:到底差在哪?买前别被忽悠了
前端