没有备案的交易网站,wordpress文章浏览数,网页界面布局,网站建设服务合约前端问题#xff0c;技术vue2#xff0c;ts。 发现一个对话框中的按钮#xff0c;全部失效#xff0c;点击都没有任何反应。 因为我只在template标签中加入下面这个代码#xff0c;并没有注册。 只要有一个子组件没有注册#xff0c;就会影响所有的按钮#xff0c;使当前…前端问题技术vue2ts。 发现一个对话框中的按钮全部失效点击都没有任何反应。 因为我只在template标签中加入下面这个代码并没有注册。 只要有一个子组件没有注册就会影响所有的按钮使当前组件中的所有按钮失效。
el-button stylemargin-left: 10px; typeprimary plain sizemini clickonAnti生成防伪码/el-button
anti-fake-list :visibleaflVis closeonaflClose /发生这个问题的原因是我在config-form2.vue 这个文件中引入新的组件anti-fake-list.vue但是我没有注册到config-form2.vue 这个文件中。 确保 anti-fake-list 组件已经正确注册到当前组件中。 什么叫注册呢 就是在脚本中加入下面代码。
import AntiFakeList from ./anti-fake-list.vueComponent({name: ave-form,components: {WFormInput,WFormDatePicker,WFormSelect,WFormTextarea,WFormRadios,WFormSingleImage,WFormMultipleImage,WFormEditor,InviteCodeList,AntiFakeList}
})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.vue
import AntiFakeList from ./anti-fake-list.vueComponent({name: ave-form,components: {WFormInput,WFormDatePicker,WFormSelect,WFormTextarea,WFormRadios,WFormSingleImage,WFormMultipleImage,WFormEditor,InviteCodeList,AntiFakeList}
})
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
