vue 自动获取输入框的焦点(ref / 自定义指令)

vue 同时被 2 个专栏收录
8 篇文章 0 订阅
16 篇文章 0 订阅

一、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>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值