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">
相关推荐
dsyyyyy11014 分钟前
CSS继承性
前端·css·tensorflow
wordbaby7 分钟前
React Native 压缩上传全链路方案:从架构设计到生产实践
前端·react native
Rain50910 分钟前
05. mini-cc 工具系统:让 AI 拥有动手能力
linux·前端·人工智能·ubuntu·typescript·ai编程
YiWait20 分钟前
基于 Vue 3 的网络收音机,编译为桌面应用软件
前端·javascript·vue.js
虾壳云官方26 分钟前
OpenClaw 绑定企业微信完整指南
服务器·前端·网络·人工智能·企业微信·open claw·小龙虾
MichaelJohn26 分钟前
别卷框架了!前端人,用 JS + LangChain + DeepSeek 开启你的 AI 转型第一步
前端
古法编程第一人30 分钟前
使用Electric同步前后端数据
前端·vue.js
朱涛的自习室39 分钟前
30天11万行代码,我用 Trae 和 Gemini 造了个 AI 测试引擎
android·前端·人工智能
大连好光景42 分钟前
登录凭证 | Session+Cookie | Redis Token | JWT
前端·javascript
deepin_sir44 分钟前
11 - 模块与包
前端·数据库·python