遇到一个前端bug，点击生成邀请码

打开对话框

然后我再点击叉号，退出对话框，虽然退出了对话框，但是显示灰色界面。如下图：

导致界面就会失效，点击任何地方都没有反应。
发现是如下代码的问题：

    <invite-code-list 
      :visible.sync="inviteFormVisible" 
      @success="handleInviteSuccess" 
      v-if="inviteFormVisible"
    />

只需要把v-if="inviteFormVisible"这个代码去掉就可以解决，点击叉，显示灰色背景界面就可以得到解决。

    <invite-code-list 
      :visible.sync="inviteFormVisible" 
      @success="handleInviteSuccess" 
    />

<template>
  <el-dialog
    :visible="visible"
    :before-close="handleTopRightClose"
    :close-on-click-modal="false"
    :title="`${operateType === 'add' ? '添加' : operateType === 'view' ? '查看' : operateType === 'edit' ? '编辑' : ''}`"
    width="55vw"
    top="15vh"
    append-to-body
    destroy-on-close
  >
    <div class="ave-form-wrap">
      <div class="ave-form-box">
        <el-form>
          <w-form-select
            v-model="form.identificationPointAdminId"
            label="识别点管理"
            label-width="120px"
            :operate-type="operateType"
            :list="clistValue"
            option-label="nickname"
            option-value="friendId"
          />
          <w-form-select
            v-model="form.compareAdminId"
            label="对比负责人"
            label-width="120px"
            :operate-type="operateType"
            :list="clistValue"
            option-label="nickname"
            option-value="friendId"
          />
          <w-form-select
            v-model="form.brandId"
            label="品牌"
            label-width="120px"
            :operate-type="operateType"
            :list="brandSels"
            option-label="name"
            option-value="id"
          />
        </el-form>
      </div>
    </div>
    <div slot="footer" class="form-footer">
      <div class="operateArea">
        <div class="left-btns">
          <el-button type="primary" plain size="mini" @click="showInviteForm">生成邀请码</el-button>
          <el-button style="margin-left: 10px;" type="primary" plain size="mini" @click="onAnti">生成防伪码</el-button>
        </div>
        <div class="right-btns">  
          <el-button @click="handleFooterClose">取消</el-button>
          <el-button v-if="operateType !== 'view'" size="mini" type="primary" @click="handleSubmit">提交</el-button>
        </div>
      </div>
    </div>  
    <invite-code-list 
      :visible.sync="inviteFormVisible" 
      @success="handleInviteSuccess" 
    />
    <!-- <anti-fake-list :visible="aflVis" @close="onaflClose" /> -->
  </el-dialog>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit, Watch } from 'vue-property-decorator'
import { AppModule } from '@/store/modules/app'
import { UserModule } from '@/store/modules/user'
import { productAll } from '@/api/product'
import { esave } from '@/api/fake-config'
import { qedits as brandAll } from '@/api/brand'

import WFormInput from '@/components/DialogForm/func/w-form-input.vue'
import WFormSelect from '@/components/DialogForm/func/w-form-select.vue'
import WFormTextarea from '@/components/DialogForm/func/w-form-textarea.vue'
import WFormDatePicker from '@/components/DialogForm/func/w-form-date-picker.vue'
import WFormRadios from '@/components/DialogForm/func/w-form-radios.vue'
import WFormSingleImage from '@/components/DialogForm/func/w-form-single-image.vue'
import WFormMultipleImage from '@/components/DialogForm/func/w-form-multiple-image.vue'
import WFormEditor from '@/components/DialogForm/func/w-form-editor.vue'
import InviteCodeList from './invite-code-list.vue'

@Component({
  name: 'ave-form',
  components: {
    WFormInput,
    WFormDatePicker,
    WFormSelect,
    WFormTextarea,
    WFormRadios,
    WFormSingleImage,
    WFormMultipleImage,
    WFormEditor,
    InviteCodeList
  }
})
export default class extends Vue {
  public role = UserModule.roles[0]
  public sid = UserModule.id

  @Prop({ default: () => {} })
  private value?: any

  @Prop({ default: true })
  private visible!: boolean

  @Prop({ default: 'add' })
  private operateType!: string

  @Prop({ default: () => [] })
  private clist!: any

  @Watch('clist')
  watchClist(v: any) {
    this.clistValue = [{ nickname: '自己', friendId: this.sid }, ...v]
  }

  @Watch('value')
  watchValue(v: any) {
    this.$nextTick(() => {
      this.getProducts()
      this.getBrands()
      this.form = { ...v }
    })
  }

  private form: any = {}
  private productList: any = []
  private clistValue: any = []
  private brandSels: any = []
  private inviteFormVisible = false
  private antiCode = ''

  private async getProducts() {
    const res: any = await productAll()
    if (res?.code === 0) {
      this.productList = res?.data?.content
    }
  }

  private async getBrands() {
    const res: any = await brandAll()
    this.brandSels = res?.data
  }

  private handleTopRightClose() {
    this.$emit('close', false)
  }
  

  private handleFooterClose() {
    this.$emit('close', false)
  }

  private handleSubmit() {
    this.save()
  }

  private async save() {
    const data = this.form
    const res: any = await esave(data)
    if (res?.code === 0) {
      this.$emit('close', true)
    }
  }

  private showInviteForm() {
    console.log('showInviteForm 被调用');
    // this.$store.state.inviteFormVisible = true;
    this.inviteFormVisible = true
  }

  private handleInviteSuccess() {
    // 邀请码生成成功后的处理，比如刷新列表等
  }

  // private aflVis: boolean = false

  // private onAnti() {
  //   // todo
  //   this.aflVis = true
  // }

  @Watch('inviteFormVisible')
  private onInviteFormVisibleChange(newVal: boolean) {
    console.log('inviteFormVisible 变化:', newVal);
  }

  mounted() {}
}
</script>

<style scoped lang="scss">
.ave-form-wrap {
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  .ave-form-box {
    width: 30%;
  }
}

.form-footer {
  .operateArea {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left-btns {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .right-btns {
      display: flex;
      gap: 10px;
    }
  }
}
</style>