vue中粘贴板clipboard的使用方法

目录

拷贝需求

一、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 --save

2.初始化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'; // 可以父组件传动态dom
    const 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优化