JView UI

Appearance

Message 组件，用于弹出全局性的消息提示。

Message 组件预设了几种基本的消息类型，可满足大部分使用场景，同时也提供了丰富的定制能力。

四种预设的消息类型 ​

我们提供了 API 形式的消息调用方式，传参可以是完整的选项，也可以采用双参数的方式（第一个参数是内容，第二个参数可选，为剩余的选项）。

  • 信息提示：message.info(options) 或 message.info(content, [options])
  • 成功提示：message.success(options) 或 message.success(content, [options])
  • 警告提示：message.warning(options) 或 message.warning(content, [options])
  • 错误提示：message.error(options) 或 message.error(content, [options])

PS: options 支持的属性见 API Options

展开查看代码
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 { message } from 'jview-ui'

const onShowInfo = () => {
    message.info('这是一条普通的信息提示')
}

const onShowSuccess = () => {
    message.success('阳光总在风雨后！')
}

const onShowWarning = () => {
    message.warning('防患于未然！')
}

const onShowError = () => {
    message.error('出错了，请稍后重试！')
}
</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 { message } from 'jview-ui'

const onShowInfo = () => {
    message.info('这是一条普通的信息提示')
}

const onShowSuccess = () => {
    message.success('阳光总在风雨后！')
}

const onShowWarning = () => {
    message.warning('防患于未然！')
}

const onShowError = () => {
    message.error('出错了，请稍后重试！')
}
</script>

加载提示 ​

加载提示：message.loading(options) 或 message.loading(content, [options])

展开查看代码
vue
<template>
    <j-space>
        <j-button @click="onShowLoading">显示加载状态</j-button>
    </j-space>
</template>

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

const onShowLoading = () => {
    const hide = message.loading('加载中', { duration: 0 })
    setTimeout(() => {
        hide()
    }, 5000)
}
</script>
<template>
    <j-space>
        <j-button @click="onShowLoading">显示加载状态</j-button>
    </j-space>
</template>

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

const onShowLoading = () => {
    const hide = message.loading('加载中', { duration: 0 })
    setTimeout(() => {
        hide()
    }, 5000)
}
</script>

设置时长 ​

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

duration设置为0，则不会自动关闭，需要手动执行关闭方法（message.loading的返回值即是关闭方法，这也适用于其他几种类型）。

展开查看代码
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 { message } from 'jview-ui'

let updateCount = 0

let hide

const uniqKey = Symbol('key')

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

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

const onShowDurationOne = () => {
    message.info('1秒消失', { duration: 1 })
}

const onShowDurationTen = () => {
    message.info({
        content: '我会显示十秒',
        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 { message } from 'jview-ui'

let updateCount = 0

let hide

const uniqKey = Symbol('key')

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

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

const onShowDurationOne = () => {
    message.info('1秒消失', { duration: 1 })
}

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

更新消息内容 ​

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

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

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

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

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

const loadingText = ref('等待更新中...')

const uniqKey = Symbol('key')

const onShowLoading = () => {
    loadingText.value = '等待更新中...'
    message.loading(() => loadingText.value, { duration: 0, key: uniqKey })
}

const onUpdateByContent = () => {
    loadingText.value = '请耐心等待...'
}

const onUpdateByKey = () => {
    message.success('更新完毕，3秒后关闭', { duration: 3, key: uniqKey })
}
</script>
<template>
    <j-space wrap>
        <j-button @click="onShowLoading">显示 loading</j-button>
        <j-button @click="onUpdateByContent">通过 content 更新</j-button>
        <j-button @click="onUpdateByKey">通过 key 更新</j-button>
    </j-space>
</template>

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

const loadingText = ref('等待更新中...')

const uniqKey = Symbol('key')

const onShowLoading = () => {
    loadingText.value = '等待更新中...'
    message.loading(() => loadingText.value, { duration: 0, key: uniqKey })
}

const onUpdateByContent = () => {
    loadingText.value = '请耐心等待...'
}

const onUpdateByKey = () => {
    message.success('更新完毕，3秒后关闭', { duration: 3, key: uniqKey })
}
</script>

Promise 和 await 的支持 ​

Message API 的返回值除了是一个关闭的方法外，同时也是一个PromiseLike对象，这就保证了它像Promise一样可以使用.then(onfulfilled)方法，也可以和await一起使用。

PS: Promise 状态转变为 fulfilled，意味着消息已经被关闭。

展开查看代码
vue
<template>
    <j-space>
        <j-button @click="onShowLoading">Promise用法</j-button>
    </j-space>
</template>

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

const onShowLoading = async () => {
    await message.loading('加载中')
    await message.success('加载完成')
    await message.info('我是一个信息提示')
    message.warning('我是一个警告提示').then(() => {
        message.error('我是一个错误提示')
    })
}
</script>
<template>
    <j-space>
        <j-button @click="onShowLoading">Promise用法</j-button>
    </j-space>
</template>

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

const onShowLoading = async () => {
    await message.loading('加载中')
    await message.success('加载完成')
    await message.info('我是一个信息提示')
    message.warning('我是一个警告提示').then(() => {
        message.error('我是一个错误提示')
    })
}
</script>

全局配置方法 ​

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

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

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

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

关闭全部消息 ​

通过message.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 { message } from 'jview-ui'

const onShowInfo = () => {
    message.info('这是一条普通的信息提示')
}

const onShowSuccess = () => {
    message.success('阳光总在风雨后！')
}

const onShowWarning = () => {
    message.warning('防患于未然！')
}

const onShowError = () => {
    message.error('出错了，请稍后重试！')
}

const onDestroy = () => {
    message.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 { message } from 'jview-ui'

const onShowInfo = () => {
    message.info('这是一条普通的信息提示')
}

const onShowSuccess = () => {
    message.success('阳光总在风雨后！')
}

const onShowWarning = () => {
    message.warning('防患于未然！')
}

const onShowError = () => {
    message.error('出错了，请稍后重试！')
}

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

API Options ​

参数说明类型默认值必填
duration消息提示显示的时长number3否
onClose关闭时的回调() => void无否
onClick点击消息时的回调() => void无否
icon图标VNode无否
content消息内容string | VNode | () => string | VNode无否
key当前信息提示的唯一标志symbol | string | number无否
wrapperClass定制消息包裹元素的 classstring无否
wrapperStyle定制消息包裹元素的样式CSSProperties无否
contentClass定制消息内容元素的 classstring无否
contentStyle定制消息内容的样式CSSProperties无否

Copyright © 2022-2024 All Rights Reserved by Tusi.