vue复制文字功能

日常开发vue项目偶尔会碰到要复制 订单号 ，或者一串文字的功能，我们使用到了一个插件
vue2使用clipboard
vue3使用vue-clipboard3

vue2的使用
1、安装插件
npm install clipboard --save
2、我们把它封装成一个js，新建一个clipboard.js文件

import Clipboard from 'clipboard'

export const clipboard = (className) => {
  const clipboard = new Clipboard(className)

  clipboard.on('success', e => {
    // 释放内存
    clipboard.destroy()
  })
  clipboard.on('error', e => {
    // 不支持复制
    console.log('该浏览器不支持自动复制')
    // 释放内存
    clipboard.destroy()
  })
}

3、在我们要使用的页面引入clipboard.js，点击复制按钮就复制成功了，你可以鼠标粘贴看看内容是否正确

<template>
  <div>
     <el-button @click="copyLink" class="copyClass" :data-clipboard-text="linkUrl">复制链接</el-button>
  </div>
</template>
<script>
import { clipboard } from './clipboard' //根据你自己项目结构引入
export default {
  data () {
    return {
       linkUrl: 'www.baidu.com'
     }
   },
    methods: {
    //复制链接
      copyLink () {
        clipboard('.copyClass') //按钮的class
      }
    }
}
</script>

vue3的使用
1、安装插件
npm install vue-clipboard3 --save
2、在页面中使用插件

<template>
   <el-button @click="copyLink()">复制链接</el-button>
</template>
<script setup>
import useClipboard from 'vue-clipboard3';
const { toClipboard } = useClipboard();
const copyLink = async () => {
    await toClipboard('www.baidu.com')
}
</script>

最后需要注意的是复制的点击按钮尽量用botton按钮，其他标签不生效。如果你不想要botton的样式，只能把botton的透明度设为opacity: 0， 然后定位到你的盒子上了