请教vue focus问题
发布于 5个月前 作者 rebornvip 636 次浏览 来自 问答

<input type="text" v-model="A"> <input type="text" v-model="B">

<button id="btn">123</button>

默认进入聚焦#btn 点击后聚焦A

1 回复

默认进入聚焦#btn的做法可以有两种

  • 第一种用自定义指令directive

html

<button id="btn"  v-focus>123</button>

javascript

export default {
  directives: {
  // 注册一个全局自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  },
 data () {
  return {}
 }
}
  • 第二种用原生focus()

html

<button id="btn" ref="btn">123</button>

javascript

export default {
  directives: {
  mounted () {
    this.$nextTick(() => {
      this.$refs.btn.focus()
    })
  },
 data () {
  return {}
 }
}
  • 点击#btn聚焦A

html

      <input type="text"  v-model="A" ref="aa">
      <button id="btn" @click="Afocus()">123</button>

javascript

  methods: {
    Afocus () {
      this.$refs.aa.focus()
    }
  }
回到顶部