当前位置: 首页 > news >正文

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

前端问题,技术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>

相关文章:

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

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

MyBatisPlus实现多表查询

在MyBatisPlus中实现多表查询&#xff0c;主要有以下几种方法&#xff1a; 使用注解进行多表查询&#xff1a; 你可以在Mapper接口中使用Select注解来编写SQL查询语句&#xff0c;实现多表查询。例如&#xff0c;如果你想根据用户ID查询用户信息和对应的区域名称&#xff0c;可…...

机器学习详解(5):MLP代码详解之MNIST手写数字识别

文章目录 1 MNIST数据集2 代码详解2.1 导入库和GPU2.2 MNIST数据集处理2.2.1 下载和导入2.2.2 张量(Tensors)2.2.3 准备训练数据 2.3 创建模型2.3.1 图像展开2.3.2 输入层2.3.3 隐藏层2.3.4 输出层2.3.5 模型编译 2.4 训练模型2.4.1 损失函数与优化器2.4.2 计算准确率2.4.3 训练…...

如何在vue中实现父子通信

1.需要用到的组件 父组件 <template><div id"app"><BaseCount :count"count" changeCount"cahngeCount"></BaseCount></div> </template><script> import BaseCount from ./components/BaseCount.v…...

PHP实现华为OBS存储

一&#xff1a;华为OBS存储文档地址 官方文档&#xff1a;https://support.huaweicloud.com/obs/index.html github地址&#xff1a;https://github.com/huaweicloud/huaweicloud-sdk-php-obs 二&#xff1a;安装华为OBS拓展 composer require obs/esdk-obs-php 三&#x…...

嵌入式 linux Git常用命令 抽补丁 打补丁

Git常用命令 为什么要学习git呢&#xff1f;我相信刚入门的小伙伴敲打肯定碰到过这种玄学问题&#xff0c;我明明刚刚还能用的代码&#xff0c;后面不知道咋的就不能用了&#xff0c;所以每次你调出一个功能点以后都会手动复制一份代码防止出问题&#xff0c;时间一长发现整个…...

Alan Chhabra:MongoDB AI应用程序计划(MAAP) 为客户提供价值

MongoDB全球合作伙伴执行副总裁 Alan Chhabra 每当有人向我问询MongoDB&#xff0c;我都会说他们很可能在不觉之间已经与MongoDB有过交集。事实上&#xff0c;包括70%财富百强在内的许多世界领先企业公司都在使用MongoDB。我们在MongoDB所做的一切都是为了服务客户&#xff0c…...

【学习笔记】目前市面中手持激光雷达设备及参数汇总

手持激光雷达设备介绍 手持激光雷达设备是一种利用激光时间飞行原理来测量物体距离并构建三维模型的便携式高科技产品。它通过发射激光束并分析反射回来的激光信号&#xff0c;能够精确地获取物体的三维结构信息。这种设备以其高精度、适应各种光照环境的能力和便携性&#xf…...

Burp与小程序梦中情缘

前言 在日常渗透工作中&#xff0c;有时需要对微信小程序进行抓包渗透&#xff0c;通过抓包&#xff0c;我们可以捕获小程序与服务器之间的通信数据&#xff0c;分析这些数据可以帮助我们发现潜在的安全漏洞&#xff0c;本文通过讲述三个方法在PC端来对小程序抓包渗透 文章目…...

数据结构:Win32 API详解

目录 一.Win32 API的介绍 二.控制台程序(Console)与COORD 1..控制台程序(Console): 2.控制台窗口坐标COORD&#xff1a; 3.GetStdHandle函数&#xff1a; &#xff08;1&#xff09;语法&#xff1a; &#xff08;2&#xff09;参数&#xff1a; 4.GetConsoleCursorInf…...

迁移学习中模型训练加速(以mllm模型为例),提速15%以上

根据模型训练过程的显存占用实测的分析,一个1g参数的模型(存储占用4g)训练大约需要20g的显存,其中梯度值占用的显存约一半。博主本意是想实现在迁移学习(冻结部分参数)中模型显存占用的降低,结果不太满意,只能实现训练速度提升,但无法实现显存占用优化。预计是在现有的…...

socket编程UDP-实现停等机制(接收确认、超时重传)

在下面博客中&#xff0c;我介绍了利用UDP模拟TCP连接、按数据包发送文件的过程&#xff0c;并附上完整源码。 socket编程UDP-文件传输&模拟TCP建立连接脱离连接&#xff08;进阶篇&#xff09;_udp socket发送-CSDN博客 下面博客实现的是滑动窗口机制&#xff1a; sock…...

前端面试题目 (Node.JS-Express框架)[二]

在 Express 中如何使用 Passport.js 进行身份认证? Passport.js 是一个 Node.js 的身份验证中间件&#xff0c;它可以很容易地与 Express 集成。下面是一个简单的示例&#xff0c;展示了如何使用 Passport.js 进行基本的身份认证。 安装依赖 npm install express passport …...

防范TCP攻击:策略与实践

TCP&#xff08;传输控制协议&#xff09;是互联网通信的核心协议之一&#xff0c;它确保了数据在网络上的可靠传输。然而&#xff0c;TCP也容易成为各种网络攻击的目标&#xff0c;如SYN洪水攻击、TCP连接耗尽攻击等。本文将探讨如何通过配置防火墙规则、优化服务器设置以及采…...

3D 生成重建034-NerfDiff借助扩散模型直接生成nerf

3D 生成重建034-NerfDiff借助扩散模型直接生成nerf 文章目录 0 论文工作1 论文方法2 实验结果 0 论文工作 感觉这个论文可能能shapE差不多同时期工作&#xff0c;但是shapE是生成任意种类。 本文提出了一种新颖的单图像视图合成方法NerfDiff&#xff0c;该方法利用神经辐射场 …...

分布式 Paxos算法 总结

前言 相关系列 《分布式 & 目录》《分布式 & Paxos算法 & 总结》《分布式 & Paxos算法 & 问题》 参考文献 《图解超难理解的 Paxos 算法&#xff08;含伪代码&#xff09;》《【超详细】分布式一致性协议 - Paxos》 Basic-Paxos 基础帕克索斯算法…...

我的宝贵经验

在技术的浩瀚海洋中&#xff0c;一份优秀的技术文档宛如精准的航海图。它是知识传承的载体&#xff0c;是团队协作的桥梁&#xff0c;更是产品成功的幕后英雄。然而&#xff0c;打造这样一份出色的技术文档并非易事。你是否在为如何清晰阐释复杂技术而苦恼&#xff1f;是否纠结…...

geoserver 瓦片地图,tomcat和nginx实现负载均衡

在地理信息系统&#xff08;GIS&#xff09;领域&#xff0c;GeoServer作为一个强大的开源服务器&#xff0c;能够发布各种地图服务&#xff0c;包括瓦片地图服务。为了提高服务的可用性和扩展性&#xff0c;结合Tomcat和Nginx实现负载均衡成为了一个有效的解决方案。本文将详细…...

Jenkins 启动 程序 退出后 被杀死问题

参考 Spawning Processes From Build (jenkins.io) 解决jenkins脚本启动项目后进程被杀死_jenkins杀进程-CSDN博客...

SEGGER | 基于STM32F405 + Keil - RTT组件01 - 移植SEGGER RTT

导言 RTT(Real Time Transfer)是一种用于嵌入式中与用户进行交互的技术&#xff0c;它结合了SWO和半主机的优点&#xff0c;具有极高的性能。 使用RTT可以从MCU非常快速输出调试信息和数据&#xff0c;且不影响MCU实时性。这个功能可以用于很多支持J-Link的设备和MCU&#xff0…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...