您的位置：首页 > Web前端 > Vue.js

vue自动获取焦点？

2020-01-12 13:56 169 查看
vue自动获取焦点？

最简单的即是，自定义指令的方法：

// 方法Vue.directive()创建，它有两个参数，一是自定义指令的名字，可以随便取，但是全部小写；
// 另一个是一个对象，表示自定义指令的一些配置项
// 创建一个名为 myfocus 的自定义指令,这里实际上创建了一个 v-myfocus 指令，元素中也使用 v-myfocus

// 全局获取焦点
Vue.directive('myfocus', {
inserted(el, binding){
// inserted 是钩子函数，它表示自定义指令插入到标签的时候就执行
// inserted()钩子函数有两个参数，el表示使用自定义指令的元素，binding表示自定义指令的信息
console.log(el);
console.log(binding);
el.focus()
}
})
// 局部获取焦点
directives:{
focus:{
inserted: el => {
// 聚焦元素
el.focus()
// el.querySelector('input').focus()
// 实际项目中，可能出现获取不到 element ，这样可以使用
}
}
},

来个例子：

<script src="./vuejs/vue-2.4.0.js"></script>
<body>
<div id="app">
<!-- 引用自定义指令 v-mycolor -->
姓名： <input type="text" v-mycolor="fontColor">
</div>
<script>
// 创建一个名为 mycolor 的全局自定义指令。
Vue.directive('mycolor', {
inserted(el, binding) {
console.log(binding);
el.style.color = binding.value
}
})
// 实例监管区域
var vm = new Vue({
el: '#app',
data: {
fontColor: 'red',// 在data中定义一个变量
},
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: el => {
// 聚焦元素
el.focus()
}
}
}
})
</script>

有时候我们项目中，可能遇到一些”另类需求“，比如点击input跳转到查询页，但是你点击的那个input，要求禁止?获取焦点（相当于假的似的，图片？？哈哈）。大多数我们用的组件，里面人家已经设置好了 disabled — 禁止获取焦点。但是，vue常用的mintUI组件库中，人家并没有设置 disabled 属性，很烦！！！
解决方法：原生

this.$refs.search.$el.querySelector('input').setAttribute('disabled', true)
  • 点赞 1
  • 收藏
  • 分享
  • 文章举报
君莫笑·泰 发布了12 篇原创文章 · 获赞 13 · 访问量 1883 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航