diff --git a/.gitignore b/.gitignore index 62f10f64..a423cebe 100644 --- a/.gitignore +++ b/.gitignore @@ -25,3 +25,4 @@ yarn-error.log* *.njsproj *.sln *.sw* +.history diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 1b70f0ed..b1bb91a0 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -283,6 +283,9 @@ export default defineConfig({ }, { link: "/component/toast", text: "Toast 轻提示" + }, { + link: "/component/notify", + text: "Notify 消息通知" }, { link: "/component/tooltip", text: "Tooltip 文字提示" diff --git a/docs/component/notify.md b/docs/component/notify.md new file mode 100644 index 00000000..59899618 --- /dev/null +++ b/docs/component/notify.md @@ -0,0 +1,227 @@ + + +# Notify 消息通知 + +## 基本用法 + +需要在页面中引入该组件,作为挂载点。 +```html + +``` + +```ts +import { useNotify } from '@/uni_modules/wot-design-uni' + +const { showNotify, closeNotify } = useNotify('notify') + +// 3 秒后自动关闭 +showNotify('通知内容') + +// 主动关闭 +closeNotify() +``` + +## 通知类型 +支持 `primary`、`success`、`warning`、`danger` 四种通知类型,默认为 `danger`。 +```ts +// 主要通知 +showNotify({ type: 'primary', message: '通知内容' }) + +// 成功通知 +showNotify({ type: 'success', message: '通知内容' }) + +// 危险通知 +showNotify({ type: 'danger', message: '通知内容' }) + +// 警告通知 +showNotify({ type: 'warning', message: '通知内容' }) +``` + +## 自定义通知 + +```ts +showNotify({ + message: '自定义颜色', + color: '#ad0000', + background: '#ffe1e1' +}) + +showNotify({ + message: '自定义位置', + position: 'bottom' +}) + +showNotify({ + message: '自定义时长', + duration: 1000 +}) +``` + +## 使用 Notify 组件 +如果需要在 Notify 内嵌入组件或其他自定义内容,可以直接使用 Notify 组件,并使用默认插槽进行定制。 +```html +使用 Notify 组件调用 + + + 成功通知 + +``` +```ts +import { ref, onMounted } from 'vue' + +let timer: ReturnType +export default { + setup() { + const visible = ref(false) + const safeHeight = ref(0) + + const showNotify = () => { + visible.value = true + if (timer) clearTimeout(timer) + timer = setTimeout(() => { + visible.value = false + }, 3000) + } + + onMounted(() => { + // #ifdef H5 + safeHeight.value = 44 + // #endif + }) + + return { + visible, + showNotify, + safeHeight + } + } +} +``` + +## 进阶`demo` +```vue +// App.vue + + + +``` +```vue +// /components/layout/layout.vue + + + + + +``` +```vue +// /pages/user.vue + + + + + +``` + +## Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ------------ | ----------------------------------------------------------------| ------- | ------------------------- | ------------ | -------- | +| type | 类型 | NotifyType | `primary` `success` `warning` `danger` | `danger` | - | +| message | 展示文案,支持通过`\n`换行 | string | - | - | - | +| duration | 展示时长(ms),值为 0 时,notify 不会消失 | number | - | `3000` | - | +| zIndex | 层级 | number | - | `99` | - | +| position | 弹出位置 | NotifyPosition | `top` `bottom` | `top` | - | +| color | 字体颜色 | string | - | - | - | +| background | 背景颜色 | string | - | - | - | +| safeHeight | 顶部安全高度 | number / string | - | - | - | +| selector | 指定唯一标识 | number | - | - | - | + +## Events +| 事件名 | 说明 | 参数 | 最低版本 | +| -------- | ----------------------------------------- | ------- | -------- | +| click | 点击时的回调函数 | (event: MouseEvent) => void | - | +| closed | 关闭时的回调函数 | () => void | - | +| opened | 展示后的回调函数 | () => void | - | + +## Methods + +| 方法名称 | 说明 | 参数 | 最低版本 | +| -------- | ----------------------------------------- | ------- | -------- | +| showNotify | 展示提示 | `NotifyOptions` / `string` | - | +| closeNotify | 关闭提示 | - | - | +| setNotifyDefaultOptions | 修改默认配置,影响所有的 `showNotify` 调用 | `NotifyOptions` | - | +| resetNotifyDefaultOptions | 重置默认配置,影响所有的 `showNotify` 调用 | - | - | + +## NotifyOptions +调用 `showNotify`、 `setNotifyDefaultOptions` 等方法时,支持传入以下选项: +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ------------ | ----------------------------------------------------------------| ------- | ------------------------- | ------------ | -------- | +| type | 类型 | NotifyType | `primary` `success` `warning` `danger` | `danger` | - | +| message | 展示文案,支持通过`\n`换行 | string | - | - | - | +| duration | 展示时长(ms),值为 0 时,notify 不会消失 | number | - | `3000` | - | +| zIndex | 层级 | number | - | `99` | - | +| position | 弹出位置 | NotifyPosition | `top` `bottom` | `top` | - | +| color | 字体颜色 | string | - | - | - | +| background | 背景颜色 | string | - | - | - | +| safeHeight | 顶部安全高度 | number / string | - | - | - | +| onClick | 点击时的回调函数 | (event: MouseEvent) => void | - | - | - | +| onClosed | 关闭时的回调函数 | () => void | - | - | - | +| onOpened | 展示后的回调函数 | () => void | - | - | - | \ No newline at end of file diff --git a/src/components/page-wraper/page-wraper.vue b/src/components/page-wraper/page-wraper.vue index 17b88638..0054652f 100644 --- a/src/components/page-wraper/page-wraper.vue +++ b/src/components/page-wraper/page-wraper.vue @@ -15,6 +15,7 @@ --> + diff --git a/src/uni_modules/wot-design-uni/index.ts b/src/uni_modules/wot-design-uni/index.ts index 77333665..e8a8db52 100644 --- a/src/uni_modules/wot-design-uni/index.ts +++ b/src/uni_modules/wot-design-uni/index.ts @@ -12,7 +12,9 @@ export { useToast } from './components/wd-toast' // Messageb export { useMessage } from './components/wd-message-box' -// Loading +// Notify +export * from './components/wd-notify' + export { dayjs } from './components/common/dayjs' export * as CommonUtil from './components/common/util'