VitePressMessage 提示
用于页面中展示重要的提示信息。
基础用法
<template>
<ZgButton @click="crtMsg">message</ZgButton>
</template>
<script lang="ts" setup>
import { createMessage } from '@/index'
import { h } from 'vue'
const types = ['success', 'info', 'warning', 'error']
let index = 0
const crtMsg = () => {
const instance = createMessage({
message: '这个常规信息！',
type: types[index % 5] as any,
offset: 10,
showIcon: true,
showClose: true,
})
const instance2 = createMessage({
message: h('p', null, [h('span', null, 'Message can be '), h('i', { style: 'color: teal' }, 'VNode')]),
type: types[index % 5] as any,
offset: 10,
showIcon: true,
showClose: true,
})
console.log('instance:', instance)
console.log('instance2:', instance2)
index++
}
</script>
<style>
.block {
margin-bottom: 10px;
width: 60%;
}
</style><template>
<ZgButton @click="crtMsg">message</ZgButton>
</template>
<script lang="ts" setup>
import { createMessage } from '@/index'
import { h } from 'vue'
const types = ['success', 'info', 'warning', 'error']
let index = 0
const crtMsg = () => {
const instance = createMessage({
message: '这个常规信息！',
type: types[index % 5] as any,
offset: 10,
showIcon: true,
showClose: true,
})
const instance2 = createMessage({
message: h('p', null, [h('span', null, 'Message can be '), h('i', { style: 'color: teal' }, 'VNode')]),
type: types[index % 5] as any,
offset: 10,
showIcon: true,
showClose: true,
})
console.log('instance:', instance)
console.log('instance2:', instance2)
index++
}
</script>
<style>
.block {
margin-bottom: 10px;
width: 60%;
}
</style>不同状态
用来显示「成功、警告、消息、错误」类的操作反馈。
<template>
<span v-for="item in types" :key="item">
<ZgButton style="margin-right: 10px" @click="crtMsg(item)">{{ item }}</ZgButton>
</span>
</template>
<script lang="ts" setup>
import { createMessage, type FeedbackType } from '@/index'
const types = ['success', 'info', 'warning', 'error']
const crtMsg = (type: string) => {
createMessage({
message: '这个常规信息！',
type: type as FeedbackType,
showIcon: true,
showClose: true,
})
}
</script>
<style>
.block {
margin-bottom: 10px;
width: 60%;
}
</style><template>
<span v-for="item in types" :key="item">
<ZgButton style="margin-right: 10px" @click="crtMsg(item)">{{ item }}</ZgButton>
</span>
</template>
<script lang="ts" setup>
import { createMessage, type FeedbackType } from '@/index'
const types = ['success', 'info', 'warning', 'error']
const crtMsg = (type: string) => {
createMessage({
message: '这个常规信息！',
type: type as FeedbackType,
showIcon: true,
showClose: true,
})
}
</script>
<style>
.block {
margin-bottom: 10px;
width: 60%;
}
</style>Icon Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| message | 消息文字 | string | VNode | - |
| duration | 显示时间，单位为毫秒。 设为 0 则不会自动关闭 | number | 3000 |
| showClose | 是否显示关闭按钮 | boolean | - |
| showIcon | 是否显示类型图标 | boolean | - |
| type | 消息类型 | enum - 'success'| 'warning'| 'error'| 'info' | info |
| offset | Message 距离窗口顶部的偏移量 | number | 20 |