用vue2.x注冊一個全局的彈窗alert組件、confirm組件

一、在實際的開發當中，彈窗是少不了的，默認系統的彈窗樣式太丑，難以滿足項目的實際需求，所以需要自己定義彈窗組件，把彈窗組價定義為全局的，這樣減少每次使用的時候引入麻煩，節省開發時間。本文將分享如何定義一個全局的彈窗組件。下邊開始上代碼。

二、實際代碼如下：

1.在components目錄下的public目錄新建一個文件夾alert，然后新建兩個文件alert.vue和alert.scss。組件的樣式代碼我喜歡跟組件放到一起，這樣按模塊去划分管理。公共的樣式就放到公共的樣式文件里就行了。

2.alert.vue代碼如下

<template>
  <div class="alertModal" ref="alert">
    <!--social post彈框-->
      <transition name="fade">
          <div v-if="modelFlag==1" class="alertbox">
            <div class="alert-dialog">
              <div class="alert-content">
                <div class="alert-header">
                    <span  class="alertclose" @click="close">×</span>
                    <span class="alert-title">
                       {{modelTitle}}
                    </span>
                </div>
                <div class="alert-body">
                    {{modelContent}}
                </div>
                <div class="alert-footer">
                    <button class="alertbtn"  @click="close">{{modelClose}}</button>
                    <button class="alertbtn alert-info" @click="submit">{{modelSave}}</button>
                </div>
              </div>
            </div>
        </div>
      </transition>
      <div v-if="modelFlag==1" class="modal-backdrop"></div>
  </div>
</template>

<script>

export default {
    data(){
        return{
            modelFlag:0,//0為消失，1為顯示
            modelTitle:'Alert',//彈窗標題
            modelClose:'取消',//取消按鈕文字
            modelContent:'',//彈窗內容
            modelSave:'確定',//確定按鈕文字
            callBack:null,//是否需要回調函數
        }
    },
    methods:{
        //回調函數
        doCallBack(){
            if(typeof this.callBack == 'function'){
                this.callBack()
                this.callBack=null;
            }
        },
        //關閉彈窗，數據重置
        close(){
           this.modelFlag=0;
           this.modelTitle='Alert';
           this.modelClose='取消';
           this.modelContent='';
           this.modelSave='確定';
           this.callBack=null;
        },
        //點擊確定按鈕彈窗消失
        submit(){
            this.doCallBack()
            this.close()
        },
        //顯示彈窗，記性復制
        show(options){
            if(this.modelFlag==1){return};
            this.modelTitle=options.modelTitle||this.modelTitle;
            this.modelContent=options.modelContent;
            this.modelFlag=1;
            this.modelSave=options.modelSave||this.modelSave;
            this.modelClose=options.modelClose||this.modelClose;
            if(options.callBack){
                this.callBack=options.callBack;
            }
        },
    },
    watch:{
       
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="sass" scoped>
@import 'alert.scss'
</style>

3.在App.vue中引入組件並注冊，

import alert from 'components/public/alert/alert.vue'

mounted(){
        Vue.prototype.$alert=this.$refs.alert;
    },
  components:{
      alert
  }

<alert ref='alert'></alert>

在外層div下加上組件。

4.使用彈窗

比如我在一個頁面那里點擊一個button然后調用顯示這彈窗，則：

<button @click="showalert">show alert</button>
methods:{
        showalert(){
               this.$alert.show({modelTitle:"Alert Msg",
                          modelContent:'Please Check!'})
        }
    },

this.$alert.show({modelTitle:"Alert Msg",modelContent:'Please Check!'})，show方法里邊傳一個對象，里邊是相應的配置。

這樣就可以使用啦！

5.使用confirm功能，在對象里加入callBack回調函數：

showalert(){
               this.$alert.show({modelTitle:"Alert Msg",modelContent:'你確定刪除嗎？',callBack:()=>{
                   alert(1)
               }})
        }

結果如下：

 

6.最后附上樣式代碼

.modal.fade .alert-dialog {
  -webkit-transition: -webkit-transform .3s ease-out;
       -o-transition:      -o-transform .3s ease-out;
          transition:         transform .3s ease-out;
  -webkit-transform: translate(0, -25%);
      -ms-transform: translate(0, -25%);
       -o-transform: translate(0, -25%);
          transform: translate(0, -25%);
}
.modal.in .alert-dialog {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}
.alertbox{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 99999;
}
.alert-dialog{
    display: inline-block;
    width: 420px;
    padding-bottom: 10px;
    vertical-align: middle;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #e6ebf5;
    font-size: 18px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    text-align: left;
    overflow: hidden;
    backface-visibility: hidden;
    position: relative;
    top: 140px;
    padding: 10px 15px;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}
.alert-footer{
    float: right;
    margin-top: 5px;
}
.alert-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}


.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    opacity: 0.5;
}

.el-icon-date{
    cursor: pointer;
}
.alert-header{
    
}
.alert-title{
    font-size: 18px;
    line-height: 1;
    color: #2d2f33;
}
.alert-body{
    padding: 10px 0px;
    color: #5a5e66;
    font-size: 14px;
    line-height: 17px;
}
.alertbtn{
    text-align: center;
    font-weight: 500;
    cursor: pointer;
    padding: 9px 15px;
    font-size: 12px;
    border-radius: 3px;
    line-height: 1;
    background: #fff;
    border: 1px solid #d8dce5;
    border-color: #d8dce5;
    color: #5a5e66;
}
.alert-info{
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
}
.alertclose{
    float: right;
    cursor: pointer;
}

 希望對大家有用。