vue/自定义指令

需求: 页面有个input元素,现在要鼠标光标聚焦在上面,让每个页面上的标签都可以聚焦光标,比如,从A页面跳转到B页面的时候,我们依然要聚焦。如果要一遍遍地操作dom就会很麻烦。

这个时候,为了方便开发,我们可以使用vue提供的自定义指令。

自定义指令有两种,分为全局注册和局部注册。

1、全局注册

1.1 在main.js 中 注册

javascript 复制代码
// 1、注册指令
// 1.1 全局注册
Vue.directive('focussss',{
  inserted(el){
    el.focus()
  }
})

1.2 使用

html 复制代码
   <input v-focussss type="text" ref="inp">

2、局部注册

2.1 在当前要使用指令的主键内,注册

javascript 复制代码
  export default {
    components: {},
    data() {
      return {};
    },
    computed: {},
    watch: {},
    methods: {},
    directives:{
        focusdsg:{
          inserted(el) {
            el.focus()
          }
        }
    }
  }

2.2 使用

html 复制代码
 <input v-focusdsg type="text" ref="inp">
相关推荐
陈随易16 分钟前
纯 Go 写的 JS 引擎,跑分超过了 C 语言的 QuickJS
前端·后端·程序员
子兮曰2 小时前
Chrome 权限元素实战:144 与 151 的渐进增强写法
前端·javascript·chrome
IT_陈寒2 小时前
Redis连接池泄漏那次,我差点把生产环境搞崩了
前端·人工智能·后端
强尼银手2 小时前
我花一天做了个格斗游戏原型,判定全对,然后被「美术」劝退了
前端·javascript
石小石Orz2 小时前
AI 正在蚕食我们的编码能力
前端·后端·算法
陈随易3 小时前
专注飞机 FocusFlight,两个人把番茄钟做成了一趟航班
前端·后端·程序员
总要学点什么3 小时前
第98篇:三维特效-材质线效果——给一条线换十种材质,虚线的图案只填了一半
开发语言·前端·javascript·ecmascript·gis·webgl·材质
10share4 小时前
基于大模型的 i18n 方案:把中文原文当 Key,轻松搞定多语言维护
前端·vue.js
古茗前端团队6 小时前
由 key 引发的思考
前端·javascript·react.js
kyriewen6 小时前
我扫了 422 个仓库,近一半 CI 在裸装依赖
前端·javascript·程序员