将element dialog 封装成API

目录

SelfDialog.vue

<template>
    <div class="self_dialog">
        <el-dialog 
            width='450px'
            custom-class='dialog-wapper'
            :visible.sync="show"
            :show-close="false"
            :close-on-click-modal = 'false'
            center
        >   
            <img v-if="title" src="@/assets/pic_succeed@2x.png" class="el-icon-img" alt=""> 
            <i v-else slot="title" class="el-icon-delete"></i>
            <div class="sure-title" :class="{'set-color': title}">{{title || '确定删除'}}</div>
            <p class="sure-notic">{{content}}</p>
            <span slot="footer" class="dialog-footer">
                <el-button v-if="!title" class="btn" @click="close" round>取 消</el-button>
                <el-button class="btn" :class="{'set-btn': title}" type="primary" @click="ok" round :loading='loading'>确 定</el-button>
            </span>
        </el-dialog>
    </div>
    
</template>

<script>
export default {
    name: 'selfDialog',
    data(){
        return {
            title: '',
            content: '',
            show: false,
            loading: false
        }
    },
    watch: {
        show(n) {
            n && (this.loading = false)
            if(!n) {
                let timer = setTimeout(() => {
                    let self = document.getElementsByClassName('self_dialog')[0];
                    //获取需要删除节点的父节点
                    let parent = self.parentElement;
                    //进行删除操作
                    parent.removeChild(self);
                    clearInterval(timer);  
                }, 800)
            }
        }
    }
}
</script>

index.js

import Vue from 'vue'
import dialog from './components/SelfDialog.vue'
console.log(dialog)
let  Dialog = Vue.extend(dialog)
let instance
 
function showModal(options = {}) {
 
  instance = new  Dialog({
    data: options
  })
  instance.ok = function() {
    options.confirm(instance)
  }
  instance.close  = function() {
    instance.show = false
    if(typeof options.cancel === 'function') {
      options.cancel()
    }
    
  }
  //将实例挂载到body下
  document.body.appendChild(instance.$mount().$el)
 
}

export default showModal

main.js

import showModal from '@/extend/toast/index'
Vue.prototype.$showModal = showModal

使用方法

 // 删除
    del(id) {
      let that = this;
      this.$showModal({
        title: "",
        content: "该banner后不可撤回，您确认要删除该banner吗？",
        show: true,
        async confirm(instance) {
          try {
            instance.loading = true;
            let res = await delBanner(id);
            instance.loading = false;
            if (res.status === 200) {
              that.$message({
                message: "删除成功",
                type: "success",
              });
              that.$refs.list.delLastFormatCurrent();
              instance.show = false;
            }
          } catch {
            instance.loading = false;
          }
        },
      });