toast 弹窗 内容获取_javascript弹出框

toast 弹窗 内容获取_javascript弹出框使用js封装一个全局Toast提示弹窗组件,不使用UI库exportconstToast={data(){return{}},mounted(){},methods:{//Toast消息提示toast(obj){let{text,duration,img}=obj||{};//obj为字符串typeofobj===’string’&&a

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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: '图片路径'}); // 支持对象形式,自定义图片,文案,过渡时间

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/189694.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 最佳路径分析_最佳路径选择

    最佳路径分析_最佳路径选择最佳路径分析(作者:吴东梅,撰写时间:2019年1月17日)学习了GIS技术,让我们对地理信息系统有了一定的了解,也让我们知道了我们平时常用的导航系统里面的导航最佳路径里面的一些奥妙。现在就让我们了解一下如何制出最佳路径的方法并应用在我们自己的项目中吧!1、 先在SuperMapiDesktop9D把你的地图打开,然后点击上方导航条上面的交通分析,里面有一个拓扑构网,鼠标移到拓扑构网上…

    2022年8月24日
    8
  • 前端面试题汇总

    前端面试题汇总歌谣最全前端面试题(建议收藏,欢迎讨论)【Vue】[vue]从0到1自己构架一个vue项目,说说有哪些步骤、哪些重要插件、目录结构你会怎么组织

    2022年5月6日
    36
  • UML详解之四——活动图[通俗易懂]

    UML详解之四——活动图[通俗易懂]活动图(面向活动的)活动图(ActivityDiagrams)在本质上就是流程图,它很好地描述了系统的活动、判定点、先后顺序和分支等,展现从一个活动到另一个活动的控制流。因此它是一种能够描述系统功能流程的工具也是用例图的很好补充。活动图着重表现从一个活动到另一个活动的控制流,是内部处理驱动的流程。图片来自http://blog.csdn.net/lishehe/article/detai

    2022年5月10日
    36
  • linux 命令

    linux 命令

    2020年11月19日
    212
  • Facebook 秘钥散列

    Facebook 秘钥散列先下载OpenSSL工具执行这个命令keytool-exportcert-aliasandroiddebugkey-keystoredebug.keystore>c:\openssl\bin\debug.txt其中androiddebugkey是你xxx.keystore文件的路径,debug是你.keystore文件的名字然后路径cd到openssl文件夹下的bin目录执行opensslsha1-binarydebug.txt>debug_sha.t

    2022年5月15日
    42
  • 机器学*系列文章索引

    0机器学习简介概念:多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改

    2021年12月30日
    53

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号