JView UI

Appearance

Notification 组件，用于弹出醒目的通知提醒框。

与 Message 组件类似，也内置了几种基本的通知类型。

四种内置类型 ​

我们提供了 API 形式的通知调用方式，传参是对象式的选项，具体见下方属性。

展开查看代码
vue
<template>
    <j-space wrap>
        <j-button @click="onShowInfo">信息</j-button>
        <j-button @click="onShowSuccess">成功</j-button>
        <j-button @click="onShowWarning">警告</j-button>
        <j-button @click="onShowError">错误</j-button>
    </j-space>
</template>

<script setup lang="ts">
import { notification } from 'jview-ui'

const onShowInfo = () => {
    notification.info({
        title: 'Info Title',
        content: '信则有，不信则无',
    })
}

const onShowSuccess = () => {
    notification.success({
        title: 'Success Title',
        content: '成功是迟早的事情',
    })
}

const onShowWarning = () => {
    notification.warning({
        title: 'Warning Title',
        content: '切忌急功近利',
    })
}

const onShowError = () => {
    notification.error({
        title: 'Error Title',
        content: '凡事三思，否则追悔莫及',
    })
}
</script>
<template>
    <j-space wrap>
        <j-button @click="onShowInfo">信息</j-button>
        <j-button @click="onShowSuccess">成功</j-button>
        <j-button @click="onShowWarning">警告</j-button>
        <j-button @click="onShowError">错误</j-button>
    </j-space>
</template>

<script setup lang="ts">
import { notification } from 'jview-ui'

const onShowInfo = () => {
    notification.info({
        title: 'Info Title',
        content: '信则有，不信则无',
    })
}

const onShowSuccess = () => {
    notification.success({
        title: 'Success Title',
        content: '成功是迟早的事情',
    })
}

const onShowWarning = () => {
    notification.warning({
        title: 'Warning Title',
        content: '切忌急功近利',
    })
}

const onShowError = () => {
    notification.error({
        title: 'Error Title',
        content: '凡事三思，否则追悔莫及',
    })
}
</script>

自定义时长 ​

通过选项中的duration属性设置通知展示的时长，单位是秒，默认值是4.5。

duration设置为0，则不会自动关闭，需要手动执行关闭方法（notification[type](options)的返回值即是关闭方法）。

展开查看代码
vue
<template>
    <j-space wrap>
        <j-button @click="onShowDurationZero">duration=0</j-button>
        <j-button @click="onCloseDurationZero">←关闭它</j-button>
        <j-button @click="onShowDurationOne">duration=1</j-button>
        <j-button @click="onShowDurationTen">duration=10</j-button>
    </j-space>
</template>

<script setup lang="ts">
import { notification } from 'jview-ui'

let updateCount = 0

let hide

const uniqKey = Symbol('key')

const onShowDurationZero = () => {
    hide = notification.info({
        title: '通知标题',
        content: `我不会消失，除非你主动关闭${updateCount > 0 ? `，这是第${updateCount}次更新` : ''}`,
        duration: 0,
        key: uniqKey,
    })
    updateCount++
}

const onCloseDurationZero = () => {
    if (hide) {
        hide()
        updateCount = 0
    }
}

const onShowDurationOne = () => {
    notification.info({
        title: '我很快就会消失',
        content: '1秒消失',
        duration: 1,
    })
}

const onShowDurationTen = () => {
    notification.info({
        title: '我会显示十秒',
        content: '10秒消失',
        duration: 10,
    })
}
</script>
<template>
    <j-space wrap>
        <j-button @click="onShowDurationZero">duration=0</j-button>
        <j-button @click="onCloseDurationZero">←关闭它</j-button>
        <j-button @click="onShowDurationOne">duration=1</j-button>
        <j-button @click="onShowDurationTen">duration=10</j-button>
    </j-space>
</template>

<script setup lang="ts">
import { notification } from 'jview-ui'

let updateCount = 0

let hide

const uniqKey = Symbol('key')

const onShowDurationZero = () => {
    hide = notification.info({
        title: '通知标题',
        content: `我不会消失，除非你主动关闭${updateCount > 0 ? `，这是第${updateCount}次更新` : ''}`,
        duration: 0,
        key: uniqKey,
    })
    updateCount++
}

const onCloseDurationZero = () => {
    if (hide) {
        hide()
        updateCount = 0
    }
}

const onShowDurationOne = () => {
    notification.info({
        title: '我很快就会消失',
        content: '1秒消失',
        duration: 1,
    })
}

const onShowDurationTen = () => {
    notification.info({
        title: '我会显示十秒',
        content: '10秒消失',
        duration: 10,
    })
}
</script>

更新通知标题和内容 ​

如果你希望更新当前的某条通知的标题内容，而不是弹出新的通知，你可以接着往下看了。

当title或content指定为函数类型，并且依赖响应式数据时，对响应式数据的修改可动态反馈到通知标题或内容上。

除此之外，你还可以通过唯一的key属性来实现更新通知标题和内容。

