选中文本时显示选项菜单

src/components/CommandRunResult.vue

@@ -30,39 +30,15 @@
             </q-avatar>
             <span class="text-weight-bold text-h6">运行结果</span>
           </div>
-          <q-btn-group stretch class="no-shadow">
-            <q-btn
-              flat
-              icon="image"
-              color="primary"
-              @click="dataUrlToImg"
-              v-show="isDataUrl && !enableHtml"
-              ><q-tooltip>将 DataUrl 转为图片</q-tooltip></q-btn
-            >
-            <q-btn
-              flat
-              icon="content_paste"
-              color="primary"
-              @click="copyResult"
-              v-show="!enableHtml"
-              ><q-tooltip>复制到剪贴板</q-tooltip></q-btn
-            >
-            <q-btn
-              flat
-              icon="send"
-              color="primary"
-              @click="sendResult"
-              v-show="!enableHtml"
-              ><q-tooltip>发送到活动窗口</q-tooltip></q-btn
-            >
-            <q-btn
-              flat
-              icon="close"
-              color="negative"
-              v-close-popup
-              v-show="!fromUtools"
-            />
-          </q-btn-group>
+          <ResultMenu
+            class="no-shadow"
+            :stretch="true"
+            :content="runResult.join('')"
+            :closebtn="!fromUtools"
+            :textbtn="!enableHtml"
+            :imagebtn="!enableHtml && isDataUrl"
+            @showImg="showBase64Img"
+          />
         </div>
         <div
           :style="{ maxHeight: maxHeight - headerHeight + 'px' }"
@@ -76,9 +52,13 @@
             :runResultStatus="runResultStatus"
             :runResult="runResult"
             :key="timeStamp"
+            @mouseup="selectHandler"
           />
           <q-resize-observer @resize="autoHeight" debounce="0" />
         </div>
+        <q-menu v-if="selectText" touch-position @before-hide="clearSelect">
+          <ResultMenu :dense="true" :content="selectText" :textbtn="true" />
+        </q-menu>
       </q-card>
     </q-dialog>
   </div>
@@ -90,12 +70,14 @@ import outputTypes from "../js/options/outputTypes.js";
 import specialVars from "../js/options/specialVars.js";
 import commandTypes from "../js/options/commandTypes.js";
 import ResultArea from "components/ResultArea.vue";
+import ResultMenu from "components/popup/ResultMenu.vue";
 
 export default {
-  components: { ResultArea },
+  components: { ResultArea, ResultMenu },
   data() {
     return {
       isResultShow: false,
+      selectText: null,
       runResult: [],
       runResultStatus: true,
       subInputValue: "",
@@ -364,21 +346,14 @@ export default {
       }
       return [html.documentElement.innerHTML];
     },
-    copyResult() {
-      utools.copyText(this.runResult.join("\n"));
-      quickcommand.showMessageBox("已复制到剪贴板");
+    selectHandler() {
+      this.selectText = window.getSelection().toString().trim();
     },
-    sendResult() {
-      utools.copyText(this.runResult.join("\n"));
-      utools.hideMainWindow();
-      quickcommand.simulatePaste();
+    clearSelect() {
+      window.getSelection().removeAllRanges();
+      this.selectText = null;
     },
-    dataUrlToImg() {
-      let imgs = this.runResult
-        .join("\n")
-        .match(/data:image\/.*?;base64,.*/g)
-        ?.map((dataUrl) => `<img src="${dataUrl}"><br>`);
-      if (!imgs) return quickcommand.showMessageBox("dataUrl 格式不正确！");
+    showBase64Img(imgs) {
       this.runResult = [];
       this.enableHtml = true;
       this.showRunResult(imgs, true);

src/components/popup/ResultMenu.vue

@@ -0,0 +1,55 @@
+<template>
+  <q-btn-group :stretch="stretch" class="text-primary">
+    <q-btn icon="image" @click="dataUrlToImg" v-show="imagebtn" :dense="dense"
+      ><q-tooltip v-if="!dense">将 DataUrl 转为图片</q-tooltip></q-btn
+    >
+    <q-btn
+      icon="content_paste"
+      @click="copyResult"
+      v-show="textbtn"
+      :dense="dense"
+      ><q-tooltip v-if="!dense">复制到剪贴板</q-tooltip></q-btn
+    >
+    <q-btn icon="send" @click="sendResult" v-show="textbtn" :dense="dense"
+      ><q-tooltip v-if="!dense">发送到活动窗口</q-tooltip></q-btn
+    >
+    <q-btn
+      icon="close"
+      class="text-negative"
+      v-close-popup
+      v-show="closebtn"
+      :dense="dense"
+    />
+  </q-btn-group>
+</template>
+
+<script>
+export default {
+  props: {
+    dense: Boolean,
+    stretch: Boolean,
+    textbtn: Boolean,
+    imagebtn: Boolean,
+    closebtn: Boolean,
+    content: String,
+  },
+  methods: {
+    copyResult() {
+      utools.copyText(this.content);
+      quickcommand.showMessageBox("已复制到剪贴板");
+    },
+    sendResult() {
+      utools.copyText(this.content);
+      utools.hideMainWindow();
+      quickcommand.simulatePaste();
+    },
+    dataUrlToImg() {
+      let imgs = this.content
+        .match(/data:image\/.*?;base64,.*/g)
+        ?.map((dataUrl) => `<img src="${dataUrl}"><br>`);
+      if (!imgs) return quickcommand.showMessageBox("dataUrl 格式不正确！");
+      this.$emit("showImg", imgs);
+    },
+  },
+};
+</script>