弹框二次弹窗删除

记一下最近用到的vue弹框确认是否删除的两个方法吧，一个就是利用vue中this.$confirm，还有一个就是利用写的组件处理。

this.$confirm

 this.$confirm("是否删除此节点？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            DeletOprate();
          })
          .catch(() => {});

组件：

父：

<light-weight-prompt
      ref="lightWeightPrompt"
      :lightWeightData="lightWeightData"
      class="compare"
      @define="toServePage"
    />

子：

<template>
    <div class="box">
        <el-dialog
            title="提示"
            :visible.sync="isShow"
            width="30%">
            <p class="title">
                <img src="@/assets/images/ship/title.png" alt="" v-if="!lightWeightData.isSerious" />
                <img src="@/assets/images/ship/serious.png" alt="" v-else />
                <span>温馨提示</span>
            </p>
            <p class="delTitle" v-html="lightWeightData.title"></p>
            <span slot="footer" class="dialog-footer">
              <el-button @click="isShow = false" v-show="lightWeightData.isCancel">取 消</el-button>
              <el-button type="primary" @click="define">查 看</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name:'lightWeightPrompt',
    props:{
        lightWeightData:{}
    },
    data(){
        return {
            isShow:false,
        }
    },
    methods:{
        define(){
            this.$emit('define')
            this.isShow = false
        }
    }
}
</script>
<style lang="less" scoped>
.title{
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: #18253D;
    font-weight: 600;
    img{
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }
}
.delTitle{
    color: #8E99AD;
    margin-left: 32px;
}
/deep/ .el-dialog{
    width: 400px !important;
    // height: 150px !important;
    display: flex;
    flex-direction: column;
    margin:0 !important;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border-radius: 8px;
}

/deep/ .el-dialog__body{
    padding: 20px 20px 7px;
}
/deep/ .el-dialog__footer{
    padding: 20px;
    button{
        min-width: 60px;
        height: 32px;
        padding: 0;
        line-height: 32px;
        margin-left: 16px;
    }
}
/deep/ .el-dialog__header{
    display: none;
}
</style>