Vue2.x Todo之自定义指令实现自动聚焦的方法
发布网友
发布时间：2022-03-25 04:36
共1个回答
热心网友
时间：2022-03-25 06:06
我们希望用户双击
todo
进入编辑状态后输入框自动获取焦点，而不是需要先手动点一下。input
元素有一个
focus
方法可以来帮我们完成这个事情，但现在的问题是如何在
Vue
中获得这个
input
元素，从而来操作它。Vue
的自定义指令可以完成这个功能。
我们先来看看
Vue
官网的一个示例：
然而，有的情况下，你仍然需要对普通
DOM
元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：
一个输入框：
当页面加载时，该元素将获得焦点
(注意：
autofocus
在移动版
Safari
上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：
//
注册一个全局自定义指令
`v-focus`
Vue.directive('focus',
{
//
当被绑定的元素插入到
DOM
中时……
inserted:
function
(el)
{
//
聚焦元素
el.focus()
}
})
如果想注册局部指令，组件中也接受一个
directives
的选项：
directives:
{
focus:
{
//
指令的定义
inserted:
function
(el)
{
el.focus()
}
}
}
指令是什么，就是用来指导被绑定的元素的行为，我们之前接触过
v-if、v-model、v-bind
等指令，官方文档说的非常清楚，我们可以自己注册一个指令，然后实现某些钩子函数，从而指定被绑定元素的行为。这里我们依葫芦画瓢，实现一个
focus
指令，这个指令实现了
inserted
钩子函数，这个函数在被绑定的元素被插入
dom
时触发，且被绑定的元素会作为参数传入钩子函数，我们就可以在函数中对它操作。
我们在
Vue
对象中声明局部指令：
<script>
let
id
=
0;
//
用于
id
生成
var
app
=
new
Vue({
...
methods:
{
...
},
directives:
{
focus:
{
inserted:
function
(el)
{
el.focus()
}
}
}
})
</script>
然后就可以使用这个指令了，把它绑定到编辑框，这样编辑框出现时指令就被触发，从而聚焦。
<input
type="text"
value="编辑
todo..."
v-focus="true"
v-if="editedTodo!==null
&&
editedTodo.id===todo.id"
v-model="todo.title"
@keyup.enter="editDone(todo)"
@keyup.esc="cancelEdit(todo)"/>
注意因为元素一旦出现一定要聚焦的，所以条件始终为
true。
现在用户体验好多了！快打开浏览器体验一下吧！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:vue-auto-focus:
控制自动聚焦行为的
vue
指令方法
