发现一个对话框中的按钮,全部失效,点击都没有任何反应,已经解决

news/2024/12/16 1:16:18/

前端问题,技术vue2,ts。
发现一个对话框中的按钮,全部失效,点击都没有任何反应。
因为我只在template标签中加入下面这个代码,并没有注册。
只要有一个子组件没有注册,就会影响所有的按钮,使当前组件中的所有按钮失效。

<el-button style="margin-left: 10px;" type="primary" plain size="mini" @click="onAnti">生成防伪码</el-button>
<anti-fake-list :visible="aflVis" @close="onaflClose" />

在这里插入图片描述

发生这个问题的原因是我在config-form2.vue 这个文件中,引入新的组件anti-fake-list.vue,但是我没有注册到config-form2.vue 这个文件中。
确保 anti-fake-list 组件已经正确注册到当前组件中。
什么叫注册呢?
就是在脚本中加入下面代码。

import AntiFakeList from './anti-fake-list.vue'@Component({name: 'ave-form',components: {WFormInput,WFormDatePicker,WFormSelect,WFormTextarea,WFormRadios,WFormSingleImage,WFormMultipleImage,WFormEditor,InviteCodeList,AntiFakeList}
})

在这里插入图片描述
在这里插入图片描述

<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-bodydestroy-on-close><div class="ave-form-wrap"><div class="ave-form-box"><el-form><w-form-selectv-model="form.identificationPointAdminId"label="识别点管理"label-width="120px":operate-type="operateType":list="clistValue"option-label="nickname"option-value="friendId"/><w-form-selectv-model="form.compareAdminId"label="对比负责人"label-width="120px":operate-type="operateType":list="clistValue"option-label="nickname"option-value="friendId"/><w-form-selectv-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'
import AntiFakeList from './anti-fake-list.vue'@Component({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.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 = 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() {}
}
</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>

http://www.ppmy.cn/news/1555459.html

相关文章

解决阿里云轻量级服务器 Ubuntu 24.04.1 LTS 没网也 ping 不通 8.8.8.8 以及 route -n 没有输出任何转发信息

事情发生在两天前&#xff0c;位于公网的阿里云轻量级服务器&#xff08;Ubuntu 24.04.1 LTS&#xff09;忽然没网。主要是上次上服务器进行配置已经是一个多月前&#xff0c;最近也没有做什么事情&#xff0c;就忽然没网了&#xff0c;让人纳闷。更主要的是&#xff0c;上次备…

重庆轨道交通4号线寸滩地铁站自动化监测

1. 项目概述 本次项目位于重庆市轨道交通4号线中江北区寸滩站&#xff0c;轨道交通4号线是中国重庆市第八条开通运营的城市轨道交通&#xff0c;识别色为太阳橙。寸滩地处江北区中部&#xff0c;东与铁山坪街道毗邻&#xff0c;南与南岸区隔江相望&#xff0c;西与江北城中央商…

大模型呼入机器人的缺点是什么?(转)

大模型呼入机器人的缺点是什么&#xff1f;(转) 原作者&#xff1a;开源呼叫中心FreeIPCC&#xff0c;其Github&#xff1a;https://github.com/FreeIPCC/FreeIPCC 大模型呼入机器人在提供高效、自动化服务的同时&#xff0c;也存在一些缺点。以下是对其缺点的详细归纳&#…

基于GEC6818的点餐系统

本次项目开发环境&#xff1a;gec6818&#xff0c;QT5.14.2&#xff0c;SecureCRT。 所使用的相关技术&#xff1a;c/s架构&#xff0c;STL库&#xff0c;C封装&#xff0c;标准化代码编写 实现的功能&#xff1a;用户登录页面&#xff0c;食品分区在不同页面&#xff0c;用户…

电脑硬件检测工具AIDA64 v7.50免激活绿色版

软件介绍 全球No.1的硬件识别,诊断神器AIDA64 v6.88 2023年春季正式版发布!AIDA64中文版是一款硬件检测工具及基准测试软件(烤机软件),相对硬件玩家来说,AIDA64电脑版是设备识别性能检测不二之选,权威性遥遥领先. AIDA64 (原EVEREST)是一款综合性的系统软硬件检测工具&#x…

react-dnd 拖拽事件与输入框的文本选中冲突

问题描述 当我们使用拖拽库的时候&#xff0c;往往会遇到拖拽的一个元素他的子孙元素有输入框类型的dom节点&#xff0c;当拖拽的事件绑定在该元素身上时候&#xff0c;发现子孙的输入框不能进行文本选中了&#xff0c;会按住鼠标去选中文本的时候会触发拖拽 实际的效果&…

minio 分布式文件管理

一、minio 是什么&#xff1f; MinIO构建分布式文件系统&#xff0c;MinIO 是一个非常轻量的服务,可以很简单的和其他应用的结合使用&#xff0c;它兼容亚马逊 S3 云存储服务接口&#xff0c;非常适合于存储大容量非结构化的数据&#xff0c;例如图片、视频、日志文件、备份数…

Elasticsearch02-安装7.x

零、文章目录 Elasticsearch02-安装7.x 1、Windows安装Elasticsearch &#xff08;1&#xff09;JDK安装 Elasticsearch是基于java开发的&#xff0c;所以需要安装JDK。我们安装的Elasticsearch版本是7.15&#xff0c;对应JDK至少1.8版本以上。也可以不安装jdk&#xff0c;…