toast 弹窗 内容获取_javascript弹出框

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

使用js封装一个全局Toast提示弹窗组件，不使用UI库

export const Toast = { 
   
  data() { 
   
    return { 
   
    }
  },
  mounted() { 
   
  },
  methods: { 
   
    // Toast 消息提示
    toast(obj) { 
   
      let { 
    text, duration, img } = obj || { 
   };
      // obj 为字符串
      typeof obj === 'string' && (text = obj);
      var toast = document.createElement("div");
      let imgDom = document.createElement("img"); // 图片
      let textDom = document.createElement("p");  // 提示文案
      textDom.innerHTML = text || '';
      imgDom.src = img;
      imgDom.style.cssText = "width:50px;";
      toast.style.cssText =
        "font-size: 16px;color: rgb(255, 255, 255);background-color: rgba(0, 0, 0, 0.6);padding: 10px 15px;margin: 0 0 0 -60px;border-radius: 4px;position: fixed;top: 50%;left: 50%;width: 130px;text-align: center;";
      img && toast.appendChild(imgDom);
      toast.appendChild(textDom);
      obj && document.body.appendChild(toast);
      setTimeout(function () { 
   
        var d = 0.5;
        toast.style.transition ="transform " + d + "s ease-in, opacity " + d + "s ease-in";
        toast.style.webkitTransition ="-webkit-transform " + d + "s ease-in, opacity " + d + "s ease-in";
        toast.style.opacity = "0";
        setTimeout(function() { 
   
          obj && document.body.removeChild(toast);
        }, d * 1000);
      }, duration || 3000);
    }
  },
}

使用：这里我是用vue的mixins混入的方式

// 引入
import { 
   Toast} from '../../../components/mixins/toast';
mixins: [Toast],
// 调用
this.toast('暂无消息'); // 直接传字符串
this.toast({ 
   text：'暂无消息', duration: 2000, img: '图片路径'}); // 支持对象形式，自定义图片，文案，过渡时间