关于uni-combox的基础用法在此处不赘述,下面是官网上给出的示例:
选中之后必须手动清空了输入框内容才可以再次选择其他选项,非常不方便
去插件市场看了下有基于uniui实现的,突发奇想,我们也可以自己改呀~
查看uni-combox的组件,修改原代码。
实现效果如下:
如果对下拉选择功能要求不是很多的,可以采用以下代码(复制直接替换掉uni-combox.vue的代码):
<template>
<view class="uni-combox">
<view v-if="label" class="uni-combox__label" :style="labelStyle">
<text>{
{
label}}</text>
</view>
<view class="uni-combox__input-box">
<input class="uni-combox__input" type="text" :placeholder="placeholder" v-model="inputVal" @input="onInput" @focus="onFocus" @blur="onBlur" />
<uni-icons class="uni-combox__input-arrow" :type="showSelector ? 'arrowup' : 'arrowdown'" size="14" @click="toggleSelector"></uni-icons>
<view class="uni-combox__selector" v-if="showSelector">
<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0"