微语 微语:代码适合中午敲,早晚出BUG

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

使用 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>