在按鈕單擊時切換 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打開時隱藏按鈕。