在Vue / Element ui对话框中有条件地删除注入的元素

问题描述

我在vue项目中使用元素ui，显示了模态/对话框，模态中有退订输入形式。成功提交后，我会显示感谢信息。一切都按预期进行。我唯一的问题是，当显示v-else（成功消息）时，我想删除注入的Element UI“ X”关闭按钮。在注入的元素上有可能吗？

Vue /元素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>

解决方法

documentation说有一个show-close道具可以传递给el-dialog，所以请尝试传递相同的v-if / else条件：

<el-dialog :visible.sync="unsubscribeDialogVisible" :show-close="unsubscribeInitialState">