1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 弹框二次弹窗删除

弹框二次弹窗删除

时间:2023-12-27 08:58:39

相关推荐

弹框二次弹窗删除

记一下最近用到的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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。