数码电子产品网站名称,营销网站开发找哪家,建立音乐网站,展览馆网站建设方案书文章目录 遇到一个前端bug#xff0c;点击生成邀请码 打开对话框 然后我再点击叉号#xff0c;退出对话框#xff0c;虽然退出了对话框#xff0c;但是显示灰色界面。如下图#xff1a; 导致界面就会失效#xff0c;点击任何地方都没有反应。 发现是如下代码的问题点击生成邀请码 打开对话框 然后我再点击叉号退出对话框虽然退出了对话框但是显示灰色界面。如下图 导致界面就会失效点击任何地方都没有反应。 发现是如下代码的问题 invite-code-list :visible.syncinviteFormVisible successhandleInviteSuccess v-ifinviteFormVisible/只需要把v-ifinviteFormVisible这个代码去掉就可以解决点击叉显示灰色背景界面就可以得到解决。 invite-code-list :visible.syncinviteFormVisible successhandleInviteSuccess /templateel-dialog:visiblevisible:before-closehandleTopRightClose:close-on-click-modalfalse:title${operateType add ? 添加 : operateType view ? 查看 : operateType edit ? 编辑 : }width55vwtop15vhappend-to-bodydestroy-on-closediv classave-form-wrapdiv classave-form-boxel-formw-form-selectv-modelform.identificationPointAdminIdlabel识别点管理label-width120px:operate-typeoperateType:listclistValueoption-labelnicknameoption-valuefriendId/w-form-selectv-modelform.compareAdminIdlabel对比负责人label-width120px:operate-typeoperateType:listclistValueoption-labelnicknameoption-valuefriendId/w-form-selectv-modelform.brandIdlabel品牌label-width120px:operate-typeoperateType:listbrandSelsoption-labelnameoption-valueid//el-form/div/divdiv slotfooter classform-footerdiv classoperateAreadiv classleft-btnsel-button typeprimary plain sizemini clickshowInviteForm生成邀请码/el-buttonel-button stylemargin-left: 10px; typeprimary plain sizemini clickonAnti生成防伪码/el-button/divdiv classright-btns el-button clickhandleFooterClose取消/el-buttonel-button v-ifoperateType ! view sizemini typeprimary clickhandleSubmit提交/el-button/div/div/div invite-code-list :visible.syncinviteFormVisible successhandleInviteSuccess /!-- anti-fake-list :visibleaflVis closeonaflClose / --/el-dialog
/template
script langts
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/brandimport 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.vueComponent({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.idProp({ default: () {} })private value?: anyProp({ default: true })private visible!: booleanProp({ default: add })private operateType!: stringProp({ default: () [] })private clist!: anyWatch(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 falseprivate 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.formconst 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() {}
}
/scriptstyle scoped langscss
.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
