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文件存起来,哪个页面需要弹窗时引入

import eduAlert from ‘@/js/alert.js‘

在方法中就可以使用了

alertmethos(){
      // eduAlert.showAlert("我很好的的哈哈",null,true);
      // eduAlert.showAlert("我很好的的哈哈",function(){
      //   alert(1111);
      // },true);
      // eduAlert.showAlert("我很好的的哈哈",function(){
      //   alert(1111);
      // },false);
      // alert(1111)
      eduAlert.eduToast("自定义弹窗时长弹窗",2000)
}

原文地址:https://www.cnblogs.com/fqh123/p/10124306.html

时间: 2024-10-02 23:19:47

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

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

一.在实际的开发当中,弹窗是少不了的,默认系统的弹窗样式太丑,难以满足项目的实际需求,所以需要自己定义弹窗组件,把弹窗组价定义为全局的,这样减少每次使用的时候引入麻烦,节省开发时间.本文将分享如何定义一个全局的弹窗组件.下边开始上代码. 二.实际代码如下: 1.在components目录下的public目录新建一个文件夹alert,然后新建两个文件alert.vue和alert.scss.组件的样式代码我喜欢跟组件放到一起,这样按模块去划分管理.公共的样式就放到公共的样式文件里就行了. 2.al

vue中使用css全局样式

在stylus中使用: 1.在src目录下的assets文件中的styles文件中创建一个varibles.styl文件 2.在varibles.styl文件中书写代码 $bgColor = #00bcd4 3.在vue组件的style中引入全局样式 @import '../../../assets/styles/varibles.styl' 4.使用全局样式 .header{ background : $bgColor }  原生css中使用: 1.在src目录下的assets文件中的styl

记vue中封装axios

文件结构: mocks:中是本地json数据 adapter.js: 调用本地数据方法 resources.js 统一接口管理 export default { fetchDict: { url: '/v1/system/fetchDcType', method: 'post' } } 重点是以下俩个文件 index.js 拦截器以及请求头设置,并添加实例属性 import Vue from 'vue'; import axios from 'axios'; import { Toast } f

vue中封装svg-icon组件并使用

vue中使用svg图片有很多便捷方式,在这里记录一下模仿参考的过程,仅做一标记,方便后续回来查找 附上参考地址:https://juejin.im/post/59bb864b5188257e7a427c09 1.使用vue-cli3.0脚手架运行搭建一个项目,地址 截图如下: 2.components文件下新建SvgIcon组件 文件中的代码: 原文地址:https://www.cnblogs.com/lhjfly/p/10756650.html

vue中使用剪切板插件 clipboard.js

vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clipboard'; 下面就是使用了,比如说,比较常见的是,上面一行文字,下面有一个复制的按钮, <p id="share-code">{{init.code}}</p> <button class="copy-btn" data-clipboa

封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放.本篇文章的主要目的是分享封装插件的思路. 轮播图的我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left

vue中使用router全局守卫实现页面拦截及安全问题的一点感想

一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最后讨论) 二.使用场景 静态路由的使用场景:在我们使用静态路由实现页面跳转时,不管我们是否登录,当我们在地址栏修改地址后,页面会发生跳转并展示页面内容(数据并不会被展示出来),这样的问题显然是不能够被接受的: 动态路由的使用场景:动态路由无非就是从后端拿到了数据然后在加到router里面了.假如用户

vue中less文件全局引用

1.先安装sass-resources-loader  1 npm install sass-resources-loader 2.然后在build->utils.js修改less配置 在less后面加上 1 .concat( 2 { 3 loader: 'sass-resources-loader', 4 options: { 5 resources: path.resolve(__dirname, '需要全局引入的less的位置及文件名') 6 } 7 } 8 ) 3.如果不止一个文件,就在

Vue中封装axios

参考: https://www.jianshu.com/p/7a9fbcbb1114 https://www.cnblogs.com/dreamcc/p/10752604.html 一.安装axios npm i axios -S 二.创建src/utils/axios.js.src/api/api.js axios.js用于封装axios,api.js用于管理接口 三.axios.js // axios.js import axios from "axios"; // 部分数据需要存