[英]Toggle vue-multiselect close/open on button click
When I click on the button, multiselect opens.当我点击按钮时,多选打开。 But when I click on the button a second time, the true / false values flash and as a result, isOpen remains true.
但是当我第二次单击该按钮时,真/假值会闪烁,因此,isOpen 仍为真。 What am I doing wrong?
我究竟做错了什么?
template:模板:
<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: 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/ https://jsfiddle.net/46s5aknt/
As I dug the source code of this component, unfortunately, I realized there is not any "legit" way to make works your requirement.不幸的是,当我挖掘这个组件的源代码时,我意识到没有任何“合法”的方式可以满足您的要求。 @blur callback will be called no matter what.
无论如何都会调用@blur 回调。 There is no way to regulate this behavior.
没有办法规范这种行为。
Workaround: some aspect of locking with a cooldown time...解决方法:具有冷却时间的锁定的某些方面...
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')
The problem here is that VueMultiselect
closes when there is a click outside the component.这里的问题是
VueMultiselect
在组件外单击时关闭。
So when you press the click button (on your mouse) VueMultiselect
closes and when you release the click button you are actually reopening VueMultiselect
since isOpen
was set to false in the close
event.因此,当您按下单击按钮(在您的鼠标上)时,
VueMultiselect
关闭,当您释放单击按钮时,您实际上是在重新打开VueMultiselect
因为isOpen
在close
事件中设置为 false。
So your button can only be an Open button.所以你的按钮只能是一个打开按钮。
Edit:编辑:
The best solution would be to hide the button when the VueMultiselect
is open.最好的解决方案是在
VueMultiselect
打开时隐藏按钮。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.