VUE3实现一键复制功能

1.使用@vueuse/core (安全策略的问题，非https网页下面不让你拷贝)

@vueuse/core是一个为 Vue.js 提供常用功能和实用工具函数的库。它是基于 Composition API，为开发者提供了一组易于使用和可复用的函数

http网页使用解决方法:解决方法!

2.使用插件

		npm install vue-clipboard3

import useClipboard from 'vue-clipboard3';
import { message } from 'ant-design-vue';
setup() {//一键复制const { toClipboard } = useClipboard();/** 点击的方法* @item 需要复制的内容*/const copyClick = async item => {try {await toClipboard(item);message.success('复制成功');} catch (e) {console.error(e);}};return {copyClick,}
}

3. 原生代码实现

3.1封装useCopyToClipboard.js

export function useCopyToClipboard(val) {let isSuccessRef = false;//创建input标签var input = document.createElement("input");//将input的值设置为需要复制的内容input.value = val;//添加input标签document.body.appendChild(input);//选中input标签input.select();//执行复制document.execCommand("copy");if (document.execCommand("copy")) {isSuccessRef = true;} else {isSuccessRef = false;}//移除input标签document.body.removeChild(input);return { isSuccessRef };
}

3.2 使用

import { useCopyToClipboard } from "@/utils/useCopyToClipboard.js"

function handleCopy(val) {let { isSuccessRef } = useCopyToClipboard(val)if (isSuccessRef) {proxy.$modal.msgSuccess("复制成功");} else {proxy.$modal.msgError("复制失败");}
}

html: handleCopy(记得传递复制值)

   <div class="show-info-box"><div class="label-title">服务地址 ：</div><div class="label-info token" style="cursor: pointer;" @click="handleCopy(detailData.openUrl)"><span> {{ detailData.openUrl }}</span></div></div>

实现效果