V3 Element

Appearance

On this page

Message 消息提示 ​

常用于主动操作后的反馈提示

基础用法 ​

从顶部出现，3 秒后自动消失。注册了一个 createMessage 方法用于调用。 Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

<template>
  <div class="basic block">
    <vk-button type="primary" @click="open">创建一条消息</vk-button>
    <vk-button @click="open2">创建支持 VNode 的消息</vk-button>
  </div>
</template>

<script setup>
import { h } from 'vue';
import { createMessage } from '@/components/Message';

const open = () => {
  createMessage({ message: 'hello world' });
};
const open2 = () => {
  createMessage({ message: h('b', 'this is bold') });
};
</script>

不同状态 ​

用来显示「成功、警告、消息、错误」类的操作反馈。设置 type 字段可以定义不同的状态，默认为 info。

<template>
  <div class="basic block">
    <vk-button @click="open('success')">Success</vk-button>
    <vk-button @click="open('info')">Info</vk-button>
    <vk-button @click="open('warning')">warning</vk-button>
    <vk-button @click="open('danger')">Danger</vk-button>
  </div>
</template>

<script setup>
import { createMessage } from '@/components/Message';

const open = (type) => {
  createMessage({ message: 'hello world', type });
};
</script>

可关闭的消息提示 ​

可以添加关闭按钮。

默认的 Message 是不可以被人工关闭的。 如果你需要手动关闭功能，你可以把 showClose 设置为 true，Message 拥有可控的 duration， 默认的关闭时间为 3000 毫秒，当把这个属性的值设置为 0 便表示该消息不会被自动关闭。

<template>
  <div class="basic block">
    <vk-button @click="open">可关闭消息</vk-button>
  </div>
</template>

<script setup>
import { createMessage } from '@/components/Message';

const open = () => {
  createMessage({ message: 'hello world', showClose: true, duration: 0 });
};
</script>

单独引用 ​

ts
import { createMessage } from 'v3-element';

API ​

Message 配置项 ​

使用 createMessage 创建信息，它接受一个 Object，以下是 Object 中的属性列表。

名称说明类型默认值
message消息文字string | VNode-
type消息类型success | info | warning | dangerinfo
duration显示时间，单位为毫秒。 设为 0 则不会自动关闭number3000
showClose是否显示关闭按钮booleanfalse
offset距离上一个 Message 之间的间隔number20
transitionName动画名称stringfade-up

Message 方法 ​

调用 createMessage 会返回当前 Message 的实例。 如果需要手动关闭实例，可以调用它的 destroy 方法。

名称描述类型
destroy关闭当前的 Message() => void