当前位置: 首页 > news >正文

vue3 + ant-design-vue4实现Select既可以当输入框也可以实现下拉选择

近日工作中,遇到一个需求,就是select的有一个前置切换条件,有些条件需要时输入,有些条件需要时下拉选择,但是在切换的时候,后面的这个输入或者选择组件不能闪烁,于是也就只能采用select去实现,而不能用select和input通过v-if切换,或者v-show动画实现。

先看下效果

效果一:前置切换为可输入类型,可接受输入

效果二:前置条件切换为下拉选择状态,可接受下拉选择

效果三、可动态新增和删除

效果四、数据回显

下面我们讲一下这个功能的实现过程。

一、组件配置

首先我们根据官方ant-design-vue 4的select组件,我们看到有一个searchValue,value这两个属性配置,在我们开启showSearch属性后,searchValue就是我们获取输入内容的配置项,value(v-model)则是我们通过控制select下拉框选择option后的值。这个是核心配置。

value(v-model)是双向绑定的,你可以不考虑其获取值的问题,以及数据回填时展示的问题。官方文档虽然没说searchValue是双向绑定,其实在开启showSearch时,你可以利用onSearch事件给绑定的变量赋值。这时事件回调中你可以拿到输入的值。

接着就是通过open属性去控制这个下拉框的展示。

说到这里那么我们利用几个核心的属性就可以控制基本的需求了。

1. 为select模式时可实现根据输入筛选

当然这是一个常见场景了,即在你开启open时,利用输入值可对下拉框的内容进行过滤。这时就是我们增加filterOption配置即可。

2. 当前前置条件切换时,我们需要清空select的值

因为前置切换,可以会切换到需要输入的选项也可能切换到其他select选项但是字典值不同,所以切换后需要清空原来的值,当然为了能够实现清空后显示pladeholder需要置将searchValue和value绑定的变量为undefined。

二、细节需求

这个细节需求,就是searchValue和value配置耦合的情况,即在select为选择option的模式时,又能够输入并搜索。

所以这个时候我们即能够拿到seachValue的值,也可以拿到value值,当他通过搜索拿到某一项值时,我们需要再change事件回调中,把searchValue清空掉。同时我们又需要把open同时关掉。

这里就有一个细节问题:

1. 单选

如果此时select在option展开的情况下,如果支持单选,则需要关掉option下拉,因为这些行为目前都依赖我们的open属性控制。

2. 多选 

但是如果是多选,我们则不需要收起option下拉,依赖其组件内部的控制(失去焦点时关闭)。

3. 奇葩需求处理

现实的需求是,单选模式下,选中一个值后,输入框内回显了刚才选中的option对象的label,单此时并没有失去焦点(因为开启了showSearch),再次点击该文本框要能唤起option下拉,原本的组件自身逻辑,是失去焦点后,再次点击获取焦点就会再此展开option下拉,因为这里这个奇葩需求,我开始让选择一个option值后,强制失去焦点,这样他再点击,则可以唤起option下拉。被迫通过加ref,动态部分则通过函数收集ref,然后通过ref在dom操作下失去焦点。

selectRef.value && selectRef.value.blur();

三、代码

            <Select
              :ref="(dom: HTMLElement) => setDynamicSelectRef(index, dom)"
              v-model:value="item.formData.keyWords"
              :class="{ keywords: true, large: props.size === 'large' }"
              :defaultOpen="false"
              :labelInValue="true"
              @focus="selectFocus(index)"
              @blur="selectBlur(index)"
              @search="(value: string) => onSearch(value, index)"
              @select="(value: ObjectAny) => onSelect(value, index)"
              @change="(value: ObjectAny) => selectChange(value, index)"
              :open="selectOpen(item.formData.keyCategory, index)"
              :searchValue="item.formData.searchValue"
              :showSearch="true"
              :allowClear="activeCategory(item.formData.keyCategory).dicName ? true : false"
              :showArrow="activeCategory(item.formData.keyCategory).dicName ? true : false"
              :filterOption="filterOption"
              :status="item.formRules.keyWords.status"
              :placeholder="activeCategory(item.formData.keyCategory).placeholder"
              :options="dynamicOptions(activeCategory(item.formData.keyCategory)?.dicName)"
            ></Select>

这里面就是整体配置:
activeCategory这个函数(我用computed包装了下),就是根据当前选中的前置条件判断是否为需要展示select的option的判断boolea值。

大概过程就是这样。

1. 处理特殊情况

这里的特殊情况是,我们在一些特殊情况下,需要在对应的条件下,回显一条无法匹配到option的数据,支持特殊场景的搜索(label, value一致,后端需要的其实是一个label)。这时候我们就将需要回填的数据做成一个对象,key,label,value均相同的一个对象,作为默认值回填表单(当然他重新搜索肯定就会搜不到,这就是特殊情况)。

2. 就是清空逻辑实现

showClear,目前我们的处理逻辑是只有是select为option的情况下,我们支持显示清空操作。如果是输入模式,我们不支持清空处理。这是因为select组件的清空操作,其实是触发的change事件,当我们模式是select的输入框,不显示option下拉时,清空并不会触发change事件。

目前暂时没有处理,后期我们实现的话,我会更新。

http://www.dtcms.com/a/99917.html

相关文章:

  • sqli-labs学习记录8
  • Spring 项目中跨数据源(多数据源)调用时 @DS 注解失效或不生效
  • Nginx RTMP 接收模块分析 (ngx_rtmp_receive.c)
  • 【数学建模】(智能优化算法)元胞自动机在数学建模中的应用
  • 第十四节 MATLAB决策制定、MATLAB if 语句语法
  • MATLAB 控制系统设计与仿真 - 30
  • Java简单生成pdf
  • 在Wincc中使用Dapper读写数据库
  • Go/Python(Nuitka)/Rust/Zig 技术对比
  • 记一次关于云的渗透过程
  • Git配置
  • C# 的Lambda表达式‌常见用法和示例
  • C++中常见符合RAII思想的设计有哪些
  • c++使用iconv进行字符编码格式转换
  • 小红书多账号运营:如何实现每个账号独立 IP发布文章
  • ubuntu 安装 postgresql
  • Dubbo(23)如何配置Dubbo的服务消费者?
  • 蓝桥杯_DS18B20温度传感器
  • 【Java】Java核心知识点与相应面试技巧(六)——类与对象(一)
  • 什么是CMS?常用CMS有哪些?
  • Oracle数据库数据编程SQL<2.3 DML增、删、改及merge into>
  • 【学Rust写CAD】15 定点数实现(fixed.rs)
  • CSS中的em,rem,vm,vh详解
  • PipeWire 音频设计与实现分析一——介绍
  • C# 字符串(String)
  • 前端路由守卫与后端权限验证,仅使用路由守卫是否安全?
  • docker日志大小和保存管理
  • 常用的排序算法
  • 浅析Android Jetpack ACC之ViewModel
  • vector之内存分配详解