[关闭]
@15013890200 2018-08-13T16:13:42.000000Z 字数 9025 阅读 1129

vue dialog 弹窗插件

vue javascript dialog 插件

tips：本次主要封装了开发过程常见的confirm（确认）、alert（警告）、prompt（输入）、tips（提示）、loading（加载）对话框

1 组件部分

1.1 template部分

  1. <template>
  2.     <transition name='fade'>
  3.         <div v-if="type">
  4.             <div class="j_d_modal" :class="{'j_d_modal_white': type == 'loading'}" v-if='type != "msg"' @click="hide"></div>
  5.             <!-- 确认对话框 -->
  6.             <div class="j_diy_dialog_window clearfix" ref="MyWindow" id="j_diy_dialog_window" style="opacity:0" v-if='type == "confirm"'>
  7.                 <div class="j_head_div clearfix">
  8.                     <span class="j_sp_title">{{title}}</span>
  9.                     <span class="j_sp_close" @click="hide">X</span>
  10.                 </div>
  11.                 <div class="j_body_div clearfix">
  12.                     <span>{{msg}}</span>
  13.                 </div>
  14.                 <div class="j_btn_group clearfix">
  15.                     <button class="btn j_btn-ensure" @click='ensure'>确认</button>
  16.                     <button class="btn j_btn-cancel" @click='cancel'>取消</button>
  17.                 </div>
  18.             </div>
  19.             <!-- 提示信息对话框 -->
  20.             <div class="j_msg_body_init clearfix" ref="MyWindow" id="j_diy_dialog_window" v-if='type == "msg"' @click="hide">
  21.                 <span>{{msg}}</span>
  22.             </div>
  23.             <!-- 警告对话框 -->
  24.             <div class="j_diy_dialog_window clearfix" ref="MyWindow" id="j_diy_dialog_window" style="opacity:0" v-if='type == "alert"'>
  25.                 <div class="j_head_div clearfix">
  26.                     <span class="j_sp_title">{{title}}</span>
  27.                     <span class="j_sp_close" @click="hide">X</span>
  28.                 </div>
  29.                 <div class="j_body_div clearfix">
  30.                     <div class="j_alert_img_div clearfix"><div class="j_alert_img">!</div></div>
  31.                     <div class="j_alert_msg_div clearfix">
  32.                         <span class="j_alert_msg">{{msg}}</span>
  33.                     </div>
  34.                 </div>
  35.                 <div class="j_btn_group clearfix">
  36.                     <button class="btn j_btn-ensure" @click='alert_ensure' style="float:right;margin-right:20px;">确认</button>
  37.                 </div>
  38.             </div>
  39.             <!-- 加载对话框 -->
  40.             <div class="j_loading_body clearfix" ref="MyWindow" id="j_diy_dialog_window" style="opacity:0" v-if='type == "loading"'>
  41.                 <div class="loading"></div>
  42.                 <span class="j_loading_msg">{{msg}}</span>
  43.             </div>
  44.             <!-- prompt对话框 -->
  45.             <div class="j_diy_dialog_window clearfix" ref="MyWindow" id="j_diy_dialog_window" style="opacity:0" v-if='type == "prompt"'>
  46.                 <div class="j_head_div clearfix">
  47.                     <span class="j_sp_title">{{msg}}</span>
  48.                     <span class="j_sp_close" @click="hide">X</span>
  49.                 </div>
  50.                 <div class="j_body_div clearfix">
  51.                     <!-- <label class="j_input_title">{{msg}}</label> -->
  52.                     <input type="text" id="j_diy_dialog_window_input" v-model='prompt_value' class="input" :class="{'j_input_focus':focus}" :focus='focus = true'>
  53.                 </div>
  54.                 <div class="j_btn_group clearfix">
  55.                     <button class="btn j_btn-ensure" @click='ensure'>确认</button>
  56.                     <button class="btn j_btn-cancel" @click='cancel'>取消</button>
  57.                 </div>
  58.             </div>
  59.         </div>
  60.     </transition>
  61. </template>

