如何解决拟/ Vue:选择文本时在q输入文本区域中触发上下文菜单
我试图获取一个上下文菜单,该菜单在选择单词后立即在q输入文本区域上触发。 这是我想出的最好的小提琴:https://jsfiddle.net/kimgerdes/r7bsqtyf/36/
<q-input
v-model="textmodel"
type="textarea"
filled
label="Paste your text here"
style="overflow: auto"
@select="ttselect"
>
<q-menu
v-model="cmenu"
touch-position
ref='menu'
offset=[250,50]
>
<q-list dense style="min-width: 100px">
<q-item clickable v-close-popup>
<q-item-section>Search for "{{selword}}"</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section>Something else</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-input>
new Vue({
el: '#q-app',data: function() {
return {
version: Quasar.version,textmodel: "Why is the selection disappearing when selecting a word? I tried all kinds of event modifiers on clicks from https://vuejs.org/v2/guide/events.html#Event-Modifiers on different (click) events on the q-input but Failed to get this running.",cmenu: true,selword: ''
}
},methods: {
ttselect: function(event) {
this.selword = event.srcElement.value.substring(event.srcElement.selectionStart,event.srcElement.selectionEnd);
//this.cmenu= false;
this.$q.notify('This text was selected:' + this.selword)
}
}
})
但是,即使在文本中单击也可以出现菜单,并且当菜单出现时,文本选择也将消失。我想这与点击事件传播的文本取消选择有关。因此,我在q输入上的不同{click}事件上对https://vuejs.org/v2/guide/events.html#Event-Modifiers的点击尝试了各种事件修饰符,但未能运行。
这就是我想要的:
我非常感谢我应该尝试的任何提示。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。