kd-aiot-frontend-eom/src/components/pop-modal/index.vue

<template>
    <div class="pop-modal">
        <ele-modal
        width="400px"
        :title="title"
        :visible.sync="visible"
        custom-class="ele-dialog-form"
        :close-on-click-modal="true"
        @update:visible="updateVisible"
    >
        <div style="padding: 10px 0 20px;">{{content}}</div>
        <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleCommit">
        提交
      </el-button>
    </template>
    </ele-modal>
    </div>
  </template>
  
  <script>
    export default {
        data(){
          return {
            loading:false
        }
        },
      props: {
        title: {
          typeof: String,
          default: '温馨提示'
        },
        content:{
            typeof: String,
          default: ''
        },
        visible: {
          typeof: Boolean,
          default: false
        }
      },
      methods:{
          /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      handleCommit(){
        this.loading = true;
        this.$emit('done');
        setTimeout(() => {
            this.updateVisible(false);
            this.loading = false;
        }, 800);
      }
      }
    };
  </script>
  <style lang="scss" scoped>
    ::v-deep .ele-dialog-form {
     .el-dialog__header{
        border-bottom: 0;
     }
     .el-dialog__footer{
        border-top: 0;
     }
    }
  </style>