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

我注册了一个用于集中输入的自定义指令。我使用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时，此方法才有效。有解决方案吗？

最佳答案

您可以将值传递给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/[email protected]/dist/vue.js"></script>

<div id="app">

  <input type="text" v-focus="ifShow" v-show="ifShow">
  <br>
  <button @click="ifShow = !ifShow">toggle</button>
</div>

关于javascript - 在Vue应用程序中使用v-show自定义指令v-关注输入，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47011188/