只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
如果想注册局部指令，组件中也接受一个 directives 的选项：
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：
<input v-focus>
封装自定义vue指令 1. 封装输入框自动聚焦指令 在utils工具包中创建directives.js文件复制自动...
autofocus在safari不工作 全局 案例自定义输入框聚焦指令 组件自定义组件 指令钩子函数 bind 之...
只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能： //...
自动对焦可以让你的应用程序更方便用户使用，有几种方法可以自动聚焦 React 输入框。 要让输入框自动聚焦，最简单...
Vue指令详解参考 当全局指令和局部指令同名时以局部指令为准 案例(局部指令聚焦输入框)： index.vue
有的情况下，需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：、 再如：...
组件 全局组件 局部组件 自定义插件 提供install方法，挂载到Vue 指令 使用指令实现input自动获取焦...
自定义指令，经常用于组件的复用和抽象，还有的情况是对普通 DOM 元素进行底层操作。例如：聚焦输入框常用钩子函数：...
自定义文本自动省略指令 使用：
防抖 输入框防抖 防抖这种情况设置一个v-throttle自定义指令来实现 图片懒加载 设置一个v-lazy自定义...
本文标题：自定义指令实现输入框自动聚焦
本文链接：https://www.haomeiwen.com/subject/nwybchtx.html
网友评论