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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Java多线程常用面试题

    Java多线程常用面试题一、什么是多线程?线程是指程序在运行的过程中,能够执行程序代码的一个执行单元。Java语言中,线程有五种状态:新建、就绪、运行、阻塞及死亡。二、线程与进程的区别?进程是指一段正在执行的程序。而线程有时也被称为轻量级进程,它是程序执行的最小单元,一个进程可以拥有多个线程,各个线程之间共享程序的内存空间(代码段、数据段、堆空间)及一些…

  • ClientScriptManager.RegisterStartupScript.

    ClientScriptManager.RegisterStartupScript.当我们要注册一个在页面启动的脚本时,我们会用ClientScriptManager.RegisterStartupScript。比如<%@PageLanguage=”C#”%><!DOCTYPEhtmlPUBLIC”-//W3C//DTDXHTML1.0Transitional//EN””http://www.w3.org/TR/xhtml1/D…

  • QACTION_QA百科

    QACTION_QA百科【详细描述】       QAction类提供了抽象的用户界面action,这些action可以被放置在窗口部件中。       应用程序可以通过菜单,工具栏按钮以及键盘快捷键来调用通用的命令。由于用户期望每个命令都能以相同的方式执行,而不管命令所使用的用户界面,这个时候使用action来表示这些命令就显得十分有用。        Actions可以被添加到菜单和工具栏中,并…

  • pc软件开发用什么语言_java web应用开发

    pc软件开发用什么语言_java web应用开发Windows10SDK预览版需要10030以上版本号的Win10预览版系统才能使用。之前我安装的9926的系统,然后安装VS2015CTP6,再装Win10SDK,但是在新建项目后,

  • 数据结构学习

    数据结构学习

  • 如何解决高并发,秒杀问题[通俗易懂]

    如何解决高并发,秒杀问题[通俗易懂]相信不少人会被这个问题困扰,分享大家一篇这样的文章,希望能够帮到你!一、秒杀业务为什么难做?1)im系统,例如qq或者微博,每个人都读自己的数据(好友列表、群列表、个人信息);2)微博系统,每个人读你关注的人的数据,一个人读多个人的数据;3)秒杀系统,库存只有一份,所有人会在集中的时间读和写这些数据,多个人读一个数据。例如:小米手机每周二的秒杀,可能手机只有1万部,但瞬时进入的流量可能是几百几千万…

发表回复

您的电子邮箱地址不会被公开。

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