Vue 自定义指令自动获取焦点

最新推荐文章于 2024-01-15 12:06:10 发布

原创最新推荐文章于 2024-01-15 12:06:10 发布 · 1.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

本文介绍了如何在Vue中创建自定义指令，以实现输入框自动聚焦的功能。通过在App.vue组件内注册局部指令`v-focus`，并在模板中应用，当页面加载时输入框将自动获得焦点。此外，也提到了如果需要全局使用该指令，可以使用`Vue.directive`进行全局注册。自定义指令在Vue内置指令无法满足需求时提供了解决方案。

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 v-xxx

html+css的复用的主要形式是组件

你需要对普通 DOM 元素进A行底层操作，这时候就会用到自定义指令

App.vue内准备内容

<template>
  <div>
      <!-- <input type="text" v-gfocus> -->
      <input type="text" v-focus>
      
  </div>
</template>

<script>
// 目标: 创建 "自定义指令", 让输入框自动聚焦
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令  v-指令名
// 注意:
// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行
export default {
    data(){
        return {
            colorStr: 'red'
        }
    },
    directives: {
        focus: {
            inserted(el){
                el.focus()
            }
        }
    }
}
</script>

<style>

</style>

这样一个v-focus的自动获取焦点的指令就完成了

focus 这个名字是不固定的可以自己起名字

还有一点的就是这个指令的作用域只有当前组件如果你想要全局都可以使用那么需要全局注册

// 全局指令 - 到处"直接"使用
Vue.directive("gfocus", {
  inserted(el) {
    el.focus() // 触发标签的事件方法
  }
})

而是用自定义命令的时机就是在Vue内置指令满足不了需求时, 可以自己定义使用

这样当打开页面的时候就会触发获取焦点效果

标签

#vue.js #javascript #css

Vue 自定义指令 自动获取焦点

Vue 自定义指令自动获取焦点