单击按钮时切换 vue-multiselect close/open

Question

当我点击按钮时，多选打开。但是当我第二次点击按钮时，true/false 值闪烁，结果 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

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

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

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

编辑：

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

Answer 2

当我挖掘这个组件的源代码时，不幸的是，我意识到没有任何 "legit" 方法可以满足您的要求。 @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 3

我知道这是一个旧的 post 但我只是想添加我刚刚发现的内容。（旁注：这很可能是执行此操作的不正确方法......但它有效）

我想“关闭”下拉菜单，但我不想必须单击才能关闭下拉菜单。

遍历“vue-multi-select”的节点模块时。我看到使用 refs 你实际上可以调用“closeMultiSelect()”函数来关闭下拉列表。

下面是我将组件包装在 div 中以将事件侦听器应用于整个组件的示例。

<div v-on:mouseleave="close()">
<vue-multi-select
    :ref="'multiselect'"
    v-model="selectedGroups"
    :selectOptions="options"
    :options="{multi : true}"
    :btnLabel="() => `Contact Groups`"
    :key="multiSelectComponentKey"
    search
></vue-multi-select>
</div>

下面是我如何调用关闭下拉列表的方法：

method:{
    close: function(){
        this.refs.multiselect.closeMultiSelect();  // this will close the dropdown
    }
}

可以使用相同的概念打开下拉菜单：

method:{
    open: function(){
        this.refs.multiselect.openMultiSelect();  // this will open the dropdown
    }
}

仅此而已...如果这对任何人都有帮助，那就太棒了！如果您知道更好的方法，请告诉我，以便我们以正确的方式进行更新。

单击按钮时切换 vue-multiselect close/open

Toggle vue-multiselect close/open on button click

javascript

vue.js

web

vue-multiselect