2

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

4

2 回答 2

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')
于 2020-02-20T20:05:39.800 回答
0

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

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

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

编辑：

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

于 2020-02-19T15:54:47.773 回答