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">
相关推荐
李高钢2 分钟前
Python Flask 框架入门:从零搭建你的第一个 Web 应用
前端·python·flask
特立独行的猫A4 分钟前
用仓颉语言写 Coding Agent:cjh 是怎么实现的
前端
特立独行的猫A6 分钟前
cjh:基于华为仓颉语言的原生 Coding Agent Harness 实践与设计思考
前端
晚安日记wanna13 分钟前
大文件分片上传的五层追问从 Blob 切片到秒传与弱网容错
前端·面试
Htr_17 分钟前
Anysite.io 使用指南:把整个 Web 变成 AI 智能体的数据库
前端·数据库·人工智能
知兀20 分钟前
【前端】受控和非受控组件
前端·javascript·react
玉宇夕落21 分钟前
别再把 SSE 当普通流式了!从 EventSource 到 LangChain,一次讲透实时推送与流式输出
前端
CappuccinoRose23 分钟前
专项事件体系
前端·学习·网络状态·表单事件·剪贴板事件·拖放事件·页面可见性
李剑一28 分钟前
各位产品经理求你们优化一下吧,暗黑模式最大的BUG!文中附解决方案
前端
huali1 小时前
vue-split-screen:让 Vue Router 的导航轨迹变成两个页面
前端·javascript·vue.js