兴化住房和城乡建设局网站横琴网站建设公司
目录
拷贝需求
一、clipboard插件方案
1.clipboard安装
2.初始化Clipboard
3.模板使用
二、Clipboard.writeText方法
三、总结
我的博客原文：https://code-nav.top/article/1067
拷贝需求
哈哈，今天实现个小功能，复制功能，需求是点击分享按钮能把这个链接设置粘贴板， 效果如下：
下面我推荐给大家两种方法，大家根据自己需求使用。
一、clipboard插件方案
1.clipboard安装
npm地址：https://www.npmjs.com/package/clipboard
npm install clipboard --save2.初始化Clipboard
引入Clipboard ，script代码如下：
// 功能为阉割样式版仅供参考
<script lang="ts">
import { defineComponent } from 'vue';
import Clipboard from 'clipboard'; // 引入Clipboard
import { message } from 'ant-design-vue';
export default defineComponent({name: 'DownLoadItem',setup() {const copyId = 'dom'; // 可以父组件传动态domconst id = 11; // 可动态传入// 分享const copy = () => {const clipboard = new Clipboard(`.${copyId}`);clipboard.on('success', () => {message.success('链接已复制，赶快去分享吧！');clipboard.destroy();});clipboard.on('error', e => {console.log('该浏览器不支持自动复制!', 'warning', e);clipboard.destroy();});};const copyText = ` // 内容可动态赋值我在前端小阳仔的博客中发现了好文章💎快来围观啦链接： https://code-nav.top/download/${id})}`;return {copy,copyText};}
});
</script>3.模板使用
<template><span :data-clipboard-text="copyText" :class="copyId" @click="copy">分享</span>
</template>参数解读：
| 参数 | 描述 |
| data-clipboard-text | 需要被复制的文本 |
| class | 动态类 |
如果你到了这一步，那代表你的复制粘贴功能完美实现啦！恭喜恭喜！
二、Clipboard.writeText方法
Clipboard 接口的 writeText() 方法可以写入特定字符串到操作系统的剪切板。会返回一个Promise ，一旦剪贴板的内容被更新，它就会被解析。如果调用者没有写入剪贴板的权限，则拒绝写入剪切板（reject）
copy() {navigator.clipboard.writeText('需要复制的内容。。。，可动态传值').then(() => {console.log('复制成功')})
}
三、总结
两种方案都很不错，第二种相对比较简单，当然萝卜青菜各有所爱，大家根据自己的爱好选择即可。用户体验度又上升啦！YYDS！欢迎在评论区交流。
如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。
功能在线体验链接：https://code-nav.top/download?id=9
往期回顾
vue3中使用prismjs或者highlight.js实现代码高亮
vue中粘贴板clipboard的使用方法
vue3使用i18n 实现国际化
图片懒加载vue3-lazy
Vite4.2 +Vue3.2+Less实现主题切换功能
vue3.x使用prerender-spa-plugin预渲染达到SEO优化