Vue使用Promise自定義confirm確認框組件

使用Promise模擬瀏覽器確認框，可自定義標題，內容，按鈕文字和類型

參數名	類型	說明
title	String	標題
content	String	內容
yesBtnText	String	確認按鈕文字，默認‘確定’
cancelBtnText	String	取消按鈕文字，默認‘取消’
type	String	info/success/warning/error，默認‘’

Confirm.vue

<template>
  <transition name="fade">
  <div class="confirm-wrap" v-if="visible">
    <div class="confirm">
      <div class="hd">
        {{title}}
        <i class="btn-close iconfont icon-close" @click="handleAction('close')"></i>
      </div>
      <div class="bd">
        <i v-if="type!=''" class="icon-type iconfont" :class="'icon-'+type"></i>{{content}}
      </div>
      <div class="ft">
        <a href="javscript:void(0)" class="btn btn-primary" @click="handleAction('yes')">{{yesBtnText}}</a>
        <a href="javscript:void(0)" class="btn btn-default" @click="handleAction('cancel')">{{cancelBtnText}}</a>
      </div>
    </div>
    <div class="backdrop" @click="handleAction('close')"></div>
  </div>
  </transition>
</template>

<script>
  export default {
    name: "MyConfirm",
    data() {
      return {
        visible:false,
        title:'',
        content:'',
        yesBtnText:'確定',
        cancelBtnText:'取消',
        type:'',
        promiseStatus:null,
      }
    },
    watch:{
      visible:function(curVal) {
        if(curVal&&document.body.scrollHeight > window.innerHeight){
          $('body').addClass('backdrop-open');
        }else{
          $('body').removeClass('backdrop-open');
        }
      }
    },
    methods: {
      confirm() {
        let _this = this;
        this.visible = true;
        return new Promise(function (resolve, reject) {
          _this.promiseStatus = {resolve, reject};
        });
      },
      handleAction(action){
        this.visible=false;
        if(action=='yes'){
          this.promiseStatus && this.promiseStatus.resolve();
        }else{
          this.promiseStatus && this.promiseStatus.reject();
        }
      }
    }
  }
</script>

index.js

import Vue from 'vue'
import Confirm from './Confirm.vue'

const ConfirmBox = Vue.extend(Confirm);

Confirm.install = (content, title, options) => {
  if (typeof title === 'object') {
    options = title;
    title = '';
  } else if (title === undefined) {
    title = '';
  }

  options = Object.assign({
    title: title,
    content: content,
  }, options);

  let instance = new ConfirmBox({
    data: options
  }).$mount();

  document.body.appendChild(instance.$el);

  return instance.confirm();
};

export default Confirm

main.js

import Confirm from '@/components/common/Confirm'
Vue.prototype.$my_confirm = Confirm.install;

頁面調用

show(){
    this.$my_confirm('是否登錄?',{
        yesBtnText:'登錄',
    }).then(() => {
        //點登錄
    }).catch(() => {
        //點取消
    });
},
show1(){
    this.$my_confirm('此操作將永久刪除該文件, 是否繼續？','提示',{
        yesBtnText:'是',
        cancelBtnText:'否',
        type: 'warning'
    }).then(() => {
        //點是
    }).catch(() => {
        //點否
    });
},

效果圖：