记一下最近用到的vue弹框确认是否删除的两个方法吧,一个就是利用vue中this.$confirm,还有一个就是利用写的组件处理。
this.$confirm
this.$confirm("是否删除此节点?", "提示", {confirmButtonText: "确认",cancelButtonText: "取消",type: "warning",}).then(() => {DeletOprate();}).catch(() => {});
组件:
父:
<light-weight-promptref="lightWeightPrompt":lightWeightData="lightWeightData"class="compare"@define="toServePage"/>
子:
<template><div class="box"><el-dialogtitle="提示":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>