src/directives/index.ts

@@ -0,0 +1,16 @@
+import { App, Directive } from 'vue';
+import copy from './modules/copy';
+
+const directivesList: { [key: string]: Directive } = { copy };
+
+/**
+ * 挂载自定义事件
+ */
+const directives = {
+	install: function (app: App<Element>) {
+		Object.keys(directivesList).forEach(key => {
+			app.directive(key, directivesList[key]);
+		});
+	},
+};
+export default directives;

src/directives/modules/copy.ts

@@ -0,0 +1,49 @@
+import type { DirectiveBinding } from 'vue';
+import { Directive } from 'vue';
+
+interface ElType extends HTMLElement {
+	copyData: string | number; // 定义一个属性，用于存储需要复制的数据
+	__handleClick__: any; // 定义一个属性，用于存储事件处理函数
+}
+
+/**
+ * 复制自定义指令
+ */
+const copy: Directive = {
+	mounted(el: ElType, binding: DirectiveBinding) {
+		el.copyData = binding.value;
+		el.addEventListener('click', handelClick);
+	},
+	// 指令所在组件VNode 更新时触发
+	updated(el: ElType, binding: DirectiveBinding) {
+		el.copyData = binding.value; // 更新需要复制的数据
+	},
+	// 指令与元素绑定时触发
+	beforeMount(el: ElType) {
+		// 移除点击事件
+		el.removeEventListener('click', el.__handleClick__);
+	},
+};
+
+/**
+ * 点击事件
+ * @param this 当前作用域
+ */
+function handelClick(this: any) {
+	// 创建一个 input 元素
+	const input = document.createElement('input');
+	// 将需要复制的数据赋值给 input 的 value 属性
+	input.value = this.copyData.toLocaleString();
+	// 将 input 元素添加到 body 中
+	document.body.appendChild(input);
+	// 选中 input 元素中的文本
+	input.select();
+	// 执行复制操作
+	document.execCommand('Copy');
+	// 将 input 元素从 body 中移除
+	document.body.removeChild(input);
+
+	// TODO: 如需自定义请修改提示方式
+	alert('复制成功');
+}
+export default copy;

src/main.ts

@@ -1,3 +1,4 @@
+import directives from '@/directives';
 import { createPinia } from 'pinia';
 import { createApp } from 'vue';
 import App from './App.vue';
@@ -8,5 +9,5 @@ import router from './router';
 const pinia = createPinia();
 const app = createApp(App);
 
-app.use(router).use(pinia)
+app.use(router).use(pinia).use(directives);
 app.mount('#app');

src/views/bunny/default/My.vue

@@ -1,4 +1,18 @@
-<template>sdasd</template>
+<template>
+	<textarea type="text" v-model="myData.inputValue" />
+	<button v-copy="myData.inputValue">点击复制</button>
+</template>
 
-<script setup lang="ts"></script>
-<style scoped lang="scss"></style>
+<script setup lang="ts">
+import { reactive } from 'vue';
+const myData = reactive({
+	inputValue: '我是被复制的内容 🍒🍇🍊，2023-4-21 14:02:59',
+});
+</script>
+<style scoped lang="scss">
+textarea {
+	width: 500px;
+	height: 300px;
+	outline: 1px solid #f4dde5;
+}
+</style>

src/views/bunny/default/index.vue

@@ -1,6 +1,9 @@
 <template>
 	<h1>bunny/default页面</h1>
+	<My />
 	<RouterView />
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import My from '@/views/bunny/default/My.vue';
+</script>