寻北

Appearance

Message 消息提示 ​

常用于主动操作后的反馈提示。 与 Notification 的区别是后者更多用于系统级通知的被动提醒。

基础用法 ​

默认情况下在顶部显示并在 3 秒后消失。

Message 在配置上与 Notification 非常类似,注册了一个全局的 createMessage方法用于调用。 Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

<template>
  <div class="flex flex-wrap gap-1">
    <vk-button class="!ml-0"  @click="open">
      Show message
    </vk-button>
    <vk-button class="!ml-0" @click="openVn">VNode</vk-button>
  </div>
</template>

<script lang="ts" setup>
import { h } from 'vue'
import {createMessage} from "xb-element/dist/es/x-element";

const open = () => {
  createMessage({message:'This is a message.'})
}

const openVn = () => {
  createMessage({
    message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
      h('span', null, 'Message can be '),
      h('i', { style: 'color: teal' }, 'VNode'),
    ]),
  })
}
</script>

不同状态 ​

用来显示「成功、警告、消息、错误」类的操作反馈。

当需要自定义更多属性时，Message 也可以接收一个对象为参数。 比如，设置 type 字段可以定义不同的状态，默认为info。 此时正文内容以 message 的值传入。

<template>
  <div class="flex flex-wrap gap-1">
    <vk-button  @click="openSuccess" type="success">Success</vk-button>
    <vk-button  @click="openInfo" type="info">Info</vk-button>
    <vk-button  @click="openWarning" type="warning">Warning</vk-button>
    <vk-button  @click="openDanger" type="danger">Danger</vk-button>
  </div>
</template>
<script lang="ts" setup>
import {createMessage} from "xb-element/dist/es/x-element";

const openSuccess = () => {
  createMessage({message:'This is a message.',type:"success"})
}

const openInfo = () => {
  createMessage({message:'This is a message.',type:"info"})
}

const openWarning = () => {
  createMessage({message:'This is a message.',type:"warning"})
}

const openDanger= () => {
  createMessage({message:'This is a message.',type:"danger"})
}


</script>

可关闭的消息提示 ​

可以添加关闭按钮。

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

<template>
  <div class="flex flex-wrap gap-1">
    <vk-button  @click="openSuccess" type="success">Success</vk-button>
    <vk-button  @click="openInfo" type="info">Info</vk-button>
    <vk-button  @click="openWarning" type="warning">Warning</vk-button>
    <vk-button  @click="openDanger" type="danger">Danger</vk-button>
    <vk-button  @click="openNoAutoClose">Won't close automatically</vk-button>
  </div>
</template>
<script lang="ts" setup>
import {createMessage} from "xb-element/dist/es/x-element";

const openSuccess = () => {
  createMessage({message:'This is a message.',type:"success",showClose:true,duration:3000})
}

const openInfo = () => {
  createMessage({message:'This is a message.',type:"info",showClose:true,duration:3000})
}

const openWarning = () => {
  createMessage({message:'This is a message.',type:"warning",showClose:true,duration:3000})
}

const openDanger= () => {
  createMessage({message:'This is a message.',type:"danger",showClose:true,duration:3000})
}

const openNoAutoClose= () => {
  createMessage({message:'Oops, this is a message that does not automatically close.',type:"info",showClose:true,duration:0})
}


</script>

Message API ​

Message Attributes ​

属性名说明类型默认值
message消息文字'string'| 'VNode'''
type消息类型enum - 'success'| 'info'| 'danger'| 'warning'info
showClose是否显示关闭按钮booleanfalse
duration显示时间，单位为毫秒。 设为 0 则不会自动关闭number3000
offset设置到视口顶部边缘的距离number30