当前位置: 首页 > 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…...

Kettle日志组件实战指南:从基础配置到高级调试

1. Kettle日志组件基础入门 第一次接触Kettle的日志功能时&#xff0c;我完全被各种配置选项搞晕了。后来才发现&#xff0c;这个看似简单的组件其实是调试ETL流程的利器。日志组件位于Kettle的核心对象面板中&#xff0c;你可以直接拖拽到右侧工作区&#xff0c;或者双击它自动…...

MySQL大小写规则与存储引擎详解

目录 MySQL在Linux下数据库名、表名、列名、别名大小写规则 SQL编写建议&#xff1a; 默认数据库里都是什么内容&#xff1f; &#xff08;1&#xff09;mysql &#xff08;2&#xff09;information_schema &#xff08;3&#xff09;performance_schema &#xff08;4…...

C++27异常处理增强配置(ISO/IEC 14882:2027草案第12.8节深度解密)

第一章&#xff1a;C27异常处理增强配置的标准化演进脉络C27标准委员会在异常处理机制上引入了关键性配置抽象&#xff0c;旨在统一跨编译器、跨平台的异常行为语义。核心演进方向聚焦于将异常传播策略、栈展开控制与诊断信息生成三者解耦&#xff0c;并通过标准化属性和编译期…...

【仅限头部AI团队内部流通】Python智能内存策略白皮书V3.2:基于LLM驱动的动态内存预测模型实测报告

第一章&#xff1a;Python智能体内存管理策略安全性最佳方案概览Python智能体在高并发、长周期运行场景下面临内存泄漏、引用循环、敏感数据残留等安全风险。其内存管理机制虽以引用计数为主、辅以分代垃圾回收&#xff08;GC&#xff09;&#xff0c;但默认行为不足以保障智能…...

Flutter鸿蒙应用开发:数据分享功能实现

&#x1f525;Flutter鸿蒙应用开发&#xff1a;数据分享功能实现&#xff08;macOSDevEco Studio&#xff09; 欢迎加入开源鸿蒙跨平台社区&#xff1a;https://openharmonycrossplatform.csdn.net &#x1f4c4; 文章摘要 本文为Flutter for OpenHarmony跨平台应用开发系列实…...

如何比较不同注册商的域名注册价格_如何查看域名的SEO数据和排名信息

如何比较不同注册商的域名注册价格 在互联网时代&#xff0c;域名已经成为网站的“门面”&#xff0c;是网站建设的重要一步。不同注册商的域名注册价格差异较大&#xff0c;如何在保证性价比的前提下选择合适的注册商成为了一个重要的问题。本文将详细探讨如何比较不同注册商…...

软件工程导论简答题速查手册:高频考点+避坑指南(附PDF下载)

软件工程导论高频考点精粹&#xff1a;命题陷阱破解与记忆强化指南 面对软件工程导论考试中纷繁复杂的简答题&#xff0c;许多考生常陷入"知识点背了却不会答题"的困境。这份手册从历年真题大数据中提炼出最高频出现的50个核心考点&#xff0c;采用"命题视角记忆…...

保姆级教程:在Ubuntu 22.04上从源码编译安装Micro XRCE-DDS Agent(附虚拟机环境配置)

从零构建嵌入式通信桥梁&#xff1a;Ubuntu 22.04源码编译Micro XRCE-DDS Agent全指南 当AURIX Tricore这类嵌入式设备需要与复杂系统对话时&#xff0c;XRCE-DDS就像一位专业翻译官。想象一下&#xff0c;你的开发板是个只会说方言的本地向导&#xff0c;而云端服务是个讲标准…...

【问题修复】ubuntu24.04打不开windows的D盘

目录1 问题描述2 解决方法2.1 重新挂载1 问题描述 在ubuntu24.04上&#xff0c;打不开windows系统中D盘。 2 解决方法 2.1 重新挂载 sudo ntfsfix /dev/nvme0n1p5 sudo mount /dev/nvme0n1p5 /mnt #挂载到/mnt上...

基于深度学习的手把手学习 YOLOv8-Pose 关键点检测实战:杂草根茎关键点标注与训练全流程指南

YOLOv8-Pose 关键点检测实战&#xff1a;杂草根茎关键点标注与训练全流程指南 作者&#xff1a;张教授&#xff08;计算机视觉与农业AI实验室主任&#xff09; 引言在精准农业和智能除草领域&#xff0c;杂草根茎关键点检测技术具有重要意义。传统YOLO系列主要关注目标检测&…...