展开查看代码
vue
<template>
    <j-space wrap>
        <j-button @click="onShowInfo">显示通知</j-button>
        <j-button @click="onUpdateByContent">通过 title 和 content 更新</j-button>
        <j-button @click="onUpdateByKey">通过 key 更新</j-button>
    </j-space>
</template>

<script setup lang="ts">
import { notification } from 'jview-ui'
import { ref } from 'vue'

const infoTitle = ref('通知标题')
const infoContent = ref('内容等待更新中...')

const uniqKey = Symbol('key')

const onShowInfo = () => {
    infoTitle.value = '通知标题'
    infoContent.value = '内容等待更新中...'
    notification.info({
        title: () => infoTitle.value,
        content: () => infoContent.value,
        duration: 0,
        key: uniqKey,
    })
}

const onUpdateByContent = () => {
    infoTitle.value = '标题变了'
    infoContent.value = '请耐心等待...'
}

const onUpdateByKey = () => {
    notification.success({
        title: '换成成功类型',
        content: '更新完毕，3秒后关闭',
        duration: 3,
        key: uniqKey,
    })
}
</script>
<template>
    <j-space wrap>
        <j-button @click="onShowInfo">显示通知</j-button>
        <j-button @click="onUpdateByContent">通过 title 和 content 更新</j-button>
        <j-button @click="onUpdateByKey">通过 key 更新</j-button>
    </j-space>
</template>

<script setup lang="ts">
import { notification } from 'jview-ui'
import { ref } from 'vue'

const infoTitle = ref('通知标题')
const infoContent = ref('内容等待更新中...')

const uniqKey = Symbol('key')

const onShowInfo = () => {
    infoTitle.value = '通知标题'
    infoContent.value = '内容等待更新中...'
    notification.info({
        title: () => infoTitle.value,
        content: () => infoContent.value,
        duration: 0,
        key: uniqKey,
    })
}

const onUpdateByContent = () => {
    infoTitle.value = '标题变了'
    infoContent.value = '请耐心等待...'
}

const onUpdateByKey = () => {
    notification.success({
        title: '换成成功类型',
        content: '更新完毕，3秒后关闭',
        duration: 3,
        key: uniqKey,
    })
}
</script>

全局配置方法 ​

通过notification.config(options)配置duration等属性。

下面这段配置的作用是让通知的默认显示时长变为 5 秒。

javascript
notification.config({
    duration: 5
})
notification.config({
    duration: 5
})

值得注意的是：实例选项还是优先于全局配置。

关闭全部通知 ​

通过notification.destroy()关闭所有消息。

展开查看代码
vue
<template>
    <j-space wrap>
        <j-button @click="onShowInfo">信息</j-button>
        <j-button @click="onShowSuccess">成功</j-button>
        <j-button @click="onShowWarning">警告</j-button>
        <j-button @click="onShowError">错误</j-button>
        <j-button @click="onDestroy">全部关闭</j-button>
    </j-space>
</template>

<script setup lang="ts">
import { notification } from 'jview-ui'

const onShowInfo = () => {
    notification.info({
        title: '信息通知',
        content: '这是一条普通的信息通知',
    })
}

const onShowSuccess = () => {
    notification.success({
        title: '成功通知',
        content: '阳光总在风雨后！',
        duration: 0,
    })
}

const onShowWarning = () => {
    notification.warning({
        title: '警告通知',
        content: '防患于未然！',
    })
}

const onShowError = () => {
    notification.error({
        title: '系统错误',
        content: '出错了，请稍后重试！',
    })
}

const onDestroy = () => {
    notification.destroy()
}
</script>
<template>
    <j-space wrap>
        <j-button @click="onShowInfo">信息</j-button>
        <j-button @click="onShowSuccess">成功</j-button>
        <j-button @click="onShowWarning">警告</j-button>
        <j-button @click="onShowError">错误</j-button>
        <j-button @click="onDestroy">全部关闭</j-button>
    </j-space>
</template>

<script setup lang="ts">
import { notification } from 'jview-ui'

const onShowInfo = () => {
    notification.info({
        title: '信息通知',
        content: '这是一条普通的信息通知',
    })
}

const onShowSuccess = () => {
    notification.success({
        title: '成功通知',
        content: '阳光总在风雨后！',
        duration: 0,
    })
}

const onShowWarning = () => {
    notification.warning({
        title: '警告通知',
        content: '防患于未然！',
    })
}

const onShowError = () => {
    notification.error({
        title: '系统错误',
        content: '出错了，请稍后重试！',
    })
}

const onDestroy = () => {
    notification.destroy()
}
</script>

属性 ​

参数说明类型默认值必填
duration通知显示的时长number4.5否
onClose关闭时的回调() => void无否
onClick点击通知时的回调() => void无否
icon通知图标VNode无否
closeIcon自定义关闭图标VNode无否
title通知标题string | VNode | () => string | VNode无否
content通知内容string | VNode | () => string | VNode无否
key当前通知的唯一标志symbol | string | number无否
contentClass定制通知内容元素的 classstring无否
contentStyle定制通知内容的样式CSSProperties无否

Copyright © 2022-2024 All Rights Reserved by Tusi.