小提示（showTip）

顶层小提示，生命周期一般最短，层级最高。

一、场景和形态

弹框选择之一，特点轻量级、自动关闭无需交互无回调，无模态。 支持warning、info、error、success标准组合。

UI效果

下面是自定义了logo之后的效果

现场演示

演示代码如下：

<div @click="show"><button id="tip-btn" style="border:1px solid #999;padding:10px 20px;margin:6px;">点我弹出 showTip</button></div>

<!--vitepress默认会拦截<script>代码,这里采用vue，setup是vue的语法糖，用于确保在DOM 渲染之前执行-->
<script setup>
    import { init,showTip } from 'axue';
    init()   //如果全局注册过，这里最好不要重复注册，虽然除了打印警告不会有真实负面影响
    const show = () => {
      showTip.send('Hello, axue components!');
    };
</script>

二、使用方式

发送tip消息

import {showTip} from "axue";

/**
    默认1.5秒后自动消失
    默认不指定提示类型，
*/
showTip.send('Hello, axue!');

指定提示类型

showTip.send，左边默认显示logo图标，业务含义不清晰，也可以指定类型

showTip.info('Hello, axue!');    //普通提示图标
showTip.warning('警告, axue!');  //警告图标
showTip.error('错误, axue!');    //错误图标
showTip.success('成功, axue!');  //成功图标

提前关闭tip

/**
    不等内部逻辑自动关闭，而是从外围主动关闭
    实际上，.info、.warning等方法会在默认延迟后自动调用.close()
*/
showTip.close();

高级配置

如果默认的样式背景、显示时长不能满足需求，可以使用配置能力

使用方法

import {showTip} from "axue";

//在调用前，进行全局配置，对后续所有类型的tip均有效
showTip.config({
    duration:1000,
    backgroundColor:"#eee"
})

//发送提示，此时将变成1s后自动关闭
showTip.info('Hello, axue!');

全局配置项

内联属性	说明	类型	默认值
duration	弹出到自动消失的时间间隔毫秒数	string	1500
backgroundColor	背景色，符合16进制颜色字符串	string	"#ffffffee"