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

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

【安全篇】金刚不坏之身:整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

恶补电源:1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

C++_哈希表

本篇文章是对C学习的哈希表部分的学习分享 相信一定会对你有所帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、基础概念 1. 哈希核心思想&#xff1a; 哈希函数的作用&#xff1a;通过此函数建立一个Key与存储位置之间的映射关系。理想目标&#xff1a;实现…...