vue 自动获取输入框的焦点(ref / 自定义指令)
1.给要操作的dom元素设置ref属性(属性值可以随便起)<input type="text" ref="input">2.在选项mounted获取要操作的dom元素this.$refs.ref属性值(mounted :页面加载完成后自动调用)var vm = new Vue({el:"#app",data:{},methods:{},mounted(){this.$refs.inpu
·
一、ref
1.给要操作的dom元素设置ref属性(属性值可以随便起)
<input type="text" ref="input">
2.在选项mounted获取要操作的dom元素this.$refs.ref属性值
(mounted :页面加载完成后自动调用)
var vm = new Vue({
el:"#app",
data:{
},
methods:{
},
mounted(){
this.$refs.input.focus();
}
});
二、自定义指令
1.全局自定义指令
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
// 指使用 v-focus 的元素
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
1.如果想注册局部指令,组件中也接受一个 directives 的选项:
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
2.然后你可以在模板中任何元素上使用新的 v-focus property,如下:
<input v-focus>
更多推荐
已为社区贡献2条内容
所有评论(0)