clipboard切换为vue-clipboard3

package.json

@@ -8,7 +8,6 @@
 	},
 	"dependencies": {
 		"axios": "^0.21.1",
-		"clipboard": "^2.0.8",
 		"countup.js": "^2.0.7",
 		"cropperjs": "^1.5.12",
 		"echarts": "^5.1.2",
@@ -22,6 +21,7 @@
 		"sortablejs": "^1.14.0",
 		"splitpanes": "^3.0.4",
 		"vue": "^3.0.11",
+		"vue-clipboard3": "^1.0.1",
 		"vue-grid-layout": "^3.0.0-beta1",
 		"vue-i18n": "^9.1.4",
 		"vue-router": "^4.0.8",

src/layout/navBars/breadcrumb/setings.vue

@@ -356,7 +356,7 @@
 						icon="el-icon-document-copy"
 						type="primary"
 						ref="copyConfigBtnRef"
-						@click="onCopyConfigClick($event.target)"
+						@click="onCopyConfigClick"
 						>{{ $t('message.layout.copyText') }}
 					</el-button>
 				</div>
@@ -366,22 +366,19 @@
 </template>
 
 <script lang="ts">
-import { nextTick, onUnmounted, onMounted, getCurrentInstance, defineComponent, computed, ref } from 'vue';
-import { ElMessage } from 'element-plus';
-import ClipboardJS from 'clipboard';
-import { useI18n } from 'vue-i18n';
+import { nextTick, onUnmounted, onMounted, getCurrentInstance, defineComponent, computed } from 'vue';
 import { useStore } from '/@/store/index';
 import { getLightColor } from '/@/utils/theme';
 import Watermark from '/@/utils/wartermark';
 import { verifyAndSpace } from '/@/utils/toolsValidate';
 import { Local } from '/@/utils/storage';
+import commonFunction from '/@/utils/commonFunction.ts';
 export default defineComponent({
 	name: 'layoutBreadcrumbSeting',
 	setup() {
-		const { t } = useI18n();
 		const { proxy } = getCurrentInstance() as any;
-		const copyConfigBtnRef = ref();
 		const store = useStore();
+		const { copyText } = commonFunction();
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
 			return store.state.themeConfig.themeConfig;
@@ -557,10 +554,6 @@ export default defineComponent({
 		// 布局配置弹窗打开
 		const openDrawer = () => {
 			getThemeConfig.value.isDrawer = true;
-			nextTick(() => {
-				// 初始化复制功能，防止点击两次才可以复制
-				onCopyConfigClick(copyConfigBtnRef.value.$el);
-			});
 		};
 		// 触发 store 布局配置更新
 		const setDispatchThemeConfig = () => {
@@ -577,20 +570,11 @@ export default defineComponent({
 			Local.set('themeConfigStyle', document.documentElement.style.cssText);
 		};
 		// 一键复制配置
-		const onCopyConfigClick = (target: any) => {
+		const onCopyConfigClick = () => {
 			let copyThemeConfig = Local.get('themeConfig');
 			copyThemeConfig.isDrawer = false;
-			const clipboard = new ClipboardJS(target, {
-				text: () => JSON.stringify(copyThemeConfig),
-			});
-			clipboard.on('success', () => {
+			copyText(JSON.stringify(copyThemeConfig)).then(() => {
 				getThemeConfig.value.isDrawer = false;
-				ElMessage.success(t('message.layout.copyTextSuccess'));
-				clipboard.destroy();
-			});
-			clipboard.on('error', () => {
-				ElMessage.error(t('message.layout.copyTextError'));
-				clipboard.destroy();
 			});
 		};
 		// 修复防止退出登录再进入界面时，需要刷新样式才生效的问题，初始化布局样式等(登录的时候触发，目前方案)
@@ -668,7 +652,6 @@ export default defineComponent({
 			onClassicSplitMenuChange,
 			onIsBreadcrumbChange,
 			onSortableTagsViewChange,
-			copyConfigBtnRef,
 			onCopyConfigClick,
 		};
 	},

src/utils/commonFunction.ts

@@ -0,0 +1,65 @@
+// 通用函数
+import useClipboard from 'vue-clipboard3';
+import { ElMessage } from 'element-plus';
+import { formatDate } from '/@/utils/formatTime';
+import { useI18n } from 'vue-i18n';
+
+export default function () {
+	const { t } = useI18n();
+	const { toClipboard } = useClipboard();
+	//百分比格式化
+	const percentFormat = (row: any, column: number, cellValue: any) => {
+		return cellValue ? `${cellValue}%` : '-';
+	};
+	//列表日期时间格式化
+	const dateFormatYMD = (row: any, column: number, cellValue: any) => {
+		if (!cellValue) return '-';
+		return formatDate(new Date(cellValue), 'YYYY-mm-dd');
+	};
+	//列表日期时间格式化
+	const dateFormatYMDHMS = (row: any, column: number, cellValue: any) => {
+		if (!cellValue) return '-';
+		return formatDate(new Date(cellValue), 'YYYY-mm-dd HH:MM:SS');
+	};
+	//列表日期时间格式化
+	const dateFormatHMS = (row: any, column: number, cellValue: any) => {
+		if (!cellValue) return '-';
+		let time = 0;
+		if (typeof row === 'number') time = row;
+		if (typeof cellValue === 'number') time = cellValue;
+		return formatDate(new Date(time * 1000), 'HH:MM:SS');
+	};
+	// 小数格式化
+	const scaleFormat = (value: any = 0, scale: number = 4) => {
+		return Number.parseFloat(value).toFixed(scale);
+	};
+	// 小数格式化
+	const scale2Format = (value: any = 0) => {
+		return Number.parseFloat(value).toFixed(2);
+	};
+	// 点击复制文本
+	const copyText = (text: string) => {
+		return new Promise((resolve, reject) => {
+			try {
+				//复制
+				toClipboard(text);
+				//下面可以设置复制成功的提示框等操作
+				ElMessage.success(t('message.layout.copyTextSuccess'));
+				resolve(text);
+			} catch (e) {
+				//复制失败
+				ElMessage.error(t('message.layout.copyTextError'));
+				reject(e);
+			}
+		});
+	};
+	return {
+		percentFormat,
+		dateFormatYMD,
+		dateFormatYMDHMS,
+		dateFormatHMS,
+		scaleFormat,
+		scale2Format,
+		copyText,
+	};
+}

src/views/fun/clipboard/index.vue

@@ -2,14 +2,14 @@
 	<div id="printRref">
 		<el-card shadow="hover" header="复制剪切演示">
 			<el-alert
-				title="感谢优秀的 `clipboard`，项目地址：https://github.com/zenorocha/clipboard.js`"
+				title="感谢优秀的 `vue-clipboard3`，项目地址：https://github.com/JamieCurnow/vue-clipboard3`"
 				type="success"
 				:closable="false"
 				class="mb15"
 			></el-alert>
 			<el-input placeholder="请输入内容" v-model="copyVal">
 				<template #append>
-					<el-button @click="onCopyClick($event.target)" ref="copyBtnRef">复制链接</el-button>
+					<el-button @click="copyText(copyVal)">复制链接</el-button>
 				</template>
 			</el-input>
 			<el-input placeholder="先点击上方 `复制链接` 按钮，然后 `Ctrl + V` 进行粘贴！ " v-model="shearVal" class="mt15"> </el-input>
@@ -18,43 +18,20 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, ref, onMounted, nextTick } from 'vue';
-import { ElMessage } from 'element-plus';
-import ClipboardJS from 'clipboard';
-import { useI18n } from 'vue-i18n';
+import { reactive, toRefs, onMounted } from 'vue';
+import commonFunction from '/@/utils/commonFunction.ts';
 export default {
 	name: 'funClipboard',
 	setup() {
-		const { t } = useI18n();
-		const copyBtnRef = ref();
+		const { copyText } = commonFunction();
 		const state = reactive({
 			copyVal: 'https://gitee.com/lyt-top/vue-next-admin',
 			shearVal: '',
 		});
-		// 复制链接点击
-		const onCopyClick = (target: any) => {
-			const clipboard = new ClipboardJS(target, {
-				text: () => state.copyVal,
-			});
-			clipboard.on('success', () => {
-				ElMessage.success(t('message.layout.copyTextSuccess'));
-				clipboard.destroy();
-			});
-			clipboard.on('error', () => {
-				ElMessage.error(t('message.layout.copyTextError'));
-				clipboard.destroy();
-			});
-		};
 		// 页面加载时
-		onMounted(() => {
-			nextTick(() => {
-				// 初始化复制功能，防止点击两次才可以复制
-				onCopyClick(copyBtnRef.value.$el);
-			});
-		});
+		onMounted(() => {});
 		return {
-			copyBtnRef,
-			onCopyClick,
+			copyText,
 			...toRefs(state),
 		};
 	},