vue 自定义Toast提示

最新推荐文章于 2025-03-09 19:29:33 发布

ঞ᭄阿້໌ᮩ莲໌້ᮨꦿ

最新推荐文章于 2025-03-09 19:29:33 发布

阅读量355

点赞数

分类专栏： vue web

本文链接：https://blog.youkuaiyun.com/qq_41241504/article/details/125976241

版权

vue.js 前端 javascript

web 同时被 2 个专栏收录

35 篇文章

订阅专栏

vue

17 篇文章

订阅专栏

这篇博客介绍了如何使用纯JavaScript创建一个简单的提示框组件。通过定义样式和函数`Toast`，可以在页面中动态显示提示信息，并设定显示时间。这个提示框具有基本的样式设置，如背景颜色、边框、阴影等，且可以自定义HTML内容和显示时间。示例代码展示了如何调用`Toast`函数来显示指定时间长度的提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id='toast'></div>

  .toast-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: auto;
    padding: 20px;
    background-color: #333;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    text-align: center;
    font-size: 14px;
    transition: opacity .3s;
 color: #fff;
 display: none;
   
  }

提示框方法

Toast(str, options = {}) {
        let {
          time,
          html
        } = options;
        if (!time) time = 1200;
        const toastEl = document.getElementById('toast');
        const className = 'toast-container';
        toastEl.className = className;
        if (html) {
          toastEl.innerHTML = html+str;
        } else {
          if (toastEl.textContent) {
            toastEl.textContent = str;
          } else {
            toastEl.innerText = str;
          }
        }
        toastEl.style='display: block'
        setTimeout(() => {
              toastEl.style='display: none'
        }, time);
      },

调用
time 显示时间
html 看情况自己修改，一般情况下传空

 this.Toast('提示语', {
              time: "1000",
              html: ""
            })