下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点:
问题:移动端需要多次点击,输入框input才能聚焦
解决办法:在页面加载时,让首个元素获取焦点。
1. 在Vue.JS中设置全局变量。
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
});
// 创建根实例
new Vue({
el: '#app'
});
</script>
2. 在HTML中,将v-focus放入相应的input中。
<div id="app">
<p>页面载入时,input 元素自动获取焦点:</p>
<input v-focus>
</div>
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>页面载入时,input 元素自动获取焦点:</p>
<input v-focus>
</div>
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
});
// 创建根实例
new Vue({
el: '#app'
});
</script>
</body>
</html>
官网和菜鸟教程都有相关说明。