toast 弹窗 js

使用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: '图片路径'}); // 支持对象形式，自定义图片，文案，过渡时间

---