diff --git a/packages/devui-vue/docs/components/toast/index.md b/packages/devui-vue/docs/components/toast/index.md index 2218666a7c7d57731ec5fd533f2052446343b728..806f180b8c6ec1c41d053701b6d78acfb3e54962 100644 --- a/packages/devui-vue/docs/components/toast/index.md +++ b/packages/devui-vue/docs/components/toast/index.md @@ -9,54 +9,63 @@ ### 基本用法 common 时不展示图标。 - - - - - Back to {{ msg.myInfo }} Home Page - - - Success - Warn - Error - Multiple - link - pure text - common - no title - - -```html - - - - Back to {{ msg.myInfo }} Home Page - - - Success - Warn - Error - Multiple - link - pure text - common - no title - -``` - -```ts +:::demo + +```vue + + + + + Back to {{ msg.myInfo }} Home Page + + + Success + Warn + Error + Multiple + link + pure text + common + no title + + + + ``` +::: + ### 超时时间 当设置超时时间、没有标题时,则不展示标题和关闭按钮。 - - - - Success - Warn - Error - common - - -```html - - - Success - Warn - Error - common - -``` - -```ts +:::demo + +```vue + + + + Success + Warn + Error + common + + + + ``` +::: + ### 自定义样式 - +:::demo + +```vue + + + + Custom Style + + + + ``` -```ts -import { defineComponent, ref } from 'vue' - -export default defineComponent({ - setup() { - const msgs = ref([]) - - function showToast() { - msgs.value = [ - { - severity: 'success', - summary: 'Success', - content: 'This is a test text. This is a test text. This is a test text.' - } - ] - } - - return { - msgs, - showToast - } - } -}) -``` +::: ### 每个消息使用单独的超时时间 当设置超时时间模式为 single 时,每个消息使用自身的 life 作为超时时间,如果未设置则按 severity 判断,severity 也未设置时默认超时时间为 5000 毫秒。 - - - Single - - -```html - - - Single - -``` +:::demo -```ts +```vue + + + + Single + + + ``` +::: + ### 服务方式调用 使用服务的方式创建 toast 全局通知。 -click me show simplest toast! -click me show customer toast! -click me close customer toast! -only close first customer toast! - -```html -click me show simplest toast! -click me show customer toast! -click me close customer toast! -only close first customer toast! -``` - -```ts -import { defineComponent, ref } from 'vue' -import { ToastService } from 'devui/toast' +:::demo + +```vue + + + click me show simplest toast! + click me show customer toast! + click me close customer toast! + only close first customer toast! + + + + ``` +::: + ### Toast Api - +| 参数 | 类型 | 默认 | 说明 | 跳转 | +| :--------- | :--------------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------- | +| value | `Array` | -- | 必选,消息内容数组,Message 对象定义见下文 | [基本用法](#基本用法) | +| life | `number` | 5000 | 可选,超时时间,超时后自动消失,鼠标悬停可以阻止消失,单位毫秒。普通、成功、提示类默认为 5000 毫秒,错误、警告类默认为 10000 毫秒 | [超时时间](#超时时间) | +| lifeMode | `string` | global | 可选,超时时间模式,预设值为 global 和 single 。默认为 global,所有消息使用 life 或群组第一个消息的预设超时时间; 设置为 single 时, 每个消息使用自身的超时时间,参见 Message 中的 life 定义 | [每个消息使用单独的超时时间](#每个消息使用单独的超时时间) | +| sticky | `boolean` | false | 可选,是否常驻,默认自动关闭 | | +| style | `object` | - | 可选,样式 | [自定义样式](#自定义样式) | +| styleClass | `string` | - | 可选,类名 | [自定义样式](#自定义样式) | ### Toast Event - +| 参数 | 类型 | 说明 | 跳转 | +| :---------- | :------------------------------ | :--------------------- | :---------------------------- | +| closeEvent | `(message: Message) => void` | 消息关闭回调 | [服务方式调用](#服务方式调用) | +| valueChange | `(messages: Message[]) => void` | 消息关闭后剩余消息回调 | [服务方式调用](#服务方式调用) | ### 接口 & 类型定义 -Message - ```ts export interface Message { severity?: string // 预设值有 common、success、error、warn、info,超时时间参见 life 说明,未设置或非预设值时超时时间为 5000 毫秒,warn 和 error 为 10000 毫秒 @@ -392,220 +500,3 @@ ToastService.open({ xxx }) // 方式2,全局属性 app.config.globalProperties.$toastService.open({ xxx }) ``` - -### Service Api - - - - - -