是把彈窗的html都寫在了頁面app里邊。

1、html代碼

<div class="layui-body"  id="app">
  <div  ><button  @click="queren">顯示確認框</button><button  @click="qshanchu">顯示刪除框</button></div>
  <div class='zzc none'  :class="{'nonone':showzzc==1}">
  <div class='confir' v-show="showts==1">
    <h3>溫馨提示</h3>
	<p>確認要刪除嗎？</p>
	<div class='del-btn-item'>
	  <dl>
	    <dd>
		  <button type='button' class='confire_btn_no'   @click="hidetc">取消</button>
		  <button type='button' class='confire_btn_yes' @click="isdelc">確認</button>
	    </dd>
	  </dl>
    </div>
  </div>
  <div class='confir' v-show="showts==2">
    <h3>溫馨提示</h3>
    <p>{{tis}}</p>
    <div class='del-btn-item'>
      <dl>
	    <dd>
		  <button type='button' class='confire_btn_yes_full confire_btn_yes' @click="hidetc">確認</button>
	    </dd>
	  </dl>
    </div>
  </div>
</div>
</div>

2、css代碼

.zzc{position:fixed;width:100%;height:100%;z-index:111111;background-color:rgba(221,221,221,0.7);left:0;top:0;}
.zzc .confir{position:fixed;border:2px solid #009688;z-index:222222;background: #FFF;left:50%;top:50%;border-radius:5px;width:350px;height:200px;margin-left:-175px;margin-top:-100px;}
.zzc .confir h3{width:100%;text-indent:10px;font-size:16px;height:40px;line-height:40px;border-bottom:1px solid #DDD;}
.confir  p{background:url(../images/icon_exc_small.gif)  no-repeat 30px center;height:80px;line-height:80px;display:block;width:100%;text-indent:120px;font-size:16px;}
.confir  button{font-size:14px;padding:10px 30px;margin:0 5px;border:0;cursor:pointer;}
.confir  .confire_btn_no{background:#F2F2F2;}
.confir  .confire_btn_yes{background:#009688;color:#FFF;}
.confir  .del-btn-item{margin-top:20px;}
.confir  .del-btn-item dd{text-align:center;}
.confir  .confire_btn_yes_full{width:calc(100% - 60px);margin:0 auto;}
.none{display:none;}
.nonone{display:block !important}

使用rgba直接設置background-color透明度，background-color:rgba(221,221,221,0.7)，0.7即為透明度

3、js代碼

 new Vue({
    el: '#app',
    data(){
		return {
		  tis:'',           //提示內容
		  showzzc:0,         //彈出框的顯示，隱藏 。0 隱藏  1顯示
		  showts:0,          //1 彈出提示操作框  2 彈出提示確認框 
		 }
    },
    methods:{
    	  hidetc:function(){
		        this.showzzc=0;
	      },
        isdelc:function(){
			    //這里是刪除的操作
			    this.showzzc=0;//賦值為0， 隱藏彈出框
	      },
	      queren:function(){
		      this.showzzc=1;
		      this.showts=2;
		      this.tis="你點擊了顯示確認框";
	      },

	      qshanchu:function(){
		      this.showzzc=1;
		      this.showts=1;
	      },
    }
  })

說明：

1. 在1中可以看到 使用的<div class='zzc none' :class="{'nonone':showzzc==1}"> 操作的是class ，而不是使用v-if 或者v-show，這是因為vue是在最后渲染，如果不加none，打開頁面的時候，窗口有一個閃現的過程，這很明顯不是我們想要的效果，如果加上none，v-if，v-show 就失去了作用；
2. nonone 加上!important ，優先級高于none，讓class='none'，失去了作用，達到我們想要的顯示隱藏的效果；
3. 彈窗可能提示的內容不同，提示的信息直接讀取基礎數據tis的信息，例如：上傳圖片，可能會提示大小超出，格式不對；
4. 360急速瀏覽器在兼容模式下，vue都失效，沒有解析；

解決辦法如下：

第一步：在頭部加載browser.min.js，

第二步：判斷瀏覽器是否為ie瀏覽器

第三步：如果是ie，在vue的<script>處加上type="text/babel"

完整代碼：

<script  type="text/javascript" >
     if (!!window.ActiveXObject || "ActiveXObject" in window){
		 document.write("<scri"+"pt src=\"/public/admin/js/art.js\" type=\"text/babel\"></s"+"cript>");
     }else{
		 document.write("<scri"+"pt src=\"/public/admin/js/art.js\" ></s"+"cript>");
	 }
</script>

我的vue的代碼寫在了art.js，主要就是判斷是否ie，然后決定是否加上 type="text/babel"，如果不是ie，加上以后別的瀏覽器就不好用了。