学习笔记230816---vue项目中使用第三方组件{el-dropdown}如何设置禁止事件功能

问题描述

使用第三方组件elementui,在导航菜单el-menu的el-menu-item中嵌入一个下拉菜框el-dropdown。点击...icon弹出下拉菜单el-dropdown-menu,那么这时会触发事件冒泡,el-menu-item菜单项的点击事件也会触发。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eF70Cdnr-1692428435051)(https://note.youdao.com/yws/res/29621/WEBRESOURCE289433f139fc3f51b05ac91b3cee35f8)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YojqM5G5-1692428435055)(https://note.youdao.com/yws/res/29623/WEBRESOURCEf71636afdbdcf7f2b15a4151023c75de)]

解决方法

阻止事件冒泡,点击...时,只触发...上的点击事件。 在el-dropdown上先设置trigger="click"为点击事件,因为该组件默认是悬浮出下拉框,再设置@click.stop 禁止该点击事件冒泡。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TBibMhpH-1692428435058)(https://note.youdao.com/yws/res/29625/WEBRESOURCE37bea40c6d07497fd040cd32b6363684)]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/105095.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java【手撕双指针】LeetCode 57. “两数之和“, 图文详解思路分析 + 代码

文章目录 前言一、两数之和1, 题目2, 思路分析3, 代码展示 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: 📕 JavaSE基础: 基础语法, 类和对象, 封装继承多态, 接口, 综合小练习图书管理系统等 📗 Java数据结构: 顺序表, 链表…

c++ day3

#include <iostream>using namespace std; class per {string name;int age;int *p;int *q; public:per(string name,int age,int a,int b){this->name(name);this->ageage;pnew int(a);qnew int(b);*qb;*pa;cout << "有参构造"<<endl;}void…

如何提取视频的音频到手机?这个音频提取方法很简单

提取视频中的音频可以帮助您获得视频的声音部分&#xff0c;而无需观看整个视频。这对于那些只想听视频的声音或想将视频的声音与其他音频内容混合使用的人来说非常方便。此外&#xff0c;提取音频也可以为需要创建音频剪辑或混音的音频制作者提供帮助。那么怎么提取呢&#xf…

Ant Design Vue 日期选择器DatePicker传给后台日期参数格式问题

花了一个下午才解决&#xff0c;官方组件文档里面是没有处理方案说明的。 项目版本&#xff1a;Ant Design Vue 2.0.2 前端部分代码&#xff1a; <template><a-modal:visible"visible":width"windowWidth":height"800":title"tit…

Golang Gorm 一对多关系 关系表创建

一对多关系 我们先从一对多开始多表关系的学习因为一对多的关系生活中到处都是&#xff0c;例如&#xff1a; 老板与员工女神和添狗老师和学生班级与学生用户与文章 在创建的时候先将没有依赖的创建。表名称ID就是外键。外键要和关联的外键的数据类型要保持一致。 package ma…

创建和分析二维桁架和梁结构研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

最小二乘法,残差,线性模型-线性回归

目录 什么是最小二乘法 残差是什么意思 线性模型 线性回归 方法一&#xff1a;解析解法 代码实战&#xff1a; 方法二&#xff1a;数值解法 代码实战&#xff1a; 解析法&#xff08;最小二乘&#xff09;还是数值法&#xff08;梯度下降&#xff09;&#xff0c;如何…

Unity 之 Start 与Update 方法的区别

文章目录 当谈论Unity中的 Start和 Update方法时&#xff0c;我们实际上是在讨论MonoBehaviour类中的两个常用方法&#xff0c;用于编写游戏逻辑。这两个方法在不同的时机被调用&#xff0c;因此您可以根据需要选择在哪个方法中编写特定的代码。 Start 方法&#xff1a; Start…

23款奔驰GLS450升级原厂电动吸合门,体验绅士的关门状态

电吸门的工作原理是在门框(或门板边缘)上安装一个电磁线圈。当门打开时&#xff0c;电流会流过线圈&#xff0c;形成电磁场。这样&#xff0c;由于磁力的作用&#xff0c;当门靠近门框关闭时&#xff0c;门会自动关闭。 另外&#xff0c;电吸门也有有用的一面。如果下车&#…

在线ppt转pdf如何转换?用这一个方法就够了

在线PPT转PDF是一种将PPT文件转换为PDF格式的便捷且常用的工具。随着科技的发展&#xff0c;PPT已经成为了商务、教育等领域中最常用的演示工具之一。PDF格式具有较好的稳定性和兼容性。PPT文件可能因为不同的操作系统、软件版本或字体缺失等原因而导致显示不一致或乱码等问题&…

计算机竞赛 基于CNN实现谣言检测 - python 深度学习 机器学习

文章目录 1 前言1.1 背景 2 数据集3 实现过程4 CNN网络实现5 模型训练部分6 模型评估7 预测结果8 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于CNN实现谣言检测 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&am…

自动化测试之Selenium

自动化测试Selenium介绍环境搭建如何操作浏览器定位元素css类选择器定位元素xpath定位元素css选择语法xpath选择语法 常用操作添加等待打印信息浏览器更多操作键盘事件鼠标事件特殊场景只选复选框iframe标签下拉框处理弹窗显示上传文件 关闭浏览器切换窗口截图 自动化测试 自动…

一个程序员的工作日记--每天就干两件事,一年后让别人刮目相看

文章目录 成功源于专注一、早上布局二、晚上复盘三、技术细节四、专注与成功五、专注的重要性六、忙碌和赚钱七、结论以嵌入式开发为例&#xff1a;一、早上布局二、晚上复盘三、技术细节四、专注与成功五、忙碌和赚钱六、结论在嵌入式软件开发中&#xff0c;我们需要按照以下步…

elment-ui中使用el-steps案例

el-steps案例 样式 代码 <div class"active-box"><div class"active-title">请完善</div><el-steps :active"active" finish-status"success" align-center><el-step title"第一步" /><…

c语言练习题26:调整数组使奇数位于偶数前面

调整数组使奇数位于偶数前面 题目&#xff1a; 思路&#xff1a; 代码&#xff1a; #include<stdio.h> #include<string.h> void func(int* arr, int len) {int left 0;int right len - 1;while (left < right) {while (left < right && arr[lef…

【Vue框架】基本的login登录

前言 最近事情比较多&#xff0c;只能抽时间看了&#xff0c;放几天就把之前弄的都忘了&#xff0c;现在只挑着核心的部分看。现在铺垫了这么久&#xff0c;终于可以看前端最基本的登录了&#x1f602;。 1、views\login\index.vue 由于代码比较长&#xff0c;这里将vue和js…

7、Idea下载安装与激活

1、下载 1.1 官网地址 官网地址 https://www.jetbrains.com/idea/ 点击访问 1.2 官网首页 1.3 点击右上角dowload进入以下页面选择版本 1.4 选择需要的版本进行下载 2、安装

189. 轮转数组

189. 轮转数组 class Solution { public:void rotate(vector<int>& nums, int k) {int n nums.size();k k % n;reverse(nums.begin(),nums.end());reverse(nums.begin(),nums.begin()k);reverse(nums.begin()k,nums.end());} };

IDEA远程开发

IDEA远程开发 前期准备 IDEA的远程开发是在本地去操昨远程服务器上的代码&#xff0c;所以我们先需要准备一台服务器,在此我使用vmware虚拟出ubuntu-20.04.6的Server版本,以便后面演示。 Ubuntu的Java环境配置 JDK8 sudo apt install openjdk-8-jdkmaven sudo apt instal…

Java smslib包开发

上一篇文章我详细介绍RXTXcomm的安装方法和简单代码,如果小伙伴涉及到需要使用手机短信模块完成短信收发需求的话,可以使用到smslib进行开发。 首先还是同样的,将整个smslib包源码导入项目,并且将它所需依赖一起进行导入 导入完成之后,我们就可以对smslib包进行二次开发了 下面…