1.2 script部分

  1. <script>
  2.     export default {
  3.         data(){
  4.             return {
  5.                 type: '',//对话框类型
  6.                 title: '提示信息',//对话框title
  7.                 msg: '',//对话框提示信息
  8.                 timing: 3,//msg对话框存在时间
  9.                 time_out: null,//用于取消msg对话框定时任务
  10.                 no: '',//confirm回调函数（取消）
  11.                 yes: '',//confirm回调函数（确定）
  12.                 callback: '',//alert回调函数
  13.                 prompt_value:'',//prompt输入框值
  14.                 focus: false
  15.             }
  16.         },
  17.         props:{
  18.             dialog:{
  19.                 type:Object,
  20.                 default:null
  21.             }
  22.         },
  23.         methods: {
  24.             open: function(obj){
  25.                 /* open 传入 type 打开对应对话框 */
  26.                 let t = this;
  27.                 if(obj){
  28.                     for(let key in obj){
  29.                         this.$data[key] = obj[key];
  30.                     }
  31.                     if(this.type == 'msg'){
  32.                         t.timing = t.timing || 3;
  33.                         setTimeout(function(){
  34.                             let win = document.getElementById('j_diy_dialog_window');
  35.                             setTimeout(function(){
  36.                                 win.setAttribute('class','j_msg_body clearfix');
  37.                                 t.setPosition();
  38.                                 t.time_out = setTimeout(function(){
  39.                                     t.hide();
  40.                                 },t.timing*1000);
  41.                             },10);  
  42.                         },100);
  44.                     }
  45.                     else{
  46.                         setTimeout(function(){
  47.                             t.setPosition();
  48.                         },10);
  49.                     }
  50.                     if(this.type == 'loading'){
  51.                         this.msg = this.msg || 'loading';
  52.                     }
  53.                 }
  54.             },
  55.             hide: function(){
  56.                 /* 隐藏对话框 */
  57.                 if(this.type == 'loading'){
  58.                     return;
  59.                 }
  60.                 this.type = false;
  61.                 clearTimeout(this.time_out);
  62.             },
  63.             hideAll: function(){
  64.                 /* 隐藏所有对话框 */
  65.                 clearTimeout(this.time_out);
  66.                 this.type = false;
  67.             },
  68.             setPosition: function(){
  69.                 /* 调整对话框在窗口的位置 */
  70.                 let b_width = window.innerWidth;
  71.                 let b_height = window.innerHeight;
  72.                 let win = document.getElementById('j_diy_dialog_window');
  73.                 let offset_w = (b_width - win.offsetWidth-100)/2;
  74.                 let style_txt = 'left:' + offset_w + 'px;';
  75.                 if(win.offsetHeight < b_height){
  76.                     style_txt += 'top:' + (b_height - win.offsetHeight-200)/2 +'px';
  77.                 }
  78.                 win.setAttribute('style',style_txt);
  79.             },
  80.             ensure: function(){
  81.                 /* confirm 确定按钮 */
  82.                 this.yes && this.yes();
  83.                 this.hide();
  84.             },
  85.             cancel: function(){
  86.                 /* confirm 取消按钮 */
  87.                 this.no && this.no();
  88.                 this.hide();
  89.             },
  90.             alert_ensure: function(){
  91.                 /* alert 确定按钮 */
  92.                 this.callback && this.callback();
  93.                 this.hide();
  94.             },
  95.             tips: function(str,timing){
  96.                 if(this.type) this.hideAll();
  97.                 let t = this;
  98.                 /* msg 纯提示对话框 */
  99.                 setTimeout(function(){
  100.                     t.type = 'msg';
  101.                     t.msg = str || '请输入提示信息';
  102.                     t.timing = timing || 3;
  103.                     setTimeout(function(){
  104.                         let win = document.getElementById('j_diy_dialog_window');
  105.                         setTimeout(function(){
  106.                             win.setAttribute('class','j_msg_body clearfix');
  107.                             t.setPosition();
  108.                             t.time_out = setTimeout(function(){
  109.                                 t.hide();
  110.                             },t.timing*1000);
  111.                         },10);  
  112.                     },100);
  113.                 },10);
  115.             },
  116.             confirm: function(){
  117.                 /* confirm 确认对话框 */
  118.                 if(this.type) this.hideAll();
  119.                 let t = this;
  120.                 let args = arguments;
  121.                 setTimeout(function(){
  122.                     t.type = 'confirm';
  123.                     if(args[0]){
  124.                         t.msg = args[0];
  125.                     }
  126.                     else{
  127.                         t.msg = '确认要干什么？';
  128.                     }
  129.                     if(args[1]){
  130.                         t.yes = args[1];
  131.                     }
  132.                     if(args[2]){
  133.                         t.no = args[2];
  134.                     }
  135.                     setTimeout(function(){
  136.                         t.setPosition();
  137.                     },10);
  138.                 },10);
  140.             },
  141.             alert: function(){
  142.                 /* alert 警告对话框 */
  143.                 if(this.type) this.hideAll();
  144.                 let t = this;
  145.                 let args = arguments;
  146.                 setTimeout(function(){
  147.                     t.type = 'alert';
  148.                     if(args[0]){
  149.                         t.msg = args[0];
  150.                     }
  151.                     else{
  152.                         t.msg = '请确认什么？';
  153.                     }
  154.                     if(args[1]){
  155.                         t.callback = args[1];
  156.                     }           
  157.                     setTimeout(function(){
  158.                         t.setPosition();
  159.                     },10);
  160.                 },10);
  162.             },
  163.             loading: function(str){
  164.                 /* loading 加载对话框 */
  165.                 if(this.type) this.hideAll();
  166.                 let t = this;
  167.                 setTimeout(function(){
  168.                     t.type = 'loading';
  169.                     t.msg = str || 'loading';
  170.                     setTimeout(function(){
  171.                         t.setPosition();
  172.                     },10);
  173.                 },10);
  175.             },
  176.             prompt: function(){
  177.                 /* prompt 输入对话框 */
  178.                 if(this.type) this.hideAll();
  179.                 let t = this;
  180.                 let args = arguments;
  181.                 setTimeout(function(){
  182.                     t.type = 'prompt';
  183.                     if(args[0]){
  184.                         t.msg = args[0];
  185.                     }
  186.                     else{
  187.                         t.msg = '请输入标题';
  188.                     }
  189.                     if(args[1]){
  190.                         t.prompt_value = args[1];
  191.                     }
  192.                     if(args[2]){
  193.                         t.yes = args[2];
  194.                     }
  195.                     if(args[3]){
  196.                         t.no = args[3];
  197.                     }
  198.                     setTimeout(function(){
  199.                         t.setPosition();
  200.                         document.getElementById('j_diy_dialog_window_input').focus();
  201.                     },10);
  202.                 },10);              
  203.             }
  204.         },
  205.         mounted() {
  206.             let t = this;
  207.             window.onresize = function(){
  208.                 if(document.getElementById('j_diy_dialog_window')){
  209.                     t.setPosition();
  210.                 }
  211.                 /* 当窗口大小改变 改变对话框的位置 */              
  212.             }
  213.         }
  214.     }
  215. </script>

1.3 css部分

  1. <style scoped>
  2.     .hide{display:none;}
  3.     .j_d_modal{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 100000;background-color: #000;opacity: 0.5;font-size:14px;}
  4.     .j_diy_dialog_window{position: fixed;top: 30%;left: 0;max-width: 500px;min-width: 250px;min-height: 50px;background-color: #fff;z-index: 110000;border-radius: 3px;box-shadow:3px 3px 5px #666;color:#666;text-align:center; }
  5.     .j_head_div{padding:5px;border-bottom:1px solid #dddddd;font-size:12px;}
  6.     .j_body_div{padding:10px 10px 30px 10px;;text-align:center;}
  7.     .j_sp_title{float:left;margin-right:20px;}
  8.     .j_sp_close{float:right;cursor:pointer;}
  9.     .j_sp_close:hover{color:#3896fe;}
  10.     .j_btn_group{text-align:center;padding-bottom:10px;}
  11.     .btn{cursor:pointer;width:60px;height:25px;border-radius:2px;outline:none;}
  12.     .j_btn-ensure{color:#fff;background-color:#3896fe;border:1px solid #3896fe;margin-right:10px;}
  13.     .j_btn-ensure:hover{background-color:#428bca;border:1px solid #428bca;}
  14.     .j_btn-cancel{color:#666;background-color:#dddddd;border:1px solid #dddddd;}
  15.     .j_btn-cancel:hover{background-color:#bbbbbb;border:1px solid #bbbbbb;}
  17.     .j_msg_body_init{width:0;height:0;opacity:0;top:50%;left:50%;over-flow:hidden; transition: width 1s;position:fixed;}
  18.     .j_msg_body{padding:15px 40px;background-color:#000;color:#fff;opacity:0.6;border-radius:5px;cursor:pointer;max-width:300px;position:fixed;z-index: 110000;text-align:center;}
  20.     .j_alert_img_div{width:60px;float:left;height:100%;}
  21.     .j_alert_img{content:'!';position:relative;width:32px;height:32px;background-color:#D80000;display:inline-block;z-index:120000;color:white;line-height:32px;font-size:20px;font-weight:600;border-radius:50%;text-align:center;margin-top:10px;}
  22.     .j_alert_msg_div{width:70%;float:left;height:100%;text-align:left;padding-top:14px;}
  23.     .j_alert_msg{margin-top:10px;}
  25.     .j_loading_body{padding:20px;background-color:#333;opacity:0.7;position:fixed;z-index:110000;color:#fff;border-radius:15px;min-width:80px;text-align:center;}
  26.     .loading{width:100%;height:32px;display:block;background:url('./img/loading.gif') no-repeat center;margin-left:10xp;text-align:center;margin-bottom:10px;}
  27.     .j_loading_msg{white-space:wrapped;}
  28.     .j_d_modal_white{background-color:transparent!important;}
  30.     .input{outline:none;border:1px solid #dddddd;height:30px;padding:0 10px;width:60%;border-radius:5px;}
  31.     .j_input_focus,.input:hover{border:1px solid #3896f3!important;}
  32.     .j_input_title{display:inline-block;height:32px;line-height:32px;margin-right:10px;}
  33.     .j_input_title:after{content:'：';position:relative;}
  34. </style>

2 组件注册及引用

  1. import Vue from 'vue';
  2. import vDialog from './dialog.vue';
  4. const dialog = {
  5.     install : function(){
  6.         Vue.component('my-dialog',vDialog);
  7.     }
  8. };
  10. export default dialog;
  1. import vDialog from '../components/VDialog/dialog.js'
  2. Vue.use(vDialog);

3 组件配置

弹框组件不同于一般组件，在需要用到的时候才插入。由于弹框插件在web开发的各个阶段均能用到，如果每用到一次就插入一次显得太麻烦和臃肿，因此弹窗插件最好放在整个页面架构处，这样只要页面加载出来，就可以在页面任何地方和时机调用

  1. <my-dialog ref="Layer"></my-dialog>
tips：上面是页面引用，下面是script部分，将弹窗对象挂载到Vue原型上，这样就可以通过this.Layer调用弹窗
  1. Vue.prototype.Layer = this.$refs.Layer;
具体调用

let layer = this.Layer;

窗口类型 调用 参数说明
确认对话框 layer.confirm(arg1,arg2,arg3) arg1:确认文本信息
arg2:点击确认按钮执行的回调函数
arg3:点击取消按钮执行的回调函数
警告对话框 layer.alert(arg1,arg2) arg1:警告文本
arg2:点击确认按钮执行的回调函数
输入对话框 layer.prompt(arg1,arg2,arg3,arg4) arg1:文本信息
arg2:输入框值
arg3:点击确认按钮执行的回调函数
arg4:点击取消按钮执行的回调函数
信息对话框 layer.tips(arg1,arg2) arg1:文本信息
arg2:对话框停留时间
加载对话框 layer.loading(arg1) arg1:加载时显示的文本信息
关闭对话框 layer.hide() 无
关闭所有对话框 layer.hideAll() 无
打开指定对话框 layer.open(arg1) arg1 = {
type:"",//打开窗口类型（prompt除外）
msg:"",//文本信息
title:"",//对话框标题
yes(),//confirm对应的确定按钮回调函数
no(),//confirm对应的取消按钮回调函数
callback(),//alert对应的确定按钮回调函数
timing//msg对话框对应的存在时间，单位：秒
}

4 效果图

confirm

alert

prompt

tips

loading

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注