perf: 剪切和清空输入文本时，不再清空输出框

laorange · Jan 8, 2023 · 6318a77 · 6318a77
1 parent 4e5afa6
commit 6318a77
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "private": false,
   "author": "laorange",
   "license": "AGPL-3.0",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

diff --git a/src/components/GrammarlyEditor.vue b/src/components/GrammarlyEditor.vue
@@ -13,7 +13,7 @@ const valueLocal = computed<string>({
 
 <template>
   <GrammarlyEditorPlugin clientId="client_FhwfFMz1zFmBVSJvtqjf8f">
-    <n-input ref="inputArea" type="textarea" :show-count="true" :placeholder="placeholder" :clearable="true" size="large" :autosize="true" v-model:value.lazy="valueLocal"></n-input>
+    <n-input ref="inputArea" type="textarea" :show-count="true" :placeholder="placeholder" size="large" :autosize="true" v-model:value.lazy="valueLocal"></n-input>
   </GrammarlyEditorPlugin>
 </template>
 

diff --git a/src/components/UpdateLogDisplayUnit.vue b/src/components/UpdateLogDisplayUnit.vue
@@ -16,6 +16,11 @@ const updateLog = `
   <hr/>
 
   <h1>更新日志</h1>
+  <h3>v0.3.6 (2023-01-08)</h3>
+  <p>优化：剪切和清空输入文本时不再清空输出框
+    <a style="text-decoration: none" target="_blank" href="https://www.bilibili.com/video/BV1T24y1X78w/#reply145757356944" title="来自评论区小伙伴的建议">🏷️</a>
+  </p>
+
   <h3>v0.3.5 (2023-01-07)</h3>
   <p>优化：文本框下新增清空按钮
     <a style="text-decoration: none" target="_blank" href="https://www.bilibili.com/video/BV1T24y1X78w/#reply145609989120" title="来自评论区小伙伴的建议">🏷️</a>

diff --git a/src/router/article-copy-tool/ArticleCopyTool.vue b/src/router/article-copy-tool/ArticleCopyTool.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import useClipboard from "vue-clipboard3";
-import {computed, ref, watch} from "vue";
+import {computed, nextTick, ref, watch} from "vue";
 import {useMessage} from "naive-ui";
 import {TextHandler, textHandlers} from "../../assets/ts/article-copy-tool/handlers";
 import GrammarlyEditor from "../../components/GrammarlyEditor.vue";
@@ -61,8 +61,16 @@ async function copyInputText(info: string = "复制成功") {
 }
 
 async function cutInputText() {
+  let outputTextTemp = outputText.value;
   await copyInputText("剪切成功");
   inputText.value = "";
+  await nextTick(() => outputText.value = outputTextTemp);
+}
+
+function clearInputText() {
+  let outputTextTemp = outputText.value;
+  inputText.value = "";
+  nextTick(() => outputText.value = outputTextTemp);
 }
 
 async function copyOutputText(info: string = "复制成功") {
@@ -151,7 +159,7 @@ function movePositionOfHandler(type: "up" | "down", index: number) {
             <n-space :size="30">
               <n-button @click="copyInputText()" type="info" :disabled="!inputText">复制</n-button>
               <n-button @click="cutInputText()" type="warning" :disabled="!inputText">剪切</n-button>
-              <n-button @click="inputText=''" color="#3f3f3f" :disabled="!inputText">清空</n-button>
+              <n-button @click="clearInputText()" color="#3f3f3f" :disabled="!inputText">清空</n-button>
             </n-space>
           </div>
         </n-space>
@@ -160,7 +168,7 @@ function movePositionOfHandler(type: "up" | "down", index: number) {
       <n-gi>
         <n-space :vertical="true">
           <div class="output-area">
-            <n-input type="textarea" placeholder="输出文本" :show-count="true" :clearable="true" size="large" :autosize="true" v-model:value="outputText"></n-input>
+            <n-input type="textarea" placeholder="输出文本" :show-count="true" size="large" :autosize="true" v-model:value="outputText"></n-input>
           </div>
           <div class="button-area">
             <n-space :size="30">