拟/ 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 (将#修改为@）