diff --git a/src/uni_modules/wot-design-uni/components/wd-message-box/index.ts b/src/uni_modules/wot-design-uni/components/wd-message-box/index.ts index 26f8e04e..aef65c07 100644 --- a/src/uni_modules/wot-design-uni/components/wd-message-box/index.ts +++ b/src/uni_modules/wot-design-uni/components/wd-message-box/index.ts @@ -1,22 +1,19 @@ /* * @Author: weisheng * @Date: 2022-12-14 17:33:21 - * @LastEditTime: 2024-08-17 18:18:16 + * @LastEditTime: 2024-11-05 23:15:31 * @LastEditors: weisheng * @Description: - * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-message-box/index.ts + * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-message-box\index.ts * 记得注释 */ -import { provide, ref } from 'vue' +import { inject, provide, ref } from 'vue' import type { Message, MessageOptions, MessageResult, MessageType } from './types' import { deepMerge } from '../common/util' -/** - * useMessage 用到的key - * - * @internal - */ -export const messageDefaultOptionKey = '__MESSAGE_OPTION__' +const messageDefaultOptionKey = '__MESSAGE_OPTION__' + +const None = Symbol('None') // 默认模板 export const defaultOptions: MessageOptions = { @@ -36,9 +33,12 @@ export const defaultOptions: MessageOptions = { } export function useMessage(selector: string = ''): Message { - const messageOption = ref(defaultOptions) // Message选项 const messageOptionKey = selector ? messageDefaultOptionKey + selector : messageDefaultOptionKey - provide(messageOptionKey, messageOption) + const messageOption = inject(messageOptionKey, ref(None)) // Message选项 + if (messageOption.value === None) { + messageOption.value = defaultOptions + provide(messageOptionKey, messageOption) + } const createMethod = (type: MessageType) => { // 优先级:options->MessageOptions->defaultOptions @@ -77,7 +77,9 @@ export function useMessage(selector: string = ''): Message { const prompt = createMethod('prompt') const close = () => { - messageOption.value.show = false + if (messageOption.value !== None) { + messageOption.value.show = false + } } return { show, @@ -87,3 +89,7 @@ export function useMessage(selector: string = ''): Message { close } } + +export const getMessageDefaultOptionKey = (selector: string) => { + return selector ? `${messageDefaultOptionKey}${selector}` : messageDefaultOptionKey +} diff --git a/src/uni_modules/wot-design-uni/components/wd-message-box/types.ts b/src/uni_modules/wot-design-uni/components/wd-message-box/types.ts index 59d4f4d0..1f5b8402 100644 --- a/src/uni_modules/wot-design-uni/components/wd-message-box/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-message-box/types.ts @@ -1,13 +1,13 @@ /* * @Author: weisheng * @Date: 2024-04-08 22:34:01 - * @LastEditTime: 2024-09-23 15:59:04 + * @LastEditTime: 2024-11-05 23:17:06 * @LastEditors: weisheng * @Description: * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-message-box\types.ts * 记得注释 */ -import { baseProps } from '../common/props' +import { baseProps, makeStringProp } from '../common/props' import { type InputType } from '../wd-input/types' export type MessageType = 'alert' | 'confirm' | 'prompt' @@ -113,5 +113,8 @@ export interface Message { export const messageBoxProps = { ...baseProps, - selector: String + /** + * 指定唯一标识 + */ + selector: makeStringProp('') } diff --git a/src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue b/src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue index 12ea5b27..779c14dd 100644 --- a/src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue +++ b/src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue @@ -61,7 +61,7 @@ import { type MessageResult, type MessageType } from './types' -import { defaultOptions, messageDefaultOptionKey } from '.' +import { defaultOptions, getMessageDefaultOptionKey } from '.' import { isDef, isFunction } from '../common/util' import { useTranslate } from '../composables/useTranslate' import { type InputType } from '../wd-input/types' @@ -78,7 +78,7 @@ const bodyClass = computed(() => { return `wd-message-box__body ${!title.value ? 'is-no-title' : ''} ${type.value === 'prompt' ? 'is-prompt' : ''}` }) -const messageOptionKey = props.selector ? messageDefaultOptionKey + props.selector : messageDefaultOptionKey +const messageOptionKey = getMessageDefaultOptionKey(props.selector) const messageOption = inject(messageOptionKey, ref(defaultOptions)) // message选项 /** diff --git a/src/uni_modules/wot-design-uni/components/wd-notify/index.ts b/src/uni_modules/wot-design-uni/components/wd-notify/index.ts index 3e457e1e..aaefa7c1 100644 --- a/src/uni_modules/wot-design-uni/components/wd-notify/index.ts +++ b/src/uni_modules/wot-design-uni/components/wd-notify/index.ts @@ -1,10 +1,11 @@ -import { provide, reactive } from 'vue' +import { inject, provide, reactive, ref } from 'vue' import type { NotifyProps } from './types' import { deepMerge, isString } from '../common/util' let timer: ReturnType let currentOptions = getDefaultOptions() const notifyDefaultOptionKey = '__NOTIFY_OPTION__' +const None = Symbol('None') export const setNotifyDefaultOptions = (options: NotifyProps) => { currentOptions = deepMerge(currentOptions, options) as NotifyProps } @@ -12,24 +13,28 @@ export const resetNotifyDefaultOptions = () => { currentOptions = getDefaultOptions() } export const useNotify = (selector: string = '') => { - const notifyOption = reactive(currentOptions) + const notifyOptionKey = getNotifyOptionKey(selector) + + const notifyOption = inject(notifyOptionKey, ref(None)) + if (notifyOption.value === None) { + notifyOption.value = currentOptions + provide(notifyOptionKey, notifyOption) + } const showNotify = (option: NotifyProps | string) => { const options = deepMerge(currentOptions, isString(option) ? { message: option } : option) as NotifyProps - - Object.assign(notifyOption, options, { visible: true }) - if (notifyOption.duration && notifyOption.duration > 0) { + notifyOption.value = deepMerge(options, { visible: true }) + if (notifyOption.value.duration && notifyOption.value.duration > 0) { timer && clearTimeout(timer) timer = setTimeout(() => closeNotify(), options.duration) } } const closeNotify = () => { timer && clearTimeout(timer) - notifyOption.visible = false + if (notifyOption.value !== None) { + notifyOption.value.visible = false + } } - // provide - provide(getNotifyOptionKey(selector), notifyOption) - return { showNotify, closeNotify diff --git a/src/uni_modules/wot-design-uni/components/wd-notify/wd-notify.vue b/src/uni_modules/wot-design-uni/components/wd-notify/wd-notify.vue index 46e5fcc0..81457455 100644 --- a/src/uni_modules/wot-design-uni/components/wd-notify/wd-notify.vue +++ b/src/uni_modules/wot-design-uni/components/wd-notify/wd-notify.vue @@ -16,16 +16,18 @@ diff --git a/src/uni_modules/wot-design-uni/components/wd-toast/index.ts b/src/uni_modules/wot-design-uni/components/wd-toast/index.ts index ccbd2b46..52b988f7 100644 --- a/src/uni_modules/wot-design-uni/components/wd-toast/index.ts +++ b/src/uni_modules/wot-design-uni/components/wd-toast/index.ts @@ -1,22 +1,11 @@ -/* - * @Author: weisheng - * @Date: 2024-03-29 13:29:57 - * @LastEditTime: 2024-07-18 23:16:16 - * @LastEditors: weisheng - * @Description: - * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-toast/index.ts - * 记得注释 - */ -import { provide, ref } from 'vue' +import { inject, provide, ref } from 'vue' import type { Toast, ToastOptions } from './types' import { deepMerge } from '../common/util' /** * useToast 用到的key - * - * @internal */ -export const toastDefaultOptionKey = '__TOAST_OPTION__' +const toastDefaultOptionKey = '__TOAST_OPTION__' // 默认模板 export const defaultOptions: ToastOptions = { @@ -30,11 +19,16 @@ export const defaultOptions: ToastOptions = { zIndex: 100 } +const None = Symbol('None') + export function useToast(selector: string = ''): Toast { + const toastOptionKey = getToastOptionKey(selector) + const toastOption = inject(toastOptionKey, ref(None)) // toast选项 + if (toastOption.value === None) { + toastOption.value = defaultOptions + provide(toastOptionKey, toastOption) + } let timer: ReturnType | null = null - const toastOption = ref(defaultOptions) // Toast选项 - const toastOptionKey = selector ? toastDefaultOptionKey + selector : toastDefaultOptionKey - provide(toastOptionKey, toastOption) const createMethod = (toastOptions: ToastOptions) => { // 优先级:options->toastOptions->defaultOptions @@ -85,6 +79,10 @@ export function useToast(selector: string = ''): Toast { } } +export const getToastOptionKey = (selector: string) => { + return selector ? `${toastDefaultOptionKey}${selector}` : toastDefaultOptionKey +} + export const toastIcon = { success() { return '成功Created with Sketch.' diff --git a/src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue b/src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue index 19fed83f..85dea13e 100644 --- a/src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue +++ b/src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue @@ -38,12 +38,11 @@ import wdTransition from '../wd-transition/wd-transition.vue' import { computed, inject, onBeforeMount, ref, watch, type CSSProperties } from 'vue' import base64 from '../common/base64' -import { defaultOptions, toastDefaultOptionKey, toastIcon } from '.' +import { defaultOptions, getToastOptionKey, toastIcon } from '.' import { toastProps, type ToastLoadingType, type ToastOptions } from './types' import { addUnit, isDef, isFunction, objToStyle } from '../common/util' const props = defineProps(toastProps) - const iconName = ref('') // 图标类型 const msg = ref('') // 消息内容 const position = ref('middle') @@ -62,7 +61,7 @@ let opened: (() => void) | null = null let closed: (() => void) | null = null -const toastOptionKey = props.selector ? toastDefaultOptionKey + props.selector : toastDefaultOptionKey +const toastOptionKey = getToastOptionKey(props.selector) const toastOption = inject(toastOptionKey, ref(defaultOptions)) // toast选项 // 监听options变化展示 diff --git a/src/uni_modules/wot-design-uni/index.ts b/src/uni_modules/wot-design-uni/index.ts index 27b09bf0..5dd21714 100644 --- a/src/uni_modules/wot-design-uni/index.ts +++ b/src/uni_modules/wot-design-uni/index.ts @@ -8,23 +8,15 @@ * 记得注释 */ -// Toast export { useToast } from './components/wd-toast' -// Messageb export { useMessage } from './components/wd-message-box' - -// useQueue export { useQueue } from './components/composables/useQueue' - -// Notify export * from './components/wd-notify' export { dayjs } from './components/common/dayjs' export * as CommonUtil from './components/common/util' - export * as clickOut from './components/common/clickoutside' export * from './locale' - export type { ConfigProviderThemeVars } from './components/wd-config-provider/types'