在按钮单击时切换 vue-multiselect 关闭/打开

Question

当我点击按钮时，多选打开。 但是当我第二次单击该按钮时，真/假值会闪烁，因此，isOpen 仍为真。 我究竟做错了什么？

模板：

<div id="app">
  <button @click="toggle">open and close later
  </button>
    <pre>{{ isOpen }}</pre>
  <multiselect 
    ref="multiselect"
    v-model="value" 
    :options="options"
    :multiple="true"
    track-by="library"
    :custom-label="customLabel"
    @close="isOpen = false"
    @open="isOpen = true"
    >
  </multiselect>
</div>

js：

new Vue({
    components: {
    Multiselect: window.VueMultiselect.default
    },
    data: {
    isOpen: false,
    value: { language: 'JavaScript', library: 'Vue-Multiselect' },
    options: [
        {   language: 'JavaScript', library: 'Vue.js' },
      { language: 'JavaScript', library: 'Vue-Multiselect' },
      { language: 'JavaScript', library: 'Vuelidate' }
    ]
    },
  methods: {
    toggle () {
        if (this.isOpen) {
        this.$refs.multiselect.$el.blur();
        this.isOpen = false;
      }
      else {
        this.$refs.multiselect.$el.focus();
        this.isOpen = true;
      }

    }
  }
}).$mount('#app')

https://jsfiddle.net/46s5aknt/

Answer 1

不幸的是，当我挖掘这个组件的源代码时，我意识到没有任何“合法”的方式可以满足您的要求。 无论如何都会调用@blur 回调。 没有办法规范这种行为。

解决方法：具有冷却时间的锁定的某些方面...

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data: {
  blocked: false,
  value: { language: 'JavaScript', library: 'Vue-Multiselect' },
  options: [
    { language: 'JavaScript', library: 'Vue.js' },
    { language: 'JavaScript', library: 'Vue-Multiselect' },
    { language: 'JavaScript', library: 'Vuelidate' }
  ]
},
  methods: {
    toggle () {
      if (!this.blocked) {
        this.$refs.multiselect.toggle();
      }
    },
    block () {
      this.blocked = true;
      setTimeout(() => {
        this.blocked = false;
      }, 200);
    }
  }
}).$mount('#app')

Answer 2

这里的问题是VueMultiselect在组件外单击时关闭。

因此，当您按下单击按钮（在您的鼠标上）时， VueMultiselect关闭，当您释放单击按钮时，您实际上是在重新打开VueMultiselect因为isOpen在close事件中设置为 false。

所以你的按钮只能是一个打开按钮。

编辑：

最好的解决方案是在VueMultiselect打开时隐藏按钮。