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

Question

我在一个 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>

Answer 1

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

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

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

Remove injected element conditionally in vue / element ui dialog

javascript

vue.js

nuxt.js

element-ui