Vue.js:el-input自动获取焦点通过自定义指令实现v-focus

简介: Vue.js:el-input自动获取焦点通过自定义指令实现v-focus

文档

使用 el-input组件提供的参数autofocus 自动获取焦点,效果不是很好

Vue.js2 官网提供的示例

import Vue from 'vue'
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

如果使用el-input需要做如下改进

<el-input v-focus></el-input>
import Vue from 'vue'
Vue.directive('focus', {
  inserted(el, binding, vnode) {
    el.querySelector('input').focus()
  },
})

参考

在vue项目中引用element-ui时 让el-input 获取焦点的方法


相关文章
|
JavaScript
【vue】 vue2 自定义指令 实现全屏 、对话框拖拽
【vue】 vue2 自定义指令 实现全屏 、对话框拖拽
572 2
|
JavaScript
Vue3 自定义指令
Vue3 自定义指令
151 1
|
JavaScript 前端开发 开发者
前端技术分享:Vue.js 中的自定义指令
【10月更文挑战第1天】前端技术分享:Vue.js 中的自定义指令
230 5
|
JavaScript UED
在 Vue 中使用自定义指令
【10月更文挑战第14天】通过合理地使用自定义指令,可以为 Vue 应用带来更多的灵活性和扩展性,提高开发效率和用户体验。
417 155
|
JavaScript 前端开发 编译器
Vue自定义指令详解
Vue自定义指令详解
150 0
|
JavaScript 前端开发 开发者
Vue的自定义指令:创建自定义指令的技术详解
【4月更文挑战第24天】Vue.js 允许开发者创建自定义指令以扩展其功能。自定义指令提供灵活性,但需根据需求和最佳实践谨慎使用。
|
JavaScript API 开发者
自定义指令:创建和使用Vue自定义指令
【4月更文挑战第24天】Vue.js允许开发者创建自定义指令以适应特定需求,增强代码复用和可维护性。通过`Vue.directive`全局注册或组件内`directives`局部注册,定义指令行为。以`highlight`指令为例,展示`bind`和`click`钩子改变元素背景色。自定义指令包含多个生命周期钩子,可处理参数,提供灵活性。它们扩展HTML功能,封装复杂逻辑,提升代码质量,是Vue开发中的强大工具。
212 3
|
JavaScript 前端开发
vue自定义指令_按钮权限设计(从0创建项目开始设计)
vue自定义指令_按钮权限设计(从0创建项目开始设计)
130 1
|
JavaScript 前端开发 数据安全/隐私保护
【vue】自定义指令实现 复制、长按、水印 功能
【vue】自定义指令实现 复制、长按、水印 功能
832 0