«

Vue自定义指令进入页面光标自动聚焦到input框上

yang 发布于 阅读:370 Vue2阶段


使用 Vue.directive可以注册全局指令,第一个参数为指令的名字,第二个参数为对象,也可以是一个指令函数。

里面有几个钩子函数

 // 钩子函数,处理指令相关的逻辑
    bind(el, binding, vnode) {
      // 指令绑定时的逻辑
    },
    inserted(el, binding, vnode) {
      // 元素插入到 DOM 时的逻辑
    },
    update(el, binding, vnode, oldVnode) {
      // 组件更新时的逻辑
    },
    unbind(el, binding, vnode) {
      // 指令解绑时的逻辑
    }

在指令的钩子函数中,通过传入的参数来获取更多信息

el:指令所绑定的元素,可以通过操作它来改变元素的样式、属性等。
binding:一个对象,包含了指令的信息,如 value(指令的绑定值)、modifiers(指令的修饰符)等。
vnode:Vue 编译生成的虚拟节点。
oldVnode:上一个虚拟节点,只在 update 钩子中可用。

下面写的进入页面光标自动聚焦到input框上

全局注册

Vue.directive('focus',{
  inserted: function(el){
    el.focus()
  },
})

局部注册

在.vue中directives属性下面书写

  directives: {
    focus: {
      inserted: function (el) {
        el.focus()
      }
    }
  }

使用

<input type="text" v-focus>

版权所有:微4e
文章标题:Vue自定义指令进入页面光标自动聚焦到input框上
除非注明,文章均为 微4e 原创,请勿用于任何商业用途,禁止转载

推荐阅读:


扫描二维码,在手机上阅读
请先 登录 再评论