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

Posted 2023-02-22

【中文标题】在按钮单击时切换 vue-multiselect 关闭/打开

【英文标题】：Toggle vue-multiselect close/open on button click

【发布时间】：2020-06-03 19:56:46

【问题描述】：

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

【问题讨论】：

谢谢，就像一个魅力:)

可以通过访问 $ref.deactivate(), see my previous answer here

可以通过访问 $ref.deactivate(), see my answer here

【参考方案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')

【参考方案2】：

这里的问题是当组件外有点击时VueMultiselect会关闭。

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

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

编辑：

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

【讨论】：

谢谢。如何更改示例以获得正确的行为？

I would hide the open button when the select is opened <button v-if="!isOpen" @click="toggle">