elementUI 下拉框实现隐藏时触发相关事件

已于 2022-10-11 11:21:41 修改
阅读量1.2k 收藏 2
点赞数
分类专栏： Vue 文章标签： elementui javascript vue.js
于 2021-10-14 16:56:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43787651/article/details/120767742
版权
本文介绍了如何在Vue中监听el-select组件的可见性变化，并通过@visible-change事件进行响应。当下拉框隐藏时，调整相关元素的z-index，确保页面样式正确显示。同时，使用popper-class属性设置额外的class，增强了组件的定制能力。
摘要由CSDN通过智能技术生成

el-select 下拉框隐藏时触发相关事件 =>@visible-change
设置额外的class，=> popper-class

	@visible-change="changeValue1($event)"

	changeValue1: function(callback, vc) {
				//只有回调参数为true时才触发 ctx.getAreaListDataSearch(vc,1)这个函数;
				if (callback === true) {
					document.getElementsByClassName("quhua")[0].style.zIndex = "-1";
				} else {
					document.getElementsByClassName("quhua")[0].style.zIndex = "1200";
				}
			},
跳跳的小古风
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementUI 下拉框隐藏时触发相关事件（下拉框下拉显示时不触发）
weixin_30291791的博客
07-15 5885
原文：https://blog.csdn.net/CarryBest/article/details/79959389 今天做项目时，用elementUI框架，需要下拉框隐藏时出发某个函数，用了visible-change这个函数，发现点击时会触发两次我自己定义的函数，看了下官网的解释 ：下拉框出现/隐藏时触发 如果只想在下拉框隐藏时触发该怎么做呢?下面是解决办法：官网定义：Select E...
vue3 element-plus @visible-change默认触发两次事件的解决方法
H_Dsheng的博客
07-16 8100
解决@visible-change默认触发两次事件发送两次请求的问题
vue elementui select多选下拉库组件鼠标移出隐藏下拉框
Z18834071903的博客
05-13 493
vue elementui select多选下拉库组件鼠标移出隐藏下拉框
el-select隐藏下拉框
weixin_57004793的博客
11-07 1043
el-select隐藏下拉框
el-select 隐藏下拉列表内容区
weixin_54514048的博客
04-25 602
jqery隐藏下拉框。
vue2+element ui el-select下拉框清空 会自动触发校验规则的解决方案
Zwxlovewq的博客
08-06 2212
vue2+element ui el-select下拉框清空 会自动触发校验规则的解决方案
基于element-ui封住Select下拉框
清蒸西兰花
09-29 884
工作上用到select框支持搜索和分页等功能
element下拉列表触发_Vue实战073：可输入的下拉框组件功能实现
weixin_39947501的博客
11-20 673
我们在开发项目时候经常会遇到这样的需求，提供一个可选择的下拉框，下拉列表中提供了常见的选项。当所提供选项选项无法满足用户需求时用户可以自行输入所需参数。为了满足大部分的用户需求我们可以封装一个通用组件来满足多种需求，当调用的组件的时候配置好参数就可以快速实现所需功能了。图来自“互联网”​组件实现的功能：1，可定义组件宽度，下拉宽度与组件宽度一致；类型number，默认值100；2，可定义后缀，默认...
Vue 中既可以输入也可以下拉选择(改进版)
技术记录薄
01-16 3911
项目场景：由于前些天，弄了一个下拉选择，也可以输入的，input输入框，但我感觉效果并不是很优美，所以今天对以前的代码，改进并进行优化。达到一个完美的效果。
Vue页面antd select多选模式下（mode=“multiple“），点击框外下拉选项无法收起的问题完美解决
灿灿大王搭建的黄金屋
11-19 7613
<a-select class="w260" allowClear :maxTagTextLength="maxTagTextLength" mode="multiple" :open="isOpen" @focus="isOpenFocus" @ch...
el-select内嵌套el-select---筛选下拉列表遇到的若干问题及解决
放弃不难，但坚持一定很酷！
01-11 3953
el-select内嵌套el-select遇到的若干问题及解决方案
vue项目element-ui中el-select回车键隐藏下拉框，实现按回车键查询
热门推荐
在奔跑中寻找的博客
10-29 1万+
需求： 1、页面中有输入框，选择框，日期时间选择，按回车键实现查询功能 网上查了都是在el-select弹框消失时（visible-change返回false），使select失去焦点的，然后页面document绑定keyup事件。 这样做，如果页面上其它控件有回车事件，就会被覆盖掉，比如分页选择器中的回车事件。 解决思路： 1、隐藏下拉框：查看el-select源码发现下拉框的显示隐藏由visible变量在回车键按下去时(keydown)控制。这就好办了，给组件设置keydown事件，控制组件上的visi
element el-time-select 搭配 MessageBox使用，给 el-time-select 添加 @focus事件弹出this.$alert，弹出的提示框关闭后马上又弹出
03-13 876
element el-time-select 搭配 MessageBox使用，给 el-time-select 添加 @focus事件弹出this.$alert，弹出的提示框关闭后马上又弹出
element-ui一些常用组件的二次封装
qq_53089988的博客
03-15 5087
组件封装 创建components文件夹，并且创建封装组件 1.Table——表格封装 <template> <div> <el-table :data="tableData" style="width: 100%" :stripe="stripe" :border="border" :size="size" v-loading="loading" @selection-change="handleSelectionChang.
el-selcet隐藏下拉框
qq_42523321的博客
07-28 3963
因项目需求是获取焦点弹出列表，勾选列表可多选，选择完成点击确定回显到页面上，但点击获取焦点的时候el-selcet下拉框会显示，所以需要隐藏，记录一下隐藏下拉框方法 <el-select v-model=“taskRuleForms.portfolioProjectName” ref=“chooseProjectName” placeholder=“请选择” @focus=‘handleTestTasks’ multiple style=“width:240px”> 绑定ref
前端如何修改组件库源码来封装符合自己需求的组件？
嘿嘿
12-10 862
前端开发的同学们或许会遇到这样的问题：产品中需要实现某项功能，常用的elementui、antd等组件库中确实有差不多功能的组件。但实际上这些组件可能并不能满足你的功能，或多或少都需要你去看看如何修改它才能满足你的需求。 比如我曾遇到过element-ui中的「树形控件」暴露出的参数没有我需要的（获取参数）；或者是「对话框」组件我需要给它的body加上上下两条border等（样式修改）；还有「级联选择器」的多选可搜索功能：需要修改级联看板使它保持展开，且当子节点全部选中时，不展示全部子节点...
elementui下拉框实现滚动
最新发布
07-17
在Element UI中，下拉框组件`el-select`默认情况下并不会自动滚动显示所有选项，如果选项较多导致无法一次性展示，你可以通过设置一些属性来实现滚动功能： 1. **懒加载** (virtual-scroll): 可以使用虚拟滚动(virtual-scroll)特性，当用户滚动到底部时动态加载更多选项。这需要配合`v-model.lazy`以及自定义的`load-data`函数来实现。首先，在组件上启用`lazy`: ```html <template> <el-select v-model.lazy="selectedValue" :virtual-scroll="true"> <!-- ... --> </el-select> </template> <script> export default { data() { return { selectedValue: '', options: [], // 初始化时只包含一部分选项 // 其他数据管理相关的代码... }; }, methods: { async loadChildren(page) { const newOptions = await fetchMoreData(page); // 获取更多的数据 this.options.push(...newOptions); }, }, }; </script> ``` 然后在`methods`里添加`loadData`函数，该函数会在用户触发滚动底部时异步加载更多项。 2. **第三方库** 或者自定义滚动条: 如果想使用更丰富的滚动体验，可以考虑引入第三方滚动库如iview的`i-select`组件，它内置了滚动条功能。或者你也可以直接在下拉框外部包裹一个滚动区域，并监听其滚动事件来自定义滚动。 注意：确保你的API支持分页或者其他合适的方式提供大量数据，否则滚动效果可能会受性能影响。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值