In my Vue project, I am using Element UI to display a modal/dialog with an unsubscribe input form. Upon successful submission of the form, a thank you message is displayed. Everything is working perfectly, except for one issue - I want to remove the close button (the "X" button) that Element UI injects when the success message is shown. Is there a way to achieve this within the injected element?
Vue / Element UI:
<el-dialog :visible.sync="unsubscribeDialogVisible">
<div class="dialog-content">
<transition name="fadeIn" mode="out-in">
<div v-if="unsubscribeInitialState" key="initial" class="dialog-unsubscibe--initial">
<!-- unsubscribe form -->
<template>
<el-form :model="unsubscribeForm" ref="unsubscribeForm" :rules="unsubscribeRules"
class="unsubscribe-form">
<el-form-item prop="email" class="form-item--text form-item--input">
<el-input placeholder="Email address*" type="email" name="emailUnsubscribe"
id="emailUnsubscribe" v-model="unsubscribeForm.email"></el-input>
</el-form-item>
<button @click.prevent="submitForm('unsubscribeForm')"
class="button button--primary button--submit">
Submit
</button>
</el-form>
</template>
<!-- end: unsubscribe form -->
</div>
<!-- unsubcsribe success -->
<div v-else key="success" class="dialog-unsubscribe--success">
<div class="title">
<h1 class="title-1 font--primary">
<b>You have been successfully unsubscribed</b>
</h1>
</div>
<!-- /.title -->
<button @click="closeSuccessMessage()" class="button--submit">
Close
</button>
</div>
</transition>
</div>
</el-dialog>
<script>
import { Form, FormItem, Input, Dialog } from "element-ui";
export default {
name: "Unsubscribe",
components: {
"el-dialog": Dialog,
"el-form": Form,
"el-form-item": FormItem,
"el-input": Input
},
data() {
const validateEmail = (rule, value, callback) => {
if (value === "") {
callback(new Error("Please enter valid email address"));
} else {
if (this.unsubscribeForm.email !== "") {
this.$refs.unsubscribeForm.validateField("email");
}
callback();
}
};
return {
unsubscribeDialogVisible: false,
unsubscribeInitialState: true,
unsubscribeForm: {
email: ""
},
unsubscribeRules: {
email: [
{
type: "email",
required: true,
message: "Please enter email address",
trigger: ["blur", "change"]
}
]
}
};
},
methods: {
showDialog() {
this.unsubscribeDialogVisible = true;
},
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
console.log("unsubscribe success");
this.unsubscribeInitialState = !this.unsubscribeInitialState;
this.$refs[formName].resetFields();
} else {
console.log("unsubscribe form submit error");
return false;
}
});
},
closeSuccessMessage() {
this.unsubscribeDialogVisible = false;
setTimeout(() => {
this.unsubscribeInitialState = true;
}, 300);
},
resetForm() {
setTimeout(() => {
this.$refs.unsubscribeForm.resetFields();
}, 500);
}
},
mounted() {
document
.querySelector(".el-dialog__headerbtn")
.addEventListener("click", this.resetForm);
}
};
</script>