From ad3a89e6130ea53b0ee05f205cf1a52cec315ffa Mon Sep 17 00:00:00 2001 From: Tyh2001 <1469442737@qq.com> Date: Thu, 23 May 2024 20:01:41 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20select=20=E5=92=8C?= =?UTF-8?q?=20confirm=20=E7=BB=84=E4=BB=B6=E9=85=8D=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../confirm-box/src/confirm-box.vue | 8 ++++++-- .../fighting-design/confirm-box/src/props.ts | 5 ++++- packages/fighting-design/option/src/option.vue | 17 ++++++++++++++++- .../fighting-design/select/src/interface.ts | 3 +++ packages/fighting-design/select/src/props.ts | 6 ++++-- packages/fighting-design/select/src/select.vue | 1 + packages/fighting-theme/src/confirm-box.scss | 2 +- 7 files changed, 35 insertions(+), 7 deletions(-) diff --git a/packages/fighting-design/confirm-box/src/confirm-box.vue b/packages/fighting-design/confirm-box/src/confirm-box.vue index 3b840d9a0e..dababa0201 100644 --- a/packages/fighting-design/confirm-box/src/confirm-box.vue +++ b/packages/fighting-design/confirm-box/src/confirm-box.vue @@ -4,7 +4,7 @@ import { FSpace } from '../../space' import { FCloseBtn } from '../../close-btn' import { ref } from 'vue' - import { useRun } from '../../_hooks' + import { useRun, useList } from '../../_hooks' import { isFunction } from '../../_utils' defineOptions({ name: 'FConfirmBox' }) @@ -12,6 +12,10 @@ const prop = defineProps(Props) const { run } = useRun() + const { styles } = useList(prop, 'confirm-box') + + /** 样式列表 */ + const style = styles(['zIndex'], ['zIndex']) /** 是否展示确认框 */ const isShow = ref(prop.show) @@ -72,7 +76,7 @@ @after-enter="handleOpenEnd" @after-leave="handleCloseEnd" > -
+
diff --git a/packages/fighting-design/confirm-box/src/props.ts b/packages/fighting-design/confirm-box/src/props.ts index 852d2729d1..3327e6ee97 100644 --- a/packages/fighting-design/confirm-box/src/props.ts +++ b/packages/fighting-design/confirm-box/src/props.ts @@ -2,7 +2,8 @@ import { setBooleanProp, setFunctionProp, setStringNumberProp, - setStringProp + setStringProp, + setNumberProp } from '../../_utils' import type { ExtractPropTypes } from 'vue' import type { HandleMouse, HandleChange } from '../../_interface' @@ -12,6 +13,8 @@ export const Props = { show: setBooleanProp(false), /** 标题内容 */ title: setStringProp(), + /** 层级 */ + zIndex: setNumberProp(), /** 提示内容 */ content: setStringProp(), /** 确认按钮文字 */ diff --git a/packages/fighting-design/option/src/option.vue b/packages/fighting-design/option/src/option.vue index 4854e69957..7e9103c53d 100644 --- a/packages/fighting-design/option/src/option.vue +++ b/packages/fighting-design/option/src/option.vue @@ -130,10 +130,25 @@ * * @param { Object } evt 事件对象 */ - const handleClick = (evt: MouseEvent): void => { + const handleClick = async (evt: MouseEvent): Promise => { // 如果没有获取到注入的依赖项或者禁用状态 则返回 if (!parentInject || prop.disabled) return + /** + * 如果存在需要改变值之前的方法，那么久先等待函数执行完毕再执行后面的逻辑 + * + * promise 返回一个布尔类型，为 true 代表值需要改变，为 false 代表取消改变 + */ + if (parentInject.onBeforeChange) { + const changeRes = await parentInject.onBeforeChange() + + if (!changeRes) { + // 点击之后关闭 + triggerInject && run(triggerInject.close) + return + } + } + // 执行父组件的设置方法 run(parentInject.setValue, currentValue, currentLabel, evt) // 点击之后关闭 diff --git a/packages/fighting-design/select/src/interface.ts b/packages/fighting-design/select/src/interface.ts index 80f2411727..7d2707356f 100644 --- a/packages/fighting-design/select/src/interface.ts +++ b/packages/fighting-design/select/src/interface.ts @@ -16,6 +16,8 @@ export type SelectChange = ( evt: MouseEvent ) => void +export type SelectBeforeChange = () => Promise + /** * 提供给子组件注入的依赖项类型接口 * @@ -28,6 +30,7 @@ export type SelectChange = ( export interface SelectProvide { setValue: SelectChange modelValue: SelectModelValue + onBeforeChange: SelectBeforeChange filter: boolean isFiltering: boolean inputValue: string diff --git a/packages/fighting-design/select/src/props.ts b/packages/fighting-design/select/src/props.ts index dde234e11c..311238c0ac 100644 --- a/packages/fighting-design/select/src/props.ts +++ b/packages/fighting-design/select/src/props.ts @@ -1,7 +1,7 @@ import { setBooleanProp, setFunctionProp, setStringProp } from '../../_utils' import { FIGHTING_SIZE } from '../../_tokens' import type { ExtractPropTypes, InjectionKey, PropType } from 'vue' -import type { SelectProvide, SelectModelValue, SelectChange } from './interface' +import type { SelectProvide, SelectModelValue, SelectChange, SelectBeforeChange } from './interface' import type { FightingSize } from '../../_interface' export const Props = { @@ -48,7 +48,9 @@ export const Props = { */ disabled: setBooleanProp(), /** 绑定值发生变化时触发的回调 */ - onChange: setFunctionProp() + onChange: setFunctionProp(), + /** 在值改变之前执行的回调 */ + onBeforeChange: setFunctionProp() } as const /** select 组件 props 类型 */ diff --git a/packages/fighting-design/select/src/select.vue b/packages/fighting-design/select/src/select.vue index 0f948c478a..dc84cab628 100644 --- a/packages/fighting-design/select/src/select.vue +++ b/packages/fighting-design/select/src/select.vue @@ -120,6 +120,7 @@ setValue, inputValue, isFiltering, + onBeforeChange: prop.onBeforeChange, modelValue: toRef(prop, 'modelValue'), filter: toRef(prop, 'filter') }) diff --git a/packages/fighting-theme/src/confirm-box.scss b/packages/fighting-theme/src/confirm-box.scss index 39e2067f8c..18da6dfa9b 100644 --- a/packages/fighting-theme/src/confirm-box.scss +++ b/packages/fighting-theme/src/confirm-box.scss @@ -1,5 +1,5 @@ .f-confirm-box { - z-index: 1000; + z-index: var(--confirm-box-z-index, 1000); display: flex; justify-content: center; align-items: center;