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

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...