Vue自定义指令实现Element-UI输入框的自动聚焦

最新推荐文章于 2024-04-11 08:21:20 发布
最新推荐文章于 2024-04-11 08:21:20 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 前端 文章标签： vue.js javascript
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_15651815/article/details/105222837
版权
本文介绍了在Vue中如何使用自定义指令解决Element-UI的el-input输入框无法自动聚焦的问题。官方方法无效，通过分析DOM结构发现input被外层标签包裹。解决方案是修改自定义指令代码，确保焦点正确设置到输入框上。
摘要由CSDN通过智能技术生成

Vue自定义指令实现Element-UI输入框的自动聚焦

按照官网的Vue自定义指令directives设置Element-UI的el-input输入框获取焦点无法生效，通过查看浏览器解析出的Element-UI的DOM树发现，Element-UI的input外层包裹了一层<div><div/>标签，浏览器解析如下：
在这里插入图片描述
根据DOM结构更改自定义指令代码如下：

directives: {
   
    cusfocus: {
   
      inserted: function (el) {
   
        el.children[
最低0.47元/天 解锁文章
一亿少女的梦
关注
专栏目录
vue v-dialogDrag自定义指令 + element-ui: 实现弹窗拖拽组件
weixin_46391323的博客
03-31 7956
有一个dialog弹框，弹框的背景并不是全屏的，只在除header，sidebar的地方显示，要求拖拽dialog弹框不能超过背景。 在components/common创建directives.js，具体代码如下: import Vue from 'vue'; // v-dialogDrag: 弹窗拖拽属性 Vue.directive('dialogDrag', { bind(el, ...
el-input自定义指令封装
虞公子的博客
04-21 1030
自定义指令 - 输入框限制 将以下代码复制到一个js文件中，然后在入口文件main.js中import引入即可； 指令参数 max 限制最大输入（可选） min 限制最小输入（可选） places保留小数点位数（可选，默认为2位）step限制输入长度（可选，默认为16位长度） /** *@max {number}//最大值 *@min {number}//最小值 *@places {number}//小数位数(默认为2) *@step {number}//步长(默认为16位) */ imp
Vue Element UI input输入框focus()无法获取焦点
weixin_64663822的博客
05-25 2473
在做后台管理系统的时候需要实现，点击出现input框让后进行修改。 原来的我的代码写成这样。 this.$nextTick(() => { this.$refs.Textinp.focus(); }); 后来我发现，无法获取焦点是因为我使用了show来隐藏input框，导致页面有很多id为Textinp的输入框，把v-show改成v-if就可以解决这个问题 ...
element-ui vue input输入框自动获取焦点聚焦
未末的博客
02-28 5143
有时候会遇到要输入框自动获取焦点的情况，解决如下： 方法一： 步骤： 1.在script中写directives,注册一个全局的自定义指定 v-focus directives: { focus: { inserted: function(el) { el.querySelector("input").focus(); } } }, 2.在input框直接使用 <el-input ... v-focus > </el-.
自定义指令：el-input获取焦点清空默认值，失去焦点获取默认值 输入不变化
最新发布
qq_45810474的博客
04-11 887
本文主要由一次开发需求 产品说用户每次都需要删除上次的输入值才能在输入 能不能 用户点击获取焦点的时候直接帮他把默认值清空 如果没有改变就还原默认值 如果输入了默认值就不要了 保留输入的值 产生的这次开发的el-input 的自定义指令
自定义指令
HQ\(^o^)/的博客
07-22 198
自定义指令 ,Vue.directive
自定义指令实现el-input-number的动态精度
jinnang的博客
06-15 1337
el-input-number组件不仅可以正确回写出数字的小数位，且能根据用户输入的数字动态变更el-input-number的精度，即precision 属性值。
vue element-ui实现input输入框金额数字添加千分位
10-15
在本篇文章中，作者详细介绍了如何利用Vue和Element-UI框架实现输入框中金额数字的千分位格式化，以及如何在用户输入时处理这些金额数字。以下详细知识点的总结： 1. 使用Vue和Element-UI框架 Vue是一个开源的...
VUE.js+element-ui实现JSON编辑器
07-24
在这个"VUE.js+element-ui实现JSON编辑器"项目中，开发者利用Vue.js的响应式数据绑定和组件化特性，结合Element-UI的组件库，创建了一个可以在网页上编辑JSON数据的工具。JSON（JavaScript Object Notation）是一种...
Vue2.x Todo之自定义指令实现自动聚焦的方法
12-12
我们希望用户双击 todo 进入编辑状态后输入框自动获取焦点，而不是需要先手动点一下。input 元素有一个 focus 方法可以来帮我们完成这个事情，但现在的问题是如何在 Vue 中获得这个 input 元素，从而来操作它。Vue 的自定义指令可以完成这个功能。 我们先来看看 Vue 官网的一个示例： 然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下： 一个输入框： 当页面加载时，该元素将获得焦点 (注意： autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应
使用Vue.js和Element-UI做一个简单登录页面的实例
10-18
Element-UI是饿了么前端团队开发的一套基于Vue 2.0的桌面端组件库，它包含了丰富的UI组件，例如按钮、输入框、表单等，并且遵循了通用的规范设计，使得开发者能够快速构建高质量的Web应用。 3. 登录页面的构建： 在...
el-input添加自定义指令只允许输入中文/英文/数字，兼容输入法事件
diu拿星的博客
08-17 1240
compositionstart、compositionend
自定义Vue指令实现el-input格式化为保留两位小数
cfnwmp的博客
03-25 2949
<template> <el-input v-twoNum v-model="value1"> </el-input> </template> <script> export default { data() { return { value1: '' } }, directives: { twoNum: { update: function(.
用自定义指令的方式校验el-input不能输入特殊字符
shensa5556的博客
11-04 1544
用自定义指令的方式校验el-input不能输入特殊字符
vue element ui input 自动获取焦点（解决只有第一次起作用问题，autofocus失效问题解决）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
01-21 4142
原因： autofocus是vue中input的原生属性,element也支持这种方法, 但是element中的el-input组件外面还有其他组件, 导致autofocus失效, 只能手动调用focus方法来聚集。 解决方案： 借助动态绑定ref属性，在this.$nextTick调用focus()方法。 在线运行 <div id="app"> <div v-for="(item,i) in data"> {{item.id}}.{{item.text}}
vue的input框始终聚焦 element
weixin_47353884的博客
04-25 1037
写自定义指令 directives: { focus: { inserted: (el) => { el.focus(); }, }, }, <input type="text" v-if="flag" v-focus /> 通过v-if来控制input框的显示隐藏 并且保证每次显示input框都聚焦
【vue3】el-input 的获取焦点——el挂载：自定义指令，focus使 input 获取焦点（el-input 的Input Methods）
清凌的博客
06-03 8190
参考网址： （适用vue2）让element-ui的输入框聚焦的4种方式 ElementUI：使input自动聚焦的两种方法 使el-form中的el-input自动获取焦点 在vue3中，保留了自定义指令的特性——【官网链接】：自定义指令 代码：  注意这里的el需要使用el.children[0].focus();  因为el-input这是个组件，input外面被一层 div 包裹着, el打印出来是外面这个 div，需要找到内层的input 详情见：分析（点击跳转到分析） directives
vue 获取焦点_Vue自定义全局指令和局部指令
weixin_42510792的博客
01-11 417
大家好，我是羊歌，欢迎收看《羊歌编程笔记》。 在上个vue的视频课程里，我和大家分享了《自定义指令》的定义及作用，今天我要和大家分享的内容呢，是接着上集视频的内容，主要和大家讲解一下，自定义指令实操部分。让大家对自定义的指令中全局注册指令和局部注册指令有一个更深入的了解。(图一)自定义指令实操 本次内容要展示的内容：是用Vue自定义全局指令和局部指令这两种方案，来实现输入框自动获取焦点。效果图如...
Vue2 UI框架Element-UI源码解析
- Element UI的组件通过Vue的指令、数据绑定、事件处理等特性实现高度的交互性。 - 在使用Element UI时，开发者可以通过自定义样式和组件行为来适配项目的设计要求。 - Element UI支持国际化，适合需要多语言支持...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值