依舊是百度不到自己想要的，就自己動手豐衣足食

彈出框做成單獨的元件confirm.vue;

<template>
    <transition name="mask-bg-fade">
        <div class="mask" v-show="show">
            <div class="mask_bg"></div>
            <transition name="slide-fade">
                <div class="modelBox" v-show=
 
"show">
                    <div class="tipIcon" v-bind:class="confirmModalOptions.type||'warning'"></div>
                    <div class="closeModel" v-on:click="closeModel()"></div>
                    <div class="title">{{confirmModalOptions.title || "提示"}}</div>
 
                    <div class="message textCenter">{{confirmModalOptions.message || " "}}</div>
                    <div class="model_btnBox">
                        <button class="dh_button_default2" v-on:click="confirmCancel()">
{{confirmModalOptions.btnCancelText || "取消"}}
                        </button>
 
                        <button class="dh_button_blue" v-on:click="confirmSubmit()">
{{confirmModalOptions.btnSubmitText || "確定"}}
                        </button>
                    </div>
                </div>
            </transition>
        </div>
    </transition>
</template>
<script>export default {
    props: ["confirmModalOptions"],
data() {
      return {
        show: false,   // 是否顯示模態框
}
    },
methods: {
      closeModel: function () {
        this.show = false;
},
showModel: function () {
        this.show = true;
},
confirmCancel: function () {
        this.show = false;
if(typeof (this.confirmModalOptions.btnCancelFunction)==='function'){
          this.confirmModalOptions.btnCancelFunction()
        }
      },
confirmSubmit: function () {
        this.show = false;
if(typeof (this.confirmModalOptions.btnSubmitFunction)==='function'){
          this.confirmModalOptions.btnSubmitFunction()
        }
      }
    }
  }
</script>
<style lang="scss">
</style>

頁面

<d-confirm v-bind:confirmModalOptions="confirmOptions" ref="myConfirm"></d-confirm>

import  DConfirm from 'components/confirm';

del: function () {
  this.$refs.myConfirm.showModel();
this.confirmOptions= {
    type: "warning",//warning
title: "提示",//提示
message: "文字內容",//""
btnCancelText: "取消",//取消
btnSubmitText: "確定",//確定
btnSubmitFunction: function () {
      alert("確定")
    },
btnCancelFunction: function () {
      alert("取消")
    }
  }
},

添加了兩個過度效果，背景和彈出框是分開的不同效果，自己可以再封裝成一個甚至多個按鈕的彈出框，自己就是遇到一些比較麻煩的問題，希望大神指導學習學習，

至於css樣式就大家自己寫吧；

歡迎批評指正