Add a copy button (copy with \n)

EaseCation · Mar 30, 2024 · 699cb6b · 699cb6b
1 parent d1ac475
commit 699cb6b
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 2 deletions.
diff --git a/src/components/CopyButton.vue b/src/components/CopyButton.vue
@@ -0,0 +1,51 @@
+<script>
+    export default {
+        props: {
+            rawText: {
+                type: String,
+                required: true
+            }
+        },
+        setup(props) {
+            const onClick = () => {
+                // 复制文本到剪贴板
+                navigator.clipboard.writeText(props.rawText.replaceAll("\n", "\\n"));
+            }
+
+            return {
+                onClick
+            }
+        }
+    }
+</script>
+
+<template>
+    <button class="copy-button" @click="onClick">
+        <svg viewBox="64 64 896 896" focusable="false" data-icon="copy" width="12" height="12" fill="black" aria-hidden="true">
+            <path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path>
+        </svg>
+    </button>
+</template>
+
+<style scoped>
+
+.copy-button {
+    padding: 8px 8px 7px 8px;
+    background-color: rgba(255, 255, 255, 0.1);
+    svg {
+        opacity: 0.4;
+    }
+}
+
+.copy-button:hover {
+    background-color: rgba(220, 220, 220, 0.5);
+    svg {
+        opacity: 0.8;
+    }
+}
+
+.copy-button:active {
+    background-color: rgba(220, 220, 220, 0.8);
+}
+
+</style>
diff --git a/src/components/MCTextFormatter.vue b/src/components/MCTextFormatter.vue
@@ -1,6 +1,9 @@
 <template>
     <div class="wrapper">
-        <textarea v-model="rawText" @input="formatText" :placeholder="$t('placeholder.input')" ref="textarea"></textarea>
+        <div class="textarea-container">
+            <textarea v-model="rawText" @input="formatText" :placeholder="$t('placeholder.input')" ref="textarea"></textarea>
+            <copy-button :raw-text="rawText" class="copy-button"></copy-button>
+        </div>
         <div>
             <format-button
                 v-for="(color, format) in colorsFormats"
@@ -74,10 +77,14 @@
 <script>
 import {computed, onMounted, ref, watch} from 'vue';
 import FormatButton from './FormatButton.vue';
+import CopyButton from "./CopyButton.vue";
 
 export default {
 
-    components: {FormatButton},
+    components: {
+        FormatButton,
+        CopyButton,
+    },
 
     setup() {
 
@@ -382,6 +389,17 @@ body {
     gap: 16px;
 }
 
+.textarea-container {
+    position: relative;
+}
+
+.copy-button {
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    margin: 0;
+}
+
 textarea {
     width: 100%;
     height: 150px;