From 0647fd26414fc8a3ab077d355f50da6e3e36ad63 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 15 一月 2025 17:40:57 +0800
Subject: [PATCH] 实现原本功能
---
src/components/chat/components/Copy.vue | 91 +++++++++++++++++----------------------------
1 files changed, 34 insertions(+), 57 deletions(-)
diff --git a/src/components/chat/components/Copy.vue b/src/components/chat/components/Copy.vue
index b803395..363fe22 100644
--- a/src/components/chat/components/Copy.vue
+++ b/src/components/chat/components/Copy.vue
@@ -1,80 +1,57 @@
<script setup lang="ts">
-import { Copy, Loading, CheckOne } from "@icon-park/vue-next";
-import type { Theme } from "@icon-park/vue-next/lib/runtime";
-import { ref } from "vue";
+import { CheckOne, Copy, Loading } from '@icon-park/vue-next';
+import type { Theme } from '@icon-park/vue-next/lib/runtime';
+import { ref } from 'vue';
const porps = defineProps<{ content: string }>();
const btnConfig: {
- size: number;
- fill: string;
- theme: Theme;
+ size: number;
+ fill: string;
+ theme: Theme;
} = {
- size: 14,
- fill: "#999",
- theme: "outline",
+ size: 14,
+ fill: '#999',
+ theme: 'outline',
};
const btnTips = {
- copy: "澶嶅埗鍏ㄦ枃",
- loading: "",
- success: "宸插鍒跺埌鍓创鏉匡紒",
- error: "澶嶅埗澶辫触锛�",
+ copy: '澶嶅埗鍏ㄦ枃',
+ loading: '',
+ success: '宸插鍒跺埌鍓创鏉匡紒',
+ error: '澶嶅埗澶辫触锛�',
};
-const btnStatus = ref<"copy" | "loading" | "success" | "error">("copy");
+const btnStatus = ref<'copy' | 'loading' | 'success' | 'error'>('copy');
const copyToClipboard = (content: string = porps.content) => {
- btnStatus.value = "loading";
- navigator.clipboard
- .writeText(content)
- .then(() => setTimeout(() => (btnStatus.value = "success"), 150))
- .catch(() => (btnStatus.value = "error"))
- .finally(() => setTimeout(() => (btnStatus.value = "copy"), 1500));
+ btnStatus.value = 'loading';
+ navigator.clipboard
+ .writeText(content)
+ .then(() => setTimeout(() => (btnStatus.value = 'success'), 150))
+ .catch(() => (btnStatus.value = 'error'))
+ .finally(() => setTimeout(() => (btnStatus.value = 'copy'), 1500));
};
</script>
<template>
- <div class="flex items-center cursor-pointer" @click="copyToClipboard()">
- <copy
- v-show="btnStatus === 'copy'"
- :theme="btnConfig.theme"
- :size="btnConfig.size"
- :fill="btnConfig.fill"
- />
- <loading
- class="rotate"
- v-show="btnStatus === 'loading'"
- :theme="btnConfig.theme"
- :size="btnConfig.size"
- :fill="btnConfig.fill"
- />
- <check-one
- v-show="btnStatus === 'success'"
- :theme="btnConfig.theme"
- :size="btnConfig.size"
- :fill="btnConfig.fill"
- />
- <close-one
- v-show="btnStatus === 'error'"
- :theme="btnConfig.theme"
- :size="btnConfig.size"
- :fill="btnConfig.fill"
- />
- <span class="text-xs ml-0.5 text-gray-500 leading-none">{{
- btnTips[btnStatus]
- }}</span>
- </div>
+ <div class="flex items-center cursor-pointer" @click="copyToClipboard()">
+ <copy v-show="btnStatus === 'copy'" :theme="btnConfig.theme" :size="btnConfig.size" :fill="btnConfig.fill" />
+ <loading class="rotate" v-show="btnStatus === 'loading'" :theme="btnConfig.theme" :size="btnConfig.size" :fill="btnConfig.fill" />
+ <check-one v-show="btnStatus === 'success'" :theme="btnConfig.theme" :size="btnConfig.size" :fill="btnConfig.fill" />
+ <close-one v-show="btnStatus === 'error'" :theme="btnConfig.theme" :size="btnConfig.size" :fill="btnConfig.fill" />
+ <span class="ml-0.5 text-gray-500 leading-none">{{ btnTips[btnStatus] }}</span>
+ </div>
</template>
<style scoped>
@keyframes spin {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
}
.rotate {
- animation: spin 2s linear infinite;
+ animation: spin 2s linear infinite;
}
</style>
--
Gitblit v1.9.3