ivew 封装删除 对话框

封装的组件

<template>
  <Modal footer-hide  :closable="false" title="删除确认" v-model="modalShow" :styles="{top: '20px'}">
    <div style="text-align:center">
      <p>你确定删除吗？</p>
    </div>
    <Divider />
    <div style="display: flex;flex-direction: row;justify-content:space-between;">
      <Button @click="$emit('cancelModel')">取消</Button>
      <Button type="primary" @click="$emit('okModel')">删除</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  name: "deletemodal",
  props: {
    modalShow: Boolean
  }
};
</script>

组件引入

import DeleteModel from "../../components/DeleteModel/DeleteModel";
 
  components: {
    DeleteModel
  },

使用组件

 <DeleteModel :modalShow="modalShow" @cancelModel="cancelModel" @okModel="okModel" />

数据：

     modalShow: false,

子组件传递给父组件的方法的实现

   cancelModel() {
      this.modalShow = false;
    },
    okModel() {
      this.modalShow = false;
      var arr = [];
      arr.push(this.roleId);
      deletcile(arr)
        .then(res => {
          this.$Message.success(res.data.msg);
          this.reload();
        })
        .catch();
      // console.log(e);
    },

效果：