admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ Toast 支持通过props设置组件属性并新增局中显示的配置 (#888)

Browse Source
This commit is contained in:
不如摸鱼去 2025-02-11 23:04:11 +08:00 committed by GitHub
parent ed60852432
commit ebbe7e4079
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 237 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
docs/component/toast.md
View File

@ -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',
@ -110,28 +122,44 @@ 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 | - | - | - |
|--------------|-----------------------------------------------------------------------------|----------|---------------------------|------------|----------|
| 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 | - |
| 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 | - | `loading`时默认为 true | 1.2.15 |
| opened | 完全展示后的回调函数 | `Function` | - | - | 1.2.15 |
| closed | 完全关闭后的回调函数 | `Function` | - | - | 1.2.15 |
| selector | 指定唯一标识 | string | - | '' | - |
| cover | 是否存在一个透明遮罩 | boolean | - | false | - |
| opened | 完全展示后的回调函数 | Function | - | - | - |
| closed | 完全关闭后的回调函数 | Function | - | - | - |
## Methods

29
src/pages/toast/Index.vue
View File

@ -17,11 +17,13 @@
</demo-block>
<demo-block title="提示位置">
<wd-button @click="showTopToast">顶部toast</wd-button>
<wd-button @click="showMiddletoast">局中toast</wd-button>
<wd-button @click="showBottomToast">底部toast</wd-button>
</demo-block>
<demo-block title="Loading">
<wd-button @click="showLoadingToast">Loading加载</wd-button>
<wd-button @click="showLoadingToast2">ring类型loading</wd-button>
<wd-button @click="showLoadingToast3">纵向布局loading</wd-button>
</demo-block>
<demo-block title="排版方向">
<wd-button @click="showHorizonToast">横向排版</wd-button>
@ -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'
})
}

3
src/uni_modules/wot-design-uni/components/wd-toast/index.scss
View File

@ -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) {

14
src/uni_modules/wot-design-uni/components/wd-toast/index.ts
View File

@ -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<typeof setTimeout> | 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 '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>警告</title><desc>Created with Sketch.</desc> <defs> <filter x="-240.0%" y="-60.0%" width="580.0%" height="220.0%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.824756567 0 0 0 0 0.450356612 0 0 0 0 0.168550194 0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-580.000000, -538.000000)"> <g id="警告" transform="translate(580.000000, 538.000000)"><circle id="Oval" fill="#F0883A" opacity="0.400000006" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#F0883A" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(18.500000, 10.800000)"><rect id="Rectangle" fill="#FFFFFF" transform="translate(2.492935, 7.171583) scale(1, -1) rotate(-360.000000) translate(-2.492935, -7.171583) " x="0.992934699" y="0.955464537" width="3" height="12.4322365" rx="1.5"></rect><rect id="Rectangle-Copy-25" fill="#FFDEC5" transform="translate(2.508751, 17.202636) scale(1, -1) rotate(-360.000000) translate(-2.508751, -17.202636) " x="1.00875134" y="15.200563" width="3" height="4.00414639" rx="1.5"></rect></g></g></g></g></svg>'
},
info() {
return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>常规</title><desc>Created with Sketch.</desc><defs><filter x="-300.0%" y="-57.1%" width="700.0%" height="214.3%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.362700096 0 0 0 0 0.409035039 0 0 0 0 0.520238904 0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-772.000000, -538.000000)"><g id="常规" transform="translate(772.000000, 538.000000)"><circle id="Oval" fill="#909CB7" opacity="0.4" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#909CB7" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(18.500000, 9.800000)"><g id="编组-2" transform="translate(2.492935, 10.204709) rotate(-180.000000) translate(-2.492935, -10.204709) translate(0.992935, 0.204709)"><rect id="Rectangle" fill="#FFFFFF" transform="translate(1.500000, 7.000000) scale(1, -1) rotate(-360.000000) translate(-1.500000, -7.000000) " x="0" y="0" width="3" height="14" rx="1.5"></rect><rect id="Rectangle-Copy-25" fill="#EEEEEE" transform="translate(1.500000, 18.000000) scale(1, -1) rotate(-360.000000) translate(-1.500000, -18.000000) " x="0" y="16" width="3" height="4" rx="1.5"></rect></g></g></g></g></g></svg>'
return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>常规</title><desc>Created with Sketch.</desc><defs><filter x="-300.0%" y="-57.1%" width="700.0%" height="214.3%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.362700096 0 0 0 0 0.409035039 0 0 0 0 0.520238904 0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-772.000000, -538.000000)"><g id="常规" transform="translate(772.000000, 538.000000)"><circle id="Oval" fill="#909CB7" opacity="0.4" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#909CB7" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(18.500000, 9.800000)"><g id="编组-2" transform="translate(2.492935, 10.204709) rotate(-180.000000) translate(-2.492935, -10.204709) translate(0.992935, 0.204709)"><rect id="Rectangle" fill="#FFFFFF" transform="translate(1.500000, 7.000000) scale(1, -1) rotate(-360.000000) translate(-1.500000, -7.000000) " x="0" y="0" width="3" height="14" rx="1.5"></rect><rect id="Rectangle-Copy-25" fill="#EEEEEE" transform="translate(1.500000, 18.000000) scale(1, -1) rotate(-360.000000) translate(-1.500000, -18.000000) " x="0" y="16" width="3" height="4" rx="1.5"></rect></g></g></g></g></svg>'
},
error() {
return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>toast</title><desc>Created with Sketch.</desc><defs><linearGradient x1="99.6229896%" y1="50.3770104%" x2="0.377010363%" y2="50.3770104%" id="linearGradient-1"><stop stop-color="#FFDFDF" offset="0%"></stop><stop stop-color="#F9BEBE" offset="100%"></stop></linearGradient><linearGradient x1="0.377010363%" y1="50.3770104%" x2="99.6229896%" y2="50.3770104%" id="linearGradient-2"><stop stop-color="#FFDFDF" offset="0%"></stop><stop stop-color="#F9BEBE" offset="100%"></stop></linearGradient></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-196.000000, -538.000000)"> <g id="toast" transform="translate(196.000000, 538.000000)"><circle id="Oval" fill="#FA4350" opacity="0.400000006" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#FA4350" opacity="0.900000036" cx="21" cy="21" r="16"></circle><rect id="矩形" fill="#FFDFDF" transform="translate(21.071068, 21.071068) rotate(-225.000000) translate(-21.071068, -21.071068) " x="12.5710678" y="19.5710678" width="17" height="3" rx="1.5"></rect><rect id="矩形" fill="url(#linearGradient-1)" transform="translate(19.303301, 22.838835) rotate(-225.000000) translate(-19.303301, -22.838835) " x="17.3033009" y="21.3388348" width="4" height="3"></rect><rect id="矩形" fill="url(#linearGradient-2)" transform="translate(22.838835, 19.303301) rotate(-225.000000) translate(-22.838835, -19.303301) " x="20.8388348" y="17.8033009" width="4" height="3"></rect><rect id="矩形" fill="#FFFFFF" transform="translate(21.071068, 21.071068) rotate(-315.000000) translate(-21.071068, -21.071068) " x="12.5710678" y="19.5710678" width="17" height="3" rx="1.5"></rect></g></g></g></svg>'

132
src/uni_modules/wot-design-uni/components/wd-toast/types.ts
View File

@ -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<ToastDirection>('horizontal'),
/**
* 图标名称
* @type {'success' | 'error' | 'warning' | 'loading' | 'info'}
* @default ''
*/
iconName: {
type: String as PropType<ToastIconType>,
default: ''
},
/**
* 图标大小
* @type {number}
*/
iconSize: Number,
/**
* 加载类型
* @type {'outline' | 'ring'}
* @default 'outline'
*/
loadingType: makeStringProp<ToastLoadingType>('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<ToastPositionType>('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<typeof toastProps>

47
src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue
View File

@ -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' : ''}`"
/>
<view
:class="`wd-toast__iconWrap wd-toast__icon ${toastOption.direction === 'vertical' ? 'is-vertical' : ''}`"
:class="`wd-toast__iconWrap wd-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`"
v-else-if="iconName === 'success' || iconName === 'warning' || iconName === 'info' || iconName === 'error'"
>
<view class="wd-toast__iconBox">
@ -20,7 +20,7 @@
</view>
<wd-icon
v-else-if="iconClass"
:custom-class="`wd-toast__icon ${toastOption.direction === 'vertical' ? 'is-vertical' : ''}`"
:custom-class="`wd-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`"
:size="iconSize"
:class-prefix="classPrefix"
:name="iconClass"
@ -51,7 +51,7 @@ 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, getToastOptionKey, toastIcon } from '.'
import { toastProps, type ToastLoadingType, type ToastOptions } from './types'
import { toastProps, type ToastDirection, type ToastLoadingType, type ToastOptions, type ToastProps } from './types'
import { addUnit, isDef, isFunction, objToStyle } from '../common/util'
const props = defineProps(toastProps)
@ -68,6 +68,7 @@ const svgStr = ref<string>('') // 图标
const cover = ref<boolean>(false) // 是否存在遮罩层
const classPrefix = ref<string>('wd-icon') // 图标前缀
const iconClass = ref<string>('') // 图标类名
const direction = ref<ToastDirection>('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
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
}
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
}
</script>
<style lang="scss" scoped>
@import './index.scss';