点击复制文字

当文字过于长的时候 用户不会粘贴复制的时候我们可以在文字后面加一个复制按钮方便用户进行使用 复制提高用户的喜爱性

我这个不会出现 本地版本可以使用但是到了测试版本或者线上版本就不能使用了 我要给你们的就是我自己已经开发完的也在线上跑起来的

我是基于vue3来实现的 

第一步 ：下载复制的第三方库并且引入到自己的项目文件当中去

import useClipboard from 'vue-clipboard3'

第二步：初始化copy到粘贴板 

const { toClipboard } = useClipboard() // 初始化 copy 到粘贴板

第三步：在表格中添加一个button按钮 事件为handleCopy() 

括号里面的row.spuName就是数据的文字 那个数据需要复制你就把button的点击事件就复制到哪里去直接把row.supName给换掉就可以了

 <div  >
                {{ row.spuName ? row.spuName : '商品名称' }}
                <el-button link type="primary" class="copy-btn"@click="handleCopy(row.spuName)">                
                  <Icon icon="ep:document-copy" class="mr-5px" />
                </el-button>
              </div>

第四步：写点击事件

// 在 script 部分添加复制方法
const handleCopy = async (text: string) => {
  await toClipboard(text)
  message.success('复制成功')
}

好了 这就写完了 效果如下：