@aburai/vue-autofocus 中文文档教程

Question

vue-autofocus

UNDER CONSTRUCTION - use at own risc and create issues

Introduction

vue-autofocus 是 Vue.js 的插件。 功能包括：

• many supported selectors to query control to focus
• options for finetuning (see default global options)
• option for debugging (logs focus workflow)

Install

来自 npm：

$ npm install @aburai/vue-autofocus --save
$ yarn add @aburai/vue-autofocus

Usage

append plugin to Vue

import Vue from 'vue'
import VueAutofocus from '@aburai/vue-autofocus'
Vue.use(VueAutofocus)
// OR
Vue.use(VueAutofocus, {globalOptions})

default global options

{
  initDelay: 300,
  focusDelay: 100,
  refocusDelay: 100,
  select: true,
  debug: false
}

use plugin

mounted() {
    this.$autofocus() // use this.$el to find a focusable control
    this.$autofocus('#my-element') // find element by id in this.$el
    this.$autofocus(this.$refs.form)
    this.$autofocus({ref: 'form'}) // get selector from this.$refs after $nextTick
    this.$autofocus(this.$refs.dialog, {initDelay: 600, debug: true})
    this.$autofocus(this.$refs.input, {select: false}) // do not select input text
}

Troubleshooting

的情况下关注观察者中的对话框元素

示例：在 ref错误

watch: {
  dialog(state) {
    // this.$refs.dialogcard could be undefined
    if (state) this.$autofocus(this.$refs.dialogcard)
  }
}

正确

watch: {
  dialog(state) {
    if (state) this.$nextTick(() => this.$autofocus(this.$refs.dialogcard))
    // OR
    if (state) this.$autofocus({ref: 'dialogcard'})
  }
}

License

MIT

版权所有 (c) 2019 年至今 André Bunse (aburai)

Special Thanks

到 vue-router 作为一个好的 vue 插件模板的样板