1. /**
  2. * Created by yx on 2017/12/21.
  3. */
  4. export default {
  5. /**
  6. * 带按钮的弹框
  7. * <!--自定义提示标题,内容,单个按钮事件-->
  8. */
  9. showAlert:function(content,callback,singleButton){
  10. if(typeof(content)=="string"){
  11. if(callback){
  12. if(singleButton){
  13. // alert("内容加function两个按钮");
  14. showDouble(content,callback);
  15. }else{
  16. // alert("内容加function一个按钮");
  17. showSingle(content,callback);
  18. }
  19. return;
  20. }
  21. showSingle(content);
  22. }
  23. },
  24. //弹窗提示自定义弹框
  25. eduToast:function(msg, duration){
  26. duration = isNaN(duration) ? 3000 : duration;
  27. var m = document.createElement('div');
  28. m.innerHTML = msg;
  29. m.style.cssText = "width: 60%;min-width: 150px;opacity: 0.7;height: 30px;color: rgb(255, 255, 255);line-height: 30px;text-align: center;border-radius: 5px;position: fixed;top: 40%;left: 20%;z-index: 999999;background: rgb(0, 0, 0);font-size: 12px;";
  30. document.body.appendChild(m);
  31. setTimeout(function () {
  32. var d = 0.5;
  33. m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
  34. m.style.opacity = '0';
  35. setTimeout(function () {
  36. document.body.removeChild(m)
  37. }, d * 1000);
  38. }, duration);
  39. },
  40. };
  41. var containHtml;
  42. /**
  43. <!--自定义内容,两个个按钮事件-->
  44. */
  45. function showDouble(content,callback){
  46. if(containHtml)return;
  47. containHtml = '<div id="cover"><div id="tipView"> <div id="tv_title"></div> <div id="tv_content"></div><div> <button id="tv_cancleBtn">取消</button><button id="tv_sureBtn">确定</button></div> </div></div>';
  48. var cover = document.createElement('div');
  49. document.body.appendChild(cover);
  50. cover.outerHTML = containHtml;
  51. document.getElementById("cover").style.cssText = 'background: rgba(0,0,0,0.5);position: fixed; top: 0; left: 0; width: 100%;height: 100%;';
  52. document.getElementById("tipView").style.cssText = 'position:fixed;padding-bottom: 15px;left:30px;right:30px;border-radius:8px; box-shadow:0 0 10px 5px rgba(0, 0, 0, .1), 0 0 10px 5px rgba(0, 0, 0, .1), 0 0 10px 5px rgba(0, 0, 0, .1);bottom:50%;margin-bottom:-30px;text-align:center;z-index: 1000';
  53. document.getElementById("tv_title").style.cssText = 'color:#fff;border-top-left-radius:8px;border-top-right-radius:8px;height: 2.5em;line-height:2.6em;text-align: center;font-size: 16px';
  54. document.getElementById("tv_content").style.cssText = 'font-size:15px; display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;margin:25px 15px 25px 15px;line-height:27px';
  55. document.getElementById("tv_cancleBtn").style.cssText = 'color:#fff;width:80px;line-height:35px;font-size:14px;border-radius:6px;margin-right:30px;border:0';
  56. document.getElementById("tv_sureBtn").style.cssText = 'color:#fff;width:100px;line-height:35px;font-size:14px;border-radius:6px;border:0';
  57. showTips("提示",content,callback);
  58.  
  59. document.getElementById('cover').addEventListener('click',removeFromSuperDiv);
  60. document.getElementById('tipView').addEventListener('click',function (event) {
  61. event.stopPropagation();
  62. },false);
  63. }
  64. /**
  65. <!--只显示提示内容-->
  66. */
  67. function showSingle(content,callback){
  68. if(containHtml)return;
  69. containHtml = '<div id="cover"><div id="tipView"> <div id="tv_title"></div> <div id="tv_content"></div> <div id="tv_sureBtn">确定</div> </div></div>';
  70. var cover = document.createElement('div');
  71. document.body.appendChild(cover);
  72. cover.outerHTML = containHtml;
  73. document.getElementById("cover").style.cssText = 'background: rgba(0,0,0,0.5);position: fixed; top: 0; left: 0; width: 100%;height: 100%;';
  74. document.getElementById("tipView").style.cssText = 'position:fixed;padding-bottom: 15px;left:30px;right:30px;border-radius:8px; box-shadow:0 0 10px 5px rgba(0, 0, 0, .1), 0 0 10px 5px rgba(0, 0, 0, .1), 0 0 10px 5px rgba(0, 0, 0, .1);bottom:50%;margin-bottom:-30px;text-align:center;z-index: 1000';
  75. document.getElementById("tv_title").style.cssText = 'color:#fff;border-top-left-radius:8px;border-top-right-radius:8px;height: 2.5em;line-height:2.6em;text-align: center;font-size: 16px';
  76. document.getElementById("tv_content").style.cssText = 'font-size:15px; display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;margin:25px 15px 25px 15px;line-height:27px';
  77. document.getElementById("tv_sureBtn").style.cssText = 'color:#fff;width:100px;line-height:35px;font-size:14px;border-radius:6px;margin:0 auto;border:0';
  78. showTips("提示",content,callback?callback:null);
  79. document.getElementById('cover').addEventListener('click',removeFromSuperDiv);
  80. document.getElementById('tipView').addEventListener('click',function (event) {
  81. event.stopPropagation();
  82. },false);
  83. }
  84. /**
  85. <!--显示提示-->
  86. */
  87. function showTips(title,content,callback) {
  88. if(!content||content=="")return;
  89. document.getElementById("tv_title").innerHTML=title;
  90. document.getElementById("tv_content").innerHTML=content;
  91. document.getElementById('tv_sureBtn').addEventListener('click',function () {
  92. if(callback){callback();}
  93. removeFromSuperDiv();
  94. },false);
  95. document.getElementById('tv_cancleBtn').addEventListener('click',function () {
  96. removeFromSuperDiv();
  97. },false);
  98. }
  99. /**
  100. <!--移除弹框-->
  101. */
  102. function removeFromSuperDiv(){
  103. var cover = document.getElementById('cover');
  104. if (cover != null){
  105. cover.parentNode.removeChild(cover);
  106. }
  107. containHtml=null;
  108. }
  109. /**
  110. *
  111. <!--调用方法-->
  112. <!--两个按钮-->
  113. $().showAlert("我很好的的哈哈",function(){
  114. alert("回来了");
  115. },true);
  116. <!--一个按钮-->
  117. $().showAlert("我很好的的哈哈哈",function(){
  118. alert("回来了");
  119. },false);
  120. *
  121. */

将其在vue目录中用一个js文件存起来,哪个页面需要弹窗时引入

import eduAlert from '@/js/alert.js'
 
在方法中就可以使用了
 
  1. alertmethos(){
  2. // eduAlert.showAlert("我很好的的哈哈",null,true);
  3. // eduAlert.showAlert("我很好的的哈哈",function(){
  4. // alert(1111);
  5. // },true);
  6. // eduAlert.showAlert("我很好的的哈哈",function(){
  7. // alert(1111);
  8. // },false);
  9. // alert(1111)
  10. eduAlert.eduToast("自定义弹窗时长弹窗",2000)
  11. }

vue中封装一个全局的弹窗js的更多相关文章

  1. vue中封装一个倒计时

    <template> <div class="countDownBox"> <div class="row resetStyle" ...

  2. 用vue2.x注册一个全局的弹窗alert组件

    一.在实际的开发当中,弹窗是少不了的,默认系统的弹窗样式太丑,难以满足项目的实际需求,所以需要自己定义弹窗组件,把弹窗组价定义为全局的,这样减少每次使用的时候引入麻烦,节省开发时间.本文将分享如何定义 ...

  3. 用vue2.x注册一个全局的弹窗alert组件、confirm组件

    一.在实际的开发当中,弹窗是少不了的,默认系统的弹窗样式太丑,难以满足项目的实际需求,所以需要自己定义弹窗组件,把弹窗组价定义为全局的,这样减少每次使用的时候引入麻烦,节省开发时间.本文将分享如何定义 ...

  4. Vue 中如何定义全局的变量和常量

    Vue 中如何定义全局的变量和常量 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1:创建 global.js 并且在其中定义   let a = 10 ...

  5. vue 中如何对公共css、 js 方法进行单文件统一管理,全局调用

    1.前言 最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践. 模块化.组件化.工程化的开发体验非常好.良好的 api,优雅的设计,对于工程师非常友好. 但是由于模块比较多 ...

  6. js中封装一个自己的简单数学对象

    封装一个数学对象求最大值最小值 <script> var myMath={ PI:3.1415926, max:function(){ var max=arguments[0];//注意a ...

  7. vue中如何引入全局样式或方法

    vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...

  8. IOS中封装一个View的思路

    一.封装一个View的思路 1.将View内部的业务逻辑(显示内容)封装到View中 2.一般情况下,View的位置应该由父控件来决定,也就是位置不应该固定死在View内部 3.至于View的宽高,根 ...

  9. 项目开发中封装一个BarButtonItem类别-很实用

    Encapsulates a TabBarItem--封装一个BarButtonItem类 在我们程序的导航栏的左边或右边一般都会有这样的BarButtonItem,用来界面之间的跳转 如果我们有很多 ...

随机推荐

  1. r 随机数

    R软件一个显著的优点是它提供了丰富的随机数发生器,比SAS.Matlab方面很多,比Excel更不知方便到哪里去了.这无疑为统计学.工程学以及寿险精算学提供了很大的方便,比如我们要产生200个服从正态 ...

  2. Mysql 导入导出csv 中文乱码

    这篇文章介绍了Mysql 导入导出csv 中文乱码问题的解决方法,有需要的朋友可以参考一下   导入csv: load data infile '/test.csv' into table table ...

  3. 重定向android log

    android里面的log输出以往都是在eclipse里面看,如果通过USB连接电脑,可以输出到PC上. try { //adb logcat -v threadtime > logcat.tx ...

  4. windows命令行(DOS批处理)添加任务计划

    自动创建每周运行一次的计划任务 创建计划任务可用at,schtasks命令,schtasks提供了很多参数 命令schtasks SCHTASKS /Create [/S system [/U use ...

  5. 【代码审计】五指CMS_v4.1.0 后台存在SQL注入漏洞分析

      0x00 环境准备 五指CMS官网:https://www.wuzhicms.com/ 网站源码版本:五指CMS v4.1.0 UTF-8 开源版 程序源码下载:https://www.wuzhi ...

  6. Proc文件系统接口调试

    在tpd_i2c_probe I2C的探测函数中创建proc接口 //----------------------------------------------------------------- ...

  7. 浅谈JAVA中HashMap、ArrayList、StringBuilder等的扩容机制

    JAVA中的部分需要扩容的内容总结如下:第一部分: HashMap<String, String> hmap=new HashMap<>(); HashSet<Strin ...

  8. ssh文件配置

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  9. VUE----整理

    -------------------------------------------------------------------VUE------------------------------ ...

  10. String和datetime在SQL中和在C#中相互转换方法总结

    Custom Date and Time Format Strings   <= https://docs.microsoft.com/en-us/dotnet/standard/base-ty ...