javascript - 自定义指令 v-focus 在 Vue 应用程序中使用 v-show 输入

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传一个值，然后添加一个update hook函数:

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>