更新记录

1.0.2（2024-12-19） 下载此版本

修改优化层级问题

1.0.1（2024-12-17） 下载此版本

修改优化

1.0.0（2024-12-17） 下载此版本

首次更新

平台兼容性

dui-toast 消息提示、加载提示、消息提醒

组件名：dui-toast

一个好用的，用于消息提示、加载提示、消息提醒的组件

基本用法

在 template 中直接使用组件，通过ref引用模版调用showToast开启、closeToast关闭消息提示。

<template>
    <dui-toast ref="toast"></dui-toast>
</template>

vue3中：

const toast = ref(null);
onMounted(() => {
    //自定义样式
    toast.value.showToast({
        content:'提交失败，已经超过最大期限！',
        color:'#ff3e3e',
        backgroundColor:'#ffeaed',
        border:'1px solid #f89',
    })

    toast.value.showToast({
        content:'提交成功!  注意，我们将在7天内将验证您的信息，请注意保持电话畅通，谢谢！',
    })

    //定义出现位置
    toast.value.showToast({
        content:'提交成功！',
        bottom:'30px',
    })

    //可直接设置提示文本
    toast.value.showToast('可直接设置提示文本！')
});

vue2中：

mounted() {
    this.$refs.toast.showToast('我们已收到留言，感谢您的反馈！')
}

方法

showToast参数为object, 其属性值如下：

除上述属性之外，其他css属性均可设置，如fontSize、background、padding、top、left等，样式高度自定义