From ebbe7e407904df428564dcf53e5141c14d9e7daa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=8D=E5=A6=82=E6=91=B8=E9=B1=BC=E5=8E=BB?= <1780903673@qq.com> Date: Tue, 11 Feb 2025 23:04:11 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20Toast=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E9=80=9A=E8=BF=87props=E8=AE=BE=E7=BD=AE=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E5=B9=B6=E6=96=B0=E5=A2=9E=E5=B1=80=E4=B8=AD?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E7=9A=84=E9=85=8D=E7=BD=AE=20(#888)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/component/toast.md | 70 +++++++--- src/pages/toast/Index.vue | 29 +++- .../components/wd-toast/index.scss | 3 +- .../components/wd-toast/index.ts | 14 +- .../components/wd-toast/types.ts | 132 +++++++++++++++++- .../components/wd-toast/wd-toast.vue | 51 ++++--- 6 files changed, 237 insertions(+), 62 deletions(-) diff --git a/docs/component/toast.md b/docs/component/toast.md index 814b9d0d..eb0b0394 100644 --- a/docs/component/toast.md +++ b/docs/component/toast.md @@ -2,6 +2,10 @@ 轻提示组件，用于消息通知、加载提示、操作结果提示等场景，支持函数式调用。 +:::tip 提示 +`Toast` 自 $LOWEST_VERSION$ 版本起支持通过 `props` 属性控制组件样式，字段见[props](#props)，需要注意的是函数式调用api的`options`优先级高于`props`。 +::: + ## 基本用法 需要在页面中引入该组件，作为挂载点。 @@ -52,6 +56,8 @@ toast.show({ ## 提示位置 +通过设置 `position` 属性，可以设置提示信息的位置，默认为 `middle-top`。 + ```typescript // 顶部提示 toast.show({ @@ -59,6 +65,12 @@ toast.show({ msg: '提示信息' }) +// 局中提示 +toast.show({ + position: 'middle', + msg: '提示信息' +}) + // 底部提示 toast.show({ position: 'bottom', @@ -109,29 +121,45 @@ toast.close() ## Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -| ------- | -------------------------------------- | --------------- | ------ | ------ | -------- | -| options | 配置项，可以直接传入字符串作为提示信息 | string / object | - | - | - | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +|--------------|------------------------------------------|----------|--------------------------------------------|------------|------------------| +| selector | 选择器 | string | - | '' | - | +| msg | 提示信息 | string | - | '' | $LOWEST_VERSION$ | +| duration | 持续时间，单位 ms，为 0 时表示不自动关闭 | number | - | 2000 | $LOWEST_VERSION$ | +| direction | 排列方向 | string | vertical / horizontal | horizontal | $LOWEST_VERSION$ | +| iconName | 图标类型 | string | success / error / warning / loading / info | '' | $LOWEST_VERSION$ | +| iconSize | 图标大小 | number | - | - | $LOWEST_VERSION$ | +| loadingType | 加载类型 | string | outline / ring | outline | $LOWEST_VERSION$ | +| loadingColor | 加载颜色 | string | - | #4D80F0 | $LOWEST_VERSION$ | +| loadingSize | 加载大小 | number | - | - | $LOWEST_VERSION$ | +| iconColor | 图标颜色 | string | - | - | $LOWEST_VERSION$ | +| position | 提示信息框的位置 | string | top / middle-top / middle / bottom | middle-top | $LOWEST_VERSION$ | +| zIndex | 层级 | number | - | 100 | $LOWEST_VERSION$ | +| cover | 是否存在遮罩层 | boolean | - | false | $LOWEST_VERSION$ | +| iconClass | 图标类名 | string | - | '' | $LOWEST_VERSION$ | +| classPrefix | 类名前缀，用于使用自定义图标 | string | - | wd-icon | $LOWEST_VERSION$ | +| opened | 完全展示后的回调函数 | Function | - | - | $LOWEST_VERSION$ | +| closed | 完全关闭时的回调函数 | Function | - | - | $LOWEST_VERSION$ | -## options +## Options -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -| ------------ | --------------------------------------------------------------------------- | ---------- | ------------------------- | ---------------------- | -------- | -| msg | 消息内容 | string | - | - | - | -| duration | 持续时间，单位 ms，为 0 时表示不自动关闭 | number | - | 2000 | - | -| direction | 排版方向 | string | vertical / horizontal | horizontal | $LOWEST_VERSION$ | -| iconName | 图标类型 | string | success / error / warning | - | - | -| iconSize | 左侧图标尺寸 | string | - | - | - | -| iconClass | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高 | string | - | - | - | -| classPrefix | 类名前缀，用于使用自定义图标 | string | - | - | - | -| position | 提示信息框的位置 | string | top / middle / bottom | middle | - | -| zIndex | toast 层级 | number | - | 100 | - | -| loadingType | [加载中图标类型](/component/loading) | string | ring | outline | - | -| loadingColor | [加载中图标颜色](/component/loading) | string | - | #4D80F0 | - | -| selector | 指定唯一标识 | string | - | - | - | -| cover | 是否存在一个透明遮罩 | boolean | - | `loading`时默认为 true | 1.2.15 | -| opened | 完全展示后的回调函数 | `Function` | - | - | 1.2.15 | -| closed | 完全关闭后的回调函数 | `Function` | - | - | 1.2.15 | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +|--------------|-----------------------------------------------------------------------------|----------|---------------------------|------------|----------| +| msg | 消息内容 | string | - | '' | - | +| duration | 持续时间，单位 ms，为 0 时表示不自动关闭 | number | - | 2000 | - | +| direction | 排版方向 | string | vertical / horizontal | horizontal | $LOWEST_VERSION$ | +| iconName | 图标类型 | string | success / error / warning | '' | - | +| iconSize | 左侧图标尺寸 | number | - | - | - | +| iconClass | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高 | string | - | '' | - | +| classPrefix | 类名前缀，用于使用自定义图标 | string | - | 'wd-icon' | - | +| position | 提示信息框的位置 | string | top / middle / bottom | middle-top | - | +| zIndex | toast 层级 | number | - | 100 | - | +| loadingType | [加载中图标类型](/component/loading) | string | ring | outline | - | +| loadingColor | [加载中图标颜色](/component/loading) | string | - | #4D80F0 | - | +| selector | 指定唯一标识 | string | - | '' | - | +| cover | 是否存在一个透明遮罩 | boolean | - | false | - | +| opened | 完全展示后的回调函数 | Function | - | - | - | +| closed | 完全关闭后的回调函数 | Function | - | - | - | ## Methods diff --git a/src/pages/toast/Index.vue b/src/pages/toast/Index.vue index 0f838181..2778c8fb 100644 --- a/src/pages/toast/Index.vue +++ b/src/pages/toast/Index.vue @@ -17,11 +17,13 @@ 顶部toast + 局中toast 底部toast Loading加载 ring类型loading + 纵向布局loading 横向排版 @@ -63,6 +65,21 @@ function showTopToast() { } }) } + +function showMiddletoast() { + toast.show({ + position: 'middle', + iconClass: 'star', + msg: '提示信息', + closed() { + console.log(232) + }, + opened() { + console.log(2323232) + } + }) +} + function showBottomToast() { toast.show({ position: 'bottom', @@ -85,6 +102,16 @@ function showLoadingToast2() { toast.close() }, 3000) } + +function showLoadingToast3() { + toast.loading({ + msg: '芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。黄鹤断矶头，故人曾到否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。', + direction: 'vertical' + }) + setTimeout(() => { + toast.close() + }, 3000) +} function showLongToast() { toast.show('这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文案') } @@ -110,7 +137,7 @@ function showHorizonToast() { function showVerticalToast() { toast.success({ - msg: '纵向排版', + msg: '芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。黄鹤断矶头，故人曾到否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。', direction: 'vertical' }) } diff --git a/src/uni_modules/wot-design-uni/components/wd-toast/index.scss b/src/uni_modules/wot-design-uni/components/wd-toast/index.scss index 79d60fd5..fe1c8bca 100644 --- a/src/uni_modules/wot-design-uni/components/wd-toast/index.scss +++ b/src/uni_modules/wot-design-uni/components/wd-toast/index.scss @@ -16,6 +16,7 @@ @include when(vertical) { flex-direction: column; } + @include e(msg) { font-size: $-toast-fs; line-height: 20px; @@ -55,7 +56,7 @@ @include m(top) { transform: translate3d(0, -40vh, 0); } - @include m(middle){ + @include m(middle-top){ transform: translate3d(0%,-18.8vh,0); } @include m(bottom) { 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 4eb38caf..7403cd50 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 @@ -9,14 +9,7 @@ const toastDefaultOptionKey = '__TOAST_OPTION__' // 默认模板 export const defaultOptions: ToastOptions = { - msg: '', - duration: 2000, - loadingType: 'outline', - loadingColor: '#4D80F0', - iconColor: '#4D80F0', - position: 'middle', - show: false, - zIndex: 100 + show: false } const None = Symbol('None') @@ -31,7 +24,6 @@ export function useToast(selector: string = ''): Toast { let timer: ReturnType | null = null const createMethod = (toastOptions: ToastOptions) => { - // 优先级：options->toastOptions->defaultOptions return (options: ToastOptions | string) => { return show(deepMerge(toastOptions, typeof options === 'string' ? { msg: options } : options) as ToastOptions) } @@ -66,7 +58,7 @@ export function useToast(selector: string = ''): Toast { const info = createMethod({ iconName: 'info' }) const close = () => { - toastOption.value.show = false + toastOption.value = { show: false } } return { show, @@ -91,7 +83,7 @@ export const toastIcon = { return '警告Created with Sketch. ' }, info() { - return '常规Created with Sketch.' + return '常规Created with Sketch.' }, error() { return 'toastCreated with Sketch. ' diff --git a/src/uni_modules/wot-design-uni/components/wd-toast/types.ts b/src/uni_modules/wot-design-uni/components/wd-toast/types.ts index 3d45248f..6cfb4475 100644 --- a/src/uni_modules/wot-design-uni/components/wd-toast/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-toast/types.ts @@ -1,26 +1,28 @@ /* * @Author: weisheng * @Date: 2023-06-19 12:47:57 - * @LastEditTime: 2024-07-18 22:18:07 + * @LastEditTime: 2025-02-11 21:34:01 * @LastEditors: weisheng * @Description: * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-toast/types.ts * 记得注释 */ -import type { ExtractPropTypes } from 'vue' +import type { ExtractPropTypes, PropType } from 'vue' import { baseProps, makeStringProp } from '../common/props' import type { LoadingType } from '../wd-loading/types' export type ToastIconType = 'success' | 'error' | 'warning' | 'loading' | 'info' // 图标类型 -export type ToastPositionType = 'top' | 'middle' | 'bottom' // 提示信息框的位置类型 +export type ToastPositionType = 'top' | 'middle-top' | 'middle' | 'bottom' // 提示信息框的位置类型 + +export type ToastDirection = 'vertical' | 'horizontal' // 提示信息框的排列方向 export type ToastLoadingType = LoadingType // 提示信息加载状态类型 export type ToastOptions = { msg?: string duration?: number - direction?: 'vertical' | 'horizontal' + direction?: ToastDirection iconName?: ToastIconType iconSize?: number loadingType?: ToastLoadingType @@ -71,7 +73,127 @@ export interface Toast { export const toastProps = { ...baseProps, - selector: makeStringProp('') + /** + * 选择器 + * @type {string} + * @default '' + */ + selector: makeStringProp(''), + /** + * 提示信息 + * @type {string} + * @default '' + */ + msg: { + type: String, + default: '' + }, + /** + * 持续时间 + * @type {number} + * @default 2000 + */ + duration: { + type: Number, + default: 2000 + }, + /** + * 排列方向 + * @type {'vertical' | 'horizontal'} + * @default 'horizontal' + */ + direction: makeStringProp('horizontal'), + /** + * 图标名称 + * @type {'success' | 'error' | 'warning' | 'loading' | 'info'} + * @default '' + */ + iconName: { + type: String as PropType, + default: '' + }, + /** + * 图标大小 + * @type {number} + */ + iconSize: Number, + /** + * 加载类型 + * @type {'outline' | 'ring'} + * @default 'outline' + */ + loadingType: makeStringProp('outline'), + /** + * 加载颜色 + * @type {string} + * @default '#4D80F0' + */ + loadingColor: { + type: String, + default: '#4D80F0' + }, + /** + * 加载大小 + * @type {number} + */ + loadingSize: Number, + /** + * 图标颜色 + * @type {string} + */ + iconColor: String, + /** + * 位置 + * @type {'top' | 'middle-top' | 'middle' | 'bottom'} + * @default 'middle-top' + */ + position: makeStringProp('middle-top'), + /** + * 层级 + * @type {number} + * @default 100 + */ + zIndex: { + type: Number, + default: 100 + }, + /** + * 是否存在遮罩层 + * @type {boolean} + * @default false + */ + cover: { + type: Boolean, + default: false + }, + /** + * 图标类名 + * @type {string} + * @default '' + */ + iconClass: { + type: String, + default: '' + }, + /** + * 类名前缀 + * @type {string} + * @default 'wd-icon' + */ + classPrefix: { + type: String, + default: 'wd-icon' + }, + /** + * 完全展示后的回调函数 + * @type {Function} + */ + opened: Function as PropType<() => void>, + /** + * 完全关闭时的回调函数 + * @type {Function} + */ + closed: Function as PropType<() => void> } export type ToastProps = ExtractPropTypes 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 0593b16e..78c43b08 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 @@ -8,10 +8,10 @@ :type="loadingType" :color="loadingColor" :size="loadingSize" - :custom-class="`wd-toast__icon ${toastOption.direction === 'vertical' ? 'is-vertical' : ''}`" + :custom-class="`wd-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`" /> @@ -20,7 +20,7 @@ ('') // 图标 const cover = ref(false) // 是否存在遮罩层 const classPrefix = ref('wd-icon') // 图标前缀 const iconClass = ref('') // 图标类名 +const direction = ref('horizontal') // toast布局方向 let opened: (() => void) | null = null @@ -111,7 +112,8 @@ const transitionStyle = computed(() => { left: 0, width: '100%', transform: 'translate(0, -50%)', - 'text-align': 'center' + 'text-align': 'center', + 'pointer-events': 'none' } return objToStyle(style) }) @@ -119,7 +121,7 @@ const transitionStyle = computed(() => { const rootClass = computed(() => { return `wd-toast ${props.customClass} wd-toast--${position.value} ${ (iconName.value !== 'loading' || msg.value) && (iconName.value || iconClass.value) ? 'wd-toast--with-icon' : '' - } ${iconName.value === 'loading' && !msg.value ? 'wd-toast--loading' : ''} ${toastOption.value.direction === 'vertical' ? 'is-vertical' : ''}` + } ${iconName.value === 'loading' && !msg.value ? 'wd-toast--loading' : ''} ${direction.value === 'vertical' ? 'is-vertical' : ''}` }) const svgStyle = computed(() => { @@ -161,26 +163,29 @@ function buildSvg() { * @param option toast选项值 */ function reset(option: ToastOptions) { - if (option) { - show.value = isDef(option.show) ? option.show : false + show.value = isDef(option.show) ? option.show : false - if (show.value) { - iconName.value = isDef(option.iconName!) ? option.iconName! : '' - iconClass.value = isDef(option.iconClass!) ? option.iconClass! : '' - msg.value = isDef(option.msg!) ? option.msg! : '' - position.value = isDef(option.position!) ? option.position! : 'middle' - zIndex.value = isDef(option.zIndex!) ? option.zIndex! : 100 - loadingType.value = isDef(option.loadingType!) ? option.loadingType! : 'outline' - loadingColor.value = isDef(option.loadingColor!) ? option.loadingColor! : '#4D80F0' - iconSize.value = isDef(option.iconSize) ? addUnit(option.iconSize) : option.iconSize - loadingSize.value = isDef(option.loadingSize) ? addUnit(option.loadingSize) : option.loadingSize - cover.value = isDef(option.cover!) ? option.cover! : false - classPrefix.value = isDef(option.classPrefix) ? option.classPrefix : 'wd-icon' - closed = isFunction(option.closed) ? option.closed : null - opened = isFunction(option.opened) ? option.opened : null - } + if (show.value) { + mergeOptionsWithProps(option, props) } } + +function mergeOptionsWithProps(option: ToastOptions, props: ToastProps) { + iconName.value = isDef(option.iconName!) ? option.iconName! : props.iconName + iconClass.value = isDef(option.iconClass!) ? option.iconClass! : props.iconClass + msg.value = isDef(option.msg!) ? option.msg! : props.msg + position.value = isDef(option.position!) ? option.position! : props.position + zIndex.value = isDef(option.zIndex!) ? option.zIndex! : props.zIndex + loadingType.value = isDef(option.loadingType!) ? option.loadingType! : props.loadingType + loadingColor.value = isDef(option.loadingColor!) ? option.loadingColor! : props.loadingColor + iconSize.value = isDef(option.iconSize) ? addUnit(option.iconSize) : isDef(props.iconSize) ? addUnit(props.iconSize) : undefined + loadingSize.value = isDef(option.loadingSize) ? addUnit(option.loadingSize) : isDef(props.loadingSize) ? addUnit(props.loadingSize) : undefined + cover.value = isDef(option.cover!) ? option.cover! : props.cover + classPrefix.value = isDef(option.classPrefix) ? option.classPrefix : props.classPrefix + direction.value = isDef(option.direction) ? option.direction : props.direction + closed = isFunction(option.closed) ? option.closed : isFunction(props.closed) ? props.closed : null + opened = isFunction(option.opened) ? option.opened : isFunction(props.opened) ? props.opened : null +}