文章阅读

沉浸阅读完整内容

写文章

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

正在统计阅读人数 正在统计字数
登录收藏0
字号 100%

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

推荐阅读

4 篇精选
文章 / 161React中使用useEffect为什么里面的请求会触发2次 文章 / 162React遍历对象包数组key是标题 文章 / 163slot的理解及用法 文章 / 160React组件使用lazy懒加载提升效率

发表评论

评论 0

还没有评论,欢迎留下第一条讨论。

分享精彩,传递价值

生成专属海报,分享你的文章,让更多人发现好内容

浏览器不支持 Canvas,无法生成海报。

每日签到

每天来这里,记录一点持续积累。

当前积分--积分
本月签到--
本月获得--积分
正在读取