From 5651108ac205c71f246c4ae1f09b05daeacfd368 Mon Sep 17 00:00:00 2001
From: Coffee-crocodile <1147347984@qq.com>
Date: Sun, 25 Jun 2023 13:32:16 +0800
Subject: [PATCH] feat(components): add `copy-text`

---
 src/components/custom/CopyText.vue   | 31 ++++++++++++++++++++++++++++
 src/views/plugin/clipboard/index.vue |  2 ++
 2 files changed, 33 insertions(+)
 create mode 100644 src/components/custom/CopyText.vue

diff --git a/src/components/custom/CopyText.vue b/src/components/custom/CopyText.vue
new file mode 100644
index 0000000..3a28753
--- /dev/null
+++ b/src/components/custom/CopyText.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: string
+  maxLength?: string
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+const text = useVModel(props, 'modelValue', emit)
+</script>
+
+<template>
+  <div class="copy-wrap">
+    <n-ellipsis :style="{ 'max-width': maxLength || '12em' }">
+      {{ text }}
+    </n-ellipsis>
+    <span v-copy="text" class="copy_icon">
+      <i-icon-park-outline-copy />
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.copy-wrap{
+  display: inline-flex;
+  align-items: center;
+  gap:0.5em;
+}
+.copy_icon{
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/plugin/clipboard/index.vue b/src/views/plugin/clipboard/index.vue
index e9c1053..cbef660 100644
--- a/src/views/plugin/clipboard/index.vue
+++ b/src/views/plugin/clipboard/index.vue
@@ -11,6 +11,8 @@ const text = ref('Hello v-copy')
         v-copy复制
       </n-button>
     </n-input-group>
+    <n-h1> copy-text组件 使用</n-h1>
+    <copy-text v-model="text" />
   </n-card>
 </template>