vue3 elementui-plus的input框点击弹窗

最新推荐文章于 2024-04-02 17:59:26 发布
最新推荐文章于 2024-04-02 17:59:26 发布
阅读量3.9k 收藏 6
点赞数
文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40449665/article/details/126546483
版权

1. 需求

点击如图input框：
在这里插入图片描述
出现如图选择器弹框：
在这里插入图片描述

2. 踩坑

我尝试了获取焦点时的方法@focus，但是每次在点击弹框的“确定”按钮后，input框都会自动聚焦，弹框又自动出现了，我就想通过blur()方法主动失焦，但是失败了：

2.1 获取ref元素

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2 获取ref结果

按理来说，我可以打印出input框元素，但是不知道哪里出现了问题，ref始终为null，麻烦知道的朋友评论告诉我一下TAT
在这里插入图片描述

3. 解决方式

既然无法通过ref来主动失焦，那我就直接给input框添加点击事件，不通过焦点来控制弹窗的显示了，之前想的太复杂了，直接用@click就可以了…
在这里插入图片描述

Grancy-wuwuwu
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-tel-input-vuetify:Vuetify国际电话输入
05-24
vue电话输入vuetify 带Vuetify的国际电话输入。 目录 安装 示例存储库 你可能想要关注和使用这个库的基本用法示例在这个仓库 或者按照以下步骤从头开始尝试 Vue-Cli 使用vue-cli创建新的vue项目： vue create my-app cd my-app 证明 将vuetify安装到新创建的vue项目 vue add vuetify npm 将vue-tel-input-vuetify安装到新创建的vue项目 npm install vue-tel-input-vuetify 将插件安装到Vue中： 使用vuetify加载程序： // vue.config.js "transpileDependencies" : [ "vuetify" , "vue-tel-input-vuetify" ] //
点击input输入框弹出选择层(基于jquery)
12-20
点击input输入框弹出选择层(基于jquery) 网页特效,网页模板,导航菜单,焦点幻灯片,JS代码
Vue-ElementUi-router-axios:Vue基于elementUi后台管理系统
03-11
运行截图 运行动图 我的项目 预览地址： : 项目是用Vue为基础，用了路由vue-router，加载数据用了axios，UI框架用的ElementUi， 整个项目开发起来算是踩了几个坑，包括接口跨域，绝地地址，约会等， 组件化开发还是挺开心的，唯一不足的地方就是接口的数据有时候不显示，可能是API比较慢 一个Vue.js项目 构建设置 # install dependencies 安装依赖 npm install # 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # serve with hot reload at localhost:8080 运行程序 npm run dev # build for production wi
【2024最新】vue3的基本使用(超详细)
最新发布
接着奏乐接着舞的博客
04-02 1794
Vue 3是下一代前端框架，用最新技术提升网站速度和开发体验。它引入组合式API，让代码更灵活、易于管理。同时，优化的响应式系统和更好的TypeScript整合，确保了应用运行更流畅，开发更高效。通过创新特性如`Teleport`和`Suspense`，Vue 3让用户界面更快加载、更动态，无论项目大小，都能轻松应对。简单说，Vue 3让前端开发更前沿、更有趣。
vue-elementui-admin
03-20
vue-elementui-admin资料包(需要使用node的16版本直接运行npm run dev启动即可,不用安装依赖,)
vue-elementui-3：三，vue + ElementUI开发后台管理模板—功能，资源，大量组件
02-17
vue-elementui-3 的代码 更多 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
input触发弹出层，实现select 效果
热门推荐
学习那点事儿
01-15 3万+
在Html中，标签标示一个文本输入框，没有结束标签。标签就是弹出下拉框，两个标签是相互独立的，如果把两者结合在一起，那可能会成为一个新的亮点，增加用户体验。其实已经有很多比较成熟的效果，比如google的自动补全效果，在用户输入部分关键字之后，会弹出相应的下拉选项，这样都大大提高了用户的体验效果。刚好这周，客户提出要调整输入框效果，实现input和select相结合。 在组件中，这样的东西并不存
el-input 输入框鼠标放上出弹层demo效果(整理)
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
06-01 424
【代码】el-input 输入框鼠标放上出弹层demo效果(整理)
基于Element-ui 表单弹窗列表选择封装
m0_51431448的博客
01-03 4693
不知道怎么描述这个东西了。el-select下拉框大家都知道，但是下拉框只能选择一个，而且如果数据太多的话也不太容易选择，所以这里就是封装了组件包含对应的弹窗，就是能实现多选，而且列表也是分页展示的，选择完之后将对应的名称展示在文本框中，传给后端对应的用逗号隔开（用什么隔开都可以，跟后端商量）的id。这个关联合同就是我们封装的，输入框添加了disabled，不可编辑的，只能通过点击右侧弹窗来进行选择。
el-input触发 el-popover银行弹窗封装
qq_53026081的博客
04-07 2594
点击空白关掉弹窗：为了做成el-select的效果，单击空白时弹出框会关闭的效果，我写了一个全局的点击事件监听器，当点击的dom不是弹出框的内容区域就调取的el-popover的关闭函数，然后使用ref拿到弹出框的dom，这里要注意，如果是通过for循环生成的弹出框，ref拿到的会是一个数组，并且想要使用contains函数，一定要是dom节点，这里就突出了ref 和 id的不同了。html：由于业务需求，我所使用的是input作为触发组件，所以在在触发条件这里要使用自定义trigger="manual"
vue实现点击按钮，弹出对话框
qq_44206870的博客
11-08 4842
vue实现点击按钮，弹出对话框
vue-currency-input:轻松输入Vue.js的货币格式数字
04-28
Vue货币输入 Vue货币输入插件可轻松输入货币格式的数字。 它提供了一个独立的组件（ <currency> ）和一个自定义Vue指令（ v-currency ），用于使用货币格式功能来装饰现有的输入组件。 特征 和零依赖关系 键入时格式化 基于语言环境的，基于ISO的货币格式，基于 无干扰（隐藏焦点格式以便于输入） 允许将值作为整数处理，以实现全精度 自动十进制模式（使用最后输入的数字作为十进制数字自动插入十进制符号） 内置值范围验证 与流行的框架（例如或输入组件一起使用 现场演示 查看，看看它的运行情况。 快速开始 安装npm软件包： npm install vue-currency-input # OR yarn add vue-currency-input 在您的main.js添加Vue插件： import Vue from 'vue' import V
基于Vue3+ELementUI-Plus的生猪养殖管理系统源码+项目说明.zip
02-27
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。 基于Vue3+ELementUI-Plus的生猪养殖管理系统源码+项目说明.zip基于Vue3+ELementUI-Plus的生猪养殖管理系统源码+项目说明.zip基于Vue3+ELementUI-Plus的生猪养殖管理系统源码+项目说明.zip基于Vue3+ELementUI-Plus的生猪养殖管理系统源码+项目说明.zip基于Vue3+ELementUI-Plus的生猪养殖管理系统源码+项目说明.zip基于Vue3+ELementUI-Plus的生猪养殖管理系统源码+项目说明.zip基于Vue3+ELementUI-Plus的生猪养殖管理系统源码+项目说明.zip基于Vue3+ELementUI-Plus的生猪养殖管理系统源码+项目说明.zip基于Vue3+ELementUI-Plus的生猪养殖管理系统源码+项目说明.zip
vue点击input弹出带搜索键盘并监听该元素的方法
12-02
1.遇到问题： 需要做一个点击input弹出带搜索的键盘。 解决： input的type=”search”,可弹出带搜索的键盘。并监听搜索按钮，请求数据 <input @keyup.13="show()" type="search"> 2.但是又遇到一个新的问题： 点击搜索之后键盘没有收回。 解决： 通过$refs获取input 监听搜索按钮，添加.blur() <input @keyup.13=show() type="search" ref="input1"> show(){ this.$refs.input1.blur(); } 3.测试时发现ios无法弹出带搜索的键盘 解决： 给
点击输入框弹出一个选择层js
08-06
点击输入框弹出一个选择层_input点击输入框 js弹出层提示选择
【Element】element-plus中el-dialog弹窗隐藏遮罩并可以控制弹窗后的元素、点击、滚动、其他事件操作等
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-29 2445
但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。从 dom 元素我们知道 el-dialog 的层级为三层，外面两层是遮罩，第三层才是真正的弹窗元素，因此，我们需要做的就是把外层最外层的遮罩事件去掉，保留最里面的。el-dialog 隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作，比如一个弹窗打开了，我要能控制弹窗后面的滚动、点击等等一系列事件。首先我们需要隐藏弹窗遮罩。
控制输入框弹出弹窗 和不弹出窗口
hfyldx的博客
07-28 868
控制输入框弹出和不弹出页面
Element Plus Dialog中无法获取表单焦点
白的夜的博客
07-07 1508
在Dialog组件中，默认插槽是Form表单，表单子项是input,发现Dialog组件弹出时无法获取input焦点。
点击input输入框弹出选择层
qizhichao110的专栏
05-20 1万+
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 点击input输入框弹出选择层(基于jquery)    --%> body{font-size:12px;} .selectItemcont{padding:8px;} #selectItem{
vue3+elementui-plus 代码自动生成
09-06
Vue 3 是一种流行的JavaScript 框架，用于构建用户界面。它具有许多强大的功能，可帮助我们开发出高效、可重用的代码。Element Plus 是一个非常受欢迎的基于Vue 3的UI组件库，它提供了丰富的UI组件，可以帮助我们快速构建漂亮且功能丰富的网页应用程序。 在Vue 3和Element Plus的结合中，代码自动生成是一个非常重要的功能。它可以减少开发人员手动编写重复代码的时间和努力。 对于代码自动生成，一种常见的方法是使用Vue CLI。我们可以使用Vue CLI创建一个基本的Vue 3项目，并选择Element Plus作为UI组件库。然后，我们可以使用Vue CLI提供的命令行工具来自动生成一些常用的代码模板。例如，我们可以使用命令来生成一个基本的表格页面，其中包含了Element Plus的表格组件和一些常见的数据操作功能，如增删改查等。这样，我们就不需要手动编写这些重复的代码，而是可以通过命令行工具自动生成。 另外，有一些第三方工具和插件可以帮助我们实现更高级的代码自动生成功能。例如，可以使用vue-element-admin这个开源项目，它提供了一个功能强大的后台管理系统模板，集成了Vue 3和Element Plus，同时还提供了许多常用的业务组件和页面模板。我们可以基于vue-element-admin进行二次开发，根据自己的业务需求来生成特定的代码模板。 总而言之，Vue 3和Element Plus的结合为我们提供了丰富的代码自动生成功能。无论是使用Vue CLI还是借助第三方工具和插件，我们都可以通过代码自动生成来提高开发效率，减少重复劳动。这将使我们能够更快地构建出高质量的Vue 3和Element Plus应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值