Question

我注册了一个用于聚焦输入的自定义指令。我使用Vue docs中的代码：

// Register a global custom directive called v-focus
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
})

我对这些元素应用v-focus：

<input v-show="isInputActive" v-focus>

<div v-show="isDivActive">
  <input v-focus>
</div>

但它不起作用。仅当我将v-show替换为v-if时才有效，但我必须使用v-show。有解决方案吗？

Answer 1

您可以将值传递给v-focus，然后添加更新钩子函数：

Vue.directive("focus", {
  inserted: function(el) {
    // Focus the element
    el.focus()
  },
  update: function(el, binding) {
    var value = binding.value;
    if (value) {
      Vue.nextTick(function() {
        el.focus();
      });
    }
  }
})

var app = new Vue({
  el: "#app",
  data: function() {
    return {
      ifShow: true
    }
  },
})

<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>

<div id="app">

  <input type="text" v-focus="ifShow" v-show="ifShow">
  <br>
  <button @click="ifShow = !ifShow">toggle</button>
</div>

Answer 2

我认为更好的解决方案应该是focus或isInputActive更改时isDivActive。

<input v-show="isInputActive" v-ref="input">

watch: {
  isInputChange(value) {
    if (value) this.$refs.input.focus()
  }
}

自定义指令v-focus在Vue app中使用v-show进行输入

2 个答案: