vue中封装一个全局的弹窗js
- /**
- * Created by yx on 2017/12/21.
- */
- export default {
- /**
- * 带按钮的弹框
- * <!--自定义提示标题,内容,单个按钮事件-->
- */
- showAlert:function(content,callback,singleButton){
- if(typeof(content)=="string"){
- if(callback){
- if(singleButton){
- // alert("内容加function两个按钮");
- showDouble(content,callback);
- }else{
- // alert("内容加function一个按钮");
- showSingle(content,callback);
- }
- return;
- }
- showSingle(content);
- }
- },
- //弹窗提示自定义弹框
- eduToast:function(msg, duration){
- duration = isNaN(duration) ? 3000 : duration;
- var m = document.createElement('div');
- m.innerHTML = msg;
- 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;";
- document.body.appendChild(m);
- setTimeout(function () {
- var d = 0.5;
- m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
- m.style.opacity = '0';
- setTimeout(function () {
- document.body.removeChild(m)
- }, d * 1000);
- }, duration);
- },
- };
- var containHtml;
- /**
- <!--自定义内容,两个个按钮事件-->
- */
- function showDouble(content,callback){
- if(containHtml)return;
- 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>';
- var cover = document.createElement('div');
- document.body.appendChild(cover);
- cover.outerHTML = containHtml;
- document.getElementById("cover").style.cssText = 'background: rgba(0,0,0,0.5);position: fixed; top: 0; left: 0; width: 100%;height: 100%;';
- 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';
- 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';
- 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';
- document.getElementById("tv_cancleBtn").style.cssText = 'color:#fff;width:80px;line-height:35px;font-size:14px;border-radius:6px;margin-right:30px;border:0';
- document.getElementById("tv_sureBtn").style.cssText = 'color:#fff;width:100px;line-height:35px;font-size:14px;border-radius:6px;border:0';
- showTips("提示",content,callback);
- document.getElementById('cover').addEventListener('click',removeFromSuperDiv);
- document.getElementById('tipView').addEventListener('click',function (event) {
- event.stopPropagation();
- },false);
- }
- /**
- <!--只显示提示内容-->
- */
- function showSingle(content,callback){
- if(containHtml)return;
- containHtml = '<div id="cover"><div id="tipView"> <div id="tv_title"></div> <div id="tv_content"></div> <div id="tv_sureBtn">确定</div> </div></div>';
- var cover = document.createElement('div');
- document.body.appendChild(cover);
- cover.outerHTML = containHtml;
- document.getElementById("cover").style.cssText = 'background: rgba(0,0,0,0.5);position: fixed; top: 0; left: 0; width: 100%;height: 100%;';
- 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';
- 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';
- 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';
- document.getElementById("tv_sureBtn").style.cssText = 'color:#fff;width:100px;line-height:35px;font-size:14px;border-radius:6px;margin:0 auto;border:0';
- showTips("提示",content,callback?callback:null);
- document.getElementById('cover').addEventListener('click',removeFromSuperDiv);
- document.getElementById('tipView').addEventListener('click',function (event) {
- event.stopPropagation();
- },false);
- }
- /**
- <!--显示提示-->
- */
- function showTips(title,content,callback) {
- if(!content||content=="")return;
- document.getElementById("tv_title").innerHTML=title;
- document.getElementById("tv_content").innerHTML=content;
- document.getElementById('tv_sureBtn').addEventListener('click',function () {
- if(callback){callback();}
- removeFromSuperDiv();
- },false);
- document.getElementById('tv_cancleBtn').addEventListener('click',function () {
- removeFromSuperDiv();
- },false);
- }
- /**
- <!--移除弹框-->
- */
- function removeFromSuperDiv(){
- var cover = document.getElementById('cover');
- if (cover != null){
- cover.parentNode.removeChild(cover);
- }
- containHtml=null;
- }
- /**
- *
- <!--调用方法-->
- <!--两个按钮-->
- $().showAlert("我很好的的哈哈",function(){
- alert("回来了");
- },true);
- <!--一个按钮-->
- $().showAlert("我很好的的哈哈哈",function(){
- alert("回来了");
- },false);
- *
- */
将其在vue目录中用一个js文件存起来,哪个页面需要弹窗时引入
- alertmethos(){
- // eduAlert.showAlert("我很好的的哈哈",null,true);
- // eduAlert.showAlert("我很好的的哈哈",function(){
- // alert(1111);
- // },true);
- // eduAlert.showAlert("我很好的的哈哈",function(){
- // alert(1111);
- // },false);
- // alert(1111)
- eduAlert.eduToast("自定义弹窗时长弹窗",2000)
- }
vue中封装一个全局的弹窗js的更多相关文章
- vue中封装一个倒计时
<template> <div class="countDownBox"> <div class="row resetStyle" ...
- 用vue2.x注册一个全局的弹窗alert组件
一.在实际的开发当中,弹窗是少不了的,默认系统的弹窗样式太丑,难以满足项目的实际需求,所以需要自己定义弹窗组件,把弹窗组价定义为全局的,这样减少每次使用的时候引入麻烦,节省开发时间.本文将分享如何定义 ...
- 用vue2.x注册一个全局的弹窗alert组件、confirm组件
一.在实际的开发当中,弹窗是少不了的,默认系统的弹窗样式太丑,难以满足项目的实际需求,所以需要自己定义弹窗组件,把弹窗组价定义为全局的,这样减少每次使用的时候引入麻烦,节省开发时间.本文将分享如何定义 ...
- Vue 中如何定义全局的变量和常量
Vue 中如何定义全局的变量和常量 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1:创建 global.js 并且在其中定义 let a = 10 ...
- vue 中如何对公共css、 js 方法进行单文件统一管理,全局调用
1.前言 最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践. 模块化.组件化.工程化的开发体验非常好.良好的 api,优雅的设计,对于工程师非常友好. 但是由于模块比较多 ...
- js中封装一个自己的简单数学对象
封装一个数学对象求最大值最小值 <script> var myMath={ PI:3.1415926, max:function(){ var max=arguments[0];//注意a ...
- vue中如何引入全局样式或方法
vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...
- IOS中封装一个View的思路
一.封装一个View的思路 1.将View内部的业务逻辑(显示内容)封装到View中 2.一般情况下,View的位置应该由父控件来决定,也就是位置不应该固定死在View内部 3.至于View的宽高,根 ...
- 项目开发中封装一个BarButtonItem类别-很实用
Encapsulates a TabBarItem--封装一个BarButtonItem类 在我们程序的导航栏的左边或右边一般都会有这样的BarButtonItem,用来界面之间的跳转 如果我们有很多 ...
随机推荐
- r 随机数
R软件一个显著的优点是它提供了丰富的随机数发生器,比SAS.Matlab方面很多,比Excel更不知方便到哪里去了.这无疑为统计学.工程学以及寿险精算学提供了很大的方便,比如我们要产生200个服从正态 ...
- Mysql 导入导出csv 中文乱码
这篇文章介绍了Mysql 导入导出csv 中文乱码问题的解决方法,有需要的朋友可以参考一下 导入csv: load data infile '/test.csv' into table table ...
- 重定向android log
android里面的log输出以往都是在eclipse里面看,如果通过USB连接电脑,可以输出到PC上. try { //adb logcat -v threadtime > logcat.tx ...
- windows命令行(DOS批处理)添加任务计划
自动创建每周运行一次的计划任务 创建计划任务可用at,schtasks命令,schtasks提供了很多参数 命令schtasks SCHTASKS /Create [/S system [/U use ...
- 【代码审计】五指CMS_v4.1.0 后台存在SQL注入漏洞分析
0x00 环境准备 五指CMS官网:https://www.wuzhicms.com/ 网站源码版本:五指CMS v4.1.0 UTF-8 开源版 程序源码下载:https://www.wuzhi ...
- Proc文件系统接口调试
在tpd_i2c_probe I2C的探测函数中创建proc接口 //----------------------------------------------------------------- ...
- 浅谈JAVA中HashMap、ArrayList、StringBuilder等的扩容机制
JAVA中的部分需要扩容的内容总结如下:第一部分: HashMap<String, String> hmap=new HashMap<>(); HashSet<Strin ...
- ssh文件配置
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- VUE----整理
-------------------------------------------------------------------VUE------------------------------ ...
- String和datetime在SQL中和在C#中相互转换方法总结
Custom Date and Time Format Strings <= https://docs.microsoft.com/en-us/dotnet/standard/base-ty ...