vue.js 获取焦点方法

1. 使用v-focus自定义指令

Vue.js允许我们自定义指令，来操作DOM元素。我们可以通过自定义一个v-focus指令来实现获取焦点的功能。

<template>
  <input v-fx_focus="'pans'" />
</template>

<script>
export default {
  directives: {
    fx_focus: {
      inserted(el, pans) {
       console.log(el,1111111,pans,44444);

        if (el) {

          el.focus();

        }
      }
    }
  }
}
</script>

2. 使用ref引用

Vue.js还提供了ref属性，通过该属性可以引用DOM元素，并在需要的时候操作该元素。我们可以通过结合ref和mounted生命周期钩子来获取焦点。

<template>
  <input ref="myInput" />
</template>

<script>
export default {
  mounted() {
    this.$refs.myInput.focus();
  }
}
</script>

示例应用
为了更好地理解如何获取焦点，我们可以创建一个简单的示例应用来演示上述两种方法。

<template>
  <div>
    <input v-focus />
    <button @click="setFocus">设置焦点</button>
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  },
  methods: {
    setFocus() {
      this.$refs.myInput.focus();
    }
  }
}
</script>