selab-ui

Appearance

Message(消息) ​

基础用法 ​

从 selab-ui 引入Message 注册了一个全局方法 $seMsg，也可以单独引入。

js
import { SeMsg } from 'selab-ui';

SeMsg 方法接受一个 option对象 作为其参数，可以通过设置其 message 属性设置文本内容，也可以传入一个 VNode，或一个返回值为 VNode 的函数。

当需要传入的属性只有 message 时，可以直接传入 message。

当使用 VNode 时，建议设置 VNode 高度固定，因为弹窗的高度是在渲染前计算的，不固定的高度会导致弹窗之间覆盖、icon错位。

基本使用
<template>
  <button @click="msg('文本')">文本</button>
  <button
    @click="
      msg(
        createVNode(
          'button',
          {
            class: 'buttonVNode',
            style: {
              'margin-right': '10px',
              width: '100px',
              height: '60px',
              'background-color': '#6c9dff',
              color: '#fff',
              'font-size': '12px',
              'border-radius': '5px',
              border: 'none',
              outline: 'none',
              cursor: 'pointer',
            },
            ...event,
          },
          '点我关闭',
        ),
      )
    "
  >
    VNode
  </button>
</template>

<script setup lang="ts">
import { createVNode, VNode } from "vue";
import { SeMsg } from "selab-ui";
function msg(msg: string | VNode | (() => VNode)) {
  SeMsg(msg);
}
const event = {
  onmouseenter: () => {
    document.querySelectorAll<HTMLButtonElement>(
      ".buttonVNode",
    )[0].style.backgroundColor = "#6c89ff";
  },
  onmouseleave: () => {
    document.querySelectorAll<HTMLButtonElement>(
      ".buttonVNode",
    )[0].style.backgroundColor = "#6c9dff";
  },
  onclick: () => {
    console.log("VNode Button Click");
    SeMsg.closeAll();
  },
};
</script>

<style lang="less" scoped>
button,
.button {
  margin-right: 10px;
  width: 60px;
  height: 30px;
  background-color: #6c9dff;
  color: #fff;
  font-size: 12px;
  border-radius: 5px;
  border: none;
  outline: none;
  cursor: pointer;
  &:hover {
    background-color: #6c89ff;
  }
}
</style>

不同样式 ​

通过设置 type 的值，可以改变样式。有四种不同的样式。也可以通过调用 seMag 上的方法调用不同样式。



基本使用
<template>
  <button @click="msg1('success')">成功</button>
  <button @click="msg1('warning')">警告</button>
  <button @click="msg1('danger')">错误</button>
  <button @click="msg1('info')">信息</button>
  <br /><br />
  <button @click="msg2('success')">成功</button>
  <button @click="msg2('warning')">警告</button>
  <button @click="msg2('danger')">错误</button>
  <button @click="msg2('info')">信息</button>
</template>

<script setup lang="ts">
import { SeMsg } from "selab-ui";
function msg1(type: "success" | "warning" | "danger" | "info") {
  SeMsg({
    message: type,
    type,
  });
}
function msg2(type: "success" | "warning" | "danger" | "info") {
  SeMsg[type](type);
}
</script>

<style lang="less" scoped>
button {
  margin-right: 10px;
  width: 60px;
  height: 30px;
  background-color: #6c9dff;
  color: #fff;
  font-size: 12px;
  border-radius: 5px;
  border: none;
  outline: none;
  cursor: pointer;
  &:hover {
    background-color: #6c89ff;
  }
}
</style>

停留时常 ​

通过设置 duration 可以设置消息的停留时常，默认为3000ms。当设置为 0 时，将不会自动消失。

基本使用
<template>
  <button @click="msg(1000, '1s')">1s</button>
  <button @click="msg(2000, '2s')">2s</button>
  <button @click="msg(3000, '3s')">3s</button>
  <button @click="msg(0, '停留')">停留</button>
</template>

<script setup lang="ts">
import { SeMsg } from "selab-ui";
function msg(duration: number, msg: string) {
  SeMsg({
    message: msg,
    duration,
    showClose: true,
  });
}
</script>

<style lang="less" scoped>
button {
  margin-right: 10px;
  width: 60px;
  height: 30px;
  background-color: #6c9dff;
  color: #fff;
  font-size: 12px;
  border-radius: 5px;
  border: none;
  outline: none;
  cursor: pointer;
  &:hover {
    background-color: #6c89ff;
  }
}
</style>

图标 ​

通过设置 icon 属性，可以手动设置其前置图标，当传值为空字符串时，将不显示图标。目前只有四种图标，与样式对应，当没有传递 icon 属性时，属性将与样式对应。

基本使用
<template>
  <button @click="msg('success')">成功icon</button>
  <button @click="msg('warning')">警告icon</button>
  <button @click="msg('danger')">错误icon</button>
  <button @click="msg('info')">信息icon</button>
  <button @click="msg()">无icon</button>
</template>

<script setup lang="ts">
import { SeMsg } from "selab-ui";
function msg(icon?: "success" | "warning" | "danger" | "info") {
  SeMsg({
    message: "icon",
    icon,
  });
}
</script>

<style lang="less" scoped>
button {
  margin-right: 10px;
  width: 60px;
  height: 30px;
  background-color: #6c9dff;
  color: #fff;
  font-size: 12px;
  border-radius: 5px;
  border: none;
  outline: none;
  cursor: pointer;
  &:hover {
    background-color: #6c89ff;
  }
}
</style>

可关闭的消息 ​

默认的 Message 不能手动关闭。 将属性 showClose 设置为 true 将会显示关闭按钮。

基本使用
<template>
  <button @click="msg(true)">可关闭</button>
  <button @click="msg(false)">不可关闭</button>
</template>

<script setup lang="ts">
import { SeMsg } from "selab-ui";
function msg(showClose: boolean) {
  SeMsg({
    message: showClose ? "可关闭" : "不可关闭",
    showClose,
  });
}
</script>

<style lang="less" scoped>
button {
  margin-right: 10px;
  width: 60px;
  height: 30px;
  background-color: #6c9dff;
  color: #fff;
  font-size: 12px;
  border-radius: 5px;
  border: none;
  outline: none;
  cursor: pointer;
  &:hover {
    background-color: #6c89ff;
  }
}
</style>

分组消息合并 ​

当 group 不为 false， message 的值为 string 且相同或 VNode 且 key 相同，type duration icon showClose 的值相同，且未传入 onCloseClick beforeClose 时，消息会自动合并。

基本使用
<template>
  <button @click="msg1">合并</button>
  <button @click="msg2">不合并</button>
</template>

<script setup lang="ts">
import { SeMsg } from "selab-ui";
function msg1() {
  SeMsg({
    message: "分组合并",
  });
}
function msg2() {
  SeMsg({
    message: "分组不合并",
    group: false,
  });
}
</script>

<style lang="less" scoped>
button {
  margin-right: 10px;
  width: 60px;
  height: 30px;
  background-color: #6c9dff;
  color: #fff;
  font-size: 12px;
  border-radius: 5px;
  border: none;
  outline: none;
  cursor: pointer;
  &:hover {
    background-color: #6c89ff;
  }
}
</style>

尺寸 ​

通过设置 size 属性，可以改变尺寸。有四种不同的尺寸。

基本使用
<template>
  <button @click="msg('mini')">小小</button>
  <button @click="msg('small')">小</button>
  <button @click="msg('default')">默认</button>
  <button @click="msg('large')">大</button>
</template>

<script setup lang="ts">
import { SeMsg } from "selab-ui";
function msg(size: "mini" | "small" | "default" | "large") {
  SeMsg({
    message: size,
    size: size,
  });
}
</script>

<style lang="less" scoped>
button {
  margin-right: 10px;
  width: 60px;
  height: 30px;
  background-color: #6c9dff;
  color: #fff;
  font-size: 12px;
  border-radius: 5px;
  border: none;
  outline: none;
  cursor: pointer;
  &:hover {
    background-color: #6c89ff;
  }
}
</style>

Message 参数 ​

参数名类型默认值描述跳转 Demo
messagestring | VNode | () => VNodenull内容基础用法
type'success' | 'warning' | 'danger' | 'info''info'样式不同样式
durationnumber3000停留时间(ms)停留时常
icon'success' |'warning' |'danger' |'info''info'图标图标
showClosebooleanfalse展示关闭按钮可关闭的消息
groupbooleantrue是否合并相同消息为一个群组分组消息合并
size'mini' | 'small' | 'default' | 'large''default'是否合并相同消息为一个群组尺寸
beforeClose(close) => voidnull关闭前的回调，会拦截全部关闭行为
onCloseClick() => voidnull用户点击关闭事件

Message实例方法 ​

参数名描述类型
close关闭当前的 Message() => void

Message静态方法 ​

参数名描述类型
closeAll关闭当前全部 Message() => void

Released under the MIT License.

Copyright © 2023-present The Muse Catcher