From cc46f461993dc0d3c26157b5f11fb687458208b6 Mon Sep 17 00:00:00 2001 From: Tyh2001 <1469442737@qq.com> Date: Thu, 20 Jun 2024 13:58:35 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20`f-select`=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9C=A8=E7=AD=9B=E9=80=89=E4=B9=8B=E5=90=8E?= =?UTF-8?q?=EF=BC=8C=E7=9B=B4=E6=8E=A5=E5=A4=B1=E5=8E=BB=E7=84=A6=E7=82=B9?= =?UTF-8?q?=E5=85=B3=E9=97=AD=E4=B8=8B=E6=8B=89=E9=80=89=E9=A1=B9=E5=86=8D?= =?UTF-8?q?=E6=AC=A1=E6=89=93=E5=BC=80=E6=97=B6=E4=BE=9D=E7=84=B6=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E8=BF=87=E6=BB=A4=E7=9A=84=E5=86=85=E5=AE=B9=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 2 ++ .../fighting-design/option/src/option.vue | 17 +++++++------ .../fighting-design/select/src/interface.ts | 9 ++++--- .../fighting-design/select/src/select.vue | 24 ++++++++++++++++-- .../fighting-design/trigger/src/trigger.vue | 2 +- start/src/App.vue | 25 +++++++++++++------ 6 files changed, 59 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index db0a8938f..617b7a8fb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,8 @@ - `f-textarea` 组件 Enter 事件默认改为换行，ctrl + Enter 为提交事件，会执行 `on-enter` 事件 - 修复 `f-select` 组件在绑定值为空的时候没有清空输入框的问题 - 优化 `f-up-load` 语法 [#492](https://github.com/FightingDesign/fighting-design/pull/492) +- 修复 `f-select` 组件动态变更响应试丢失问题 +- 修复 `f-select` 组件在筛选之后，直接失去焦点关闭下拉选项再次打开时依然显示过滤的内容问题 ## 1.0.0-alpha.8 (2024-06-12) diff --git a/packages/fighting-design/option/src/option.vue b/packages/fighting-design/option/src/option.vue index 1ddc84a5d..676700160 100644 --- a/packages/fighting-design/option/src/option.vue +++ b/packages/fighting-design/option/src/option.vue @@ -21,7 +21,7 @@ const parentInject: SelectProvide | null = inject(SELECT_PROPS_TOKEN, null) /** 获取到 trigger 注入的依赖项 */ const triggerInject: TriggerProvide | null = inject(TRIGGER_CLOSE_KEY, null) - + /** 获取插槽内容 */ const slotLabel = computed((): string => { if (!slot.default) { @@ -46,14 +46,19 @@ if (!parentInject) { return false } - + // Trigger 展示状态高优先级 if (!triggerInject?.isVisible()) { return false } + // 关闭了触发器，全部显示 + if (!parentInject.isTrigger) { + return true + } + // 在过滤属性存在并且是正在输入中，执行过滤操作 - if (parentInject.filter || parentInject.isFiltering) { + if (parentInject.filter && parentInject.isFiltering) { return currentLabel ? currentLabel.toString().includes(parentInject.inputValue) : false @@ -171,24 +176,22 @@ } if (currentValue === parentInject.modelValue) { + console.log('run') parentInject && run(parentInject.setValue, currentValue, currentLabel) } } /** * 监听一次数据的变化更新值，避免数据是异步设置的 - * - * 只需要监听一次即可 */ const setWatch = (): void => { if (!parentInject) { return } - watch(() => parentInject.modelValue, setInit, { once: true }) + watch(() => parentInject.modelValue, setInit, { immediate: true }) } - setInit() // 初始化设置选中的值 setWatch() // 开始监听器 diff --git a/packages/fighting-design/select/src/interface.ts b/packages/fighting-design/select/src/interface.ts index 3ab5e95f8..2f690c8ba 100644 --- a/packages/fighting-design/select/src/interface.ts +++ b/packages/fighting-design/select/src/interface.ts @@ -27,17 +27,20 @@ export type SelectBeforeChange = (value: SelectModelValue, label: SelectModelVal /** * 提供给子组件注入的依赖项类型接口 * - * @param { Function } setValue 设置新的选中值 * @param { Object } modelValue 绑定的值 * @param { boolean } filter 绑定的值 + * @param { boolean } isTrigger 是否触发 * @param { boolean } isFiltering 是否正在搜索 * @param { string } inputValue 文本框绑定的值 + * @param { Function } setValue 设置新的选中值 + * @param { Function } onBeforeChange 在值改变之前执行的回调 */ export interface SelectProvide { - setValue: SelectChange modelValue: SelectModelValue - onBeforeChange: SelectBeforeChange filter: boolean + isTrigger: boolean isFiltering: boolean inputValue: string + setValue: SelectChange + onBeforeChange: SelectBeforeChange } diff --git a/packages/fighting-design/select/src/select.vue b/packages/fighting-design/select/src/select.vue index 7c863bf79..92747e715 100644 --- a/packages/fighting-design/select/src/select.vue +++ b/packages/fighting-design/select/src/select.vue @@ -7,6 +7,7 @@ import { FSvgIcon } from '../../svg-icon' import { FEmpty } from '../../empty' import { FIconChevronDown } from '../../_svg' + import type { HandleChange } from '../../_interface' import type { SelectProvide, SelectModelValue } from './interface' defineOptions({ name: 'FSelect' }) @@ -32,6 +33,8 @@ const inputValue = ref('') /** 是否正在输入过滤搜索中 */ const isFiltering = ref(false) + /** 是否触发 */ + const isTrigger = ref(false) /** * 设置新的值 @@ -65,9 +68,11 @@ } /** 下拉菜单开启之后的回调 */ - const dropdownOpen = async (): Promise => { + const dropdownOpen: HandleChange = async (target): Promise => { await nextTick() + isTrigger.value = target + /** 获取到当前选中的元素 */ const activeNode = selectContentRef.value?.querySelector('.f-option.f-option__active') @@ -87,6 +92,14 @@ } } + /** + * 下拉菜单关闭之后的回调 + */ + const dropdownClose: HandleChange = (target): void => { + isTrigger.value = target + isFiltering.value = target + } + /** * 文本框失去焦点 */ @@ -130,6 +143,7 @@ inputValue, isFiltering, modelValue, + isTrigger, filter: prop.filter, setValue, onBeforeChange: prop.onBeforeChange @@ -139,7 +153,13 @@