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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • sqlmap下载安装教程_termux 安装kali

    sqlmap下载安装教程_termux 安装kali第一步:下载python:https://www.python.org/downloads/(这里有python各种版本,但是一般建议安装3和2.7)sqlmap:https://github

    2022年8月5日
    4
  • Ubuntu安装ssh服务详细过程[通俗易懂]

    SSH服务简介(来自百度百科)SSH为SecureShell的缩写,由IETF的网络小组(NetworkWorkingGroup)所制定;SSH为建立在应用层基础上的安全协议。SSH是较可靠,专为远程登录会话和其他网络服务提供安全性的协议。利用SSH协议可以有效防止远程管理过程中的信息泄露问题。SSH最初是UNIX系统上的一个程序,后来又迅速扩展到其他操作平台。SSH在正确使用时可弥补网络中的漏洞。SSH客户端适用于多种平台。几乎所有UNIX平台—包括HP-UX、Linux、.

    2022年4月6日
    56
  • java的单例模式代码_单例模式例子

    java的单例模式代码_单例模式例子题目:请设计AppConfig类,并在AppConfig类中用main函数测试判断是否只有一个实例对象。(提示:基于static、private、构造函数使用单例模式)代码:publicclassAppConfig{privateinta;//检验是否为同一实例privatestaticAppConfigapp=newAppConfig();//设置私有静态的初始化对象,使得通过getApp生成的对象是同

    2022年8月11日
    3
  • 从零开始学习UCOSII操作系统15–总结篇[通俗易懂]

    从零开始学习UCOSII操作系统15–总结篇[通俗易懂]从零开始学习UCOSII操作系统15–总结篇前言:在大学的时候,我们班级上面都有很多人觉得学习UCOSII(包括UCOSIII)是没什么厉害的,因为很多人都喜欢去学习Linux操作系统,但是,但是,真实的对整个UCOSII操作系统进行学习,我可以保证,如果你是基于源码级别的阅读的话,绝对是不简单的。仅仅是调用几个API的话,是永远用不好UCOSII的操作系统的。还有你真正学通了UCO

    2022年5月4日
    281
  • JDK1.8关于运行时常量池, 字符串常量池的要点[通俗易懂]

    JDK1.8关于运行时常量池, 字符串常量池的要点[通俗易懂]网上关于jdk1.8的各种实验,结论鱼龙混杂,很多都相矛盾,网上有的实验也被后人测试出了不同的结果很多都分辨不了真假,这里记录一下网络上正确的结论,欢迎指正!首先自行区分运行时常量池与Class文件常量池(静态常量池)的概念,JVM内存模型,方法区与永久代的区别,有些在我的其他博客有介绍,连接在文尾在JDK1.7之前运行时常量池逻辑包含字符串常量池存放在…

    2022年7月28日
    1
  • 助臂_有所臂助

    助臂_有所臂助第十章助臂  一个好汉三个帮,程序员同样如此。  我怀着异样的心情去了天龙。也许是ANGEL的出现感染了我,给我感觉到了压迫,我比往常更努力的投入到工作中去,我必须尽快完成眼前这个工程,然后全心投入到智能杀毒软件的研究中去。  思考再三后,我还是把DENNIS信里的内容告诉了李珏和赵思聪,他两当场就被震住了。  “真的可能写出智能化的病毒吗?”赵思聪不可思议的问道。  我点了点头,无奈的说道:

    2022年8月31日
    2

发表回复

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

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