使用clipboard实现复制到剪切板功能（超详细~~）

先看看效果：

1.页面中使用

// html<Button type="primary" @click="clickCopy">复制</Button>// js<script>import utils from '@/libs/utils'methods: {clickCopy (){utils.copy2clipboard('LALALAALA')//复制的内容},} </script>

2.复制黏贴的功能封装

import Clipboard from 'clipboard'const utils = {copy2clipboard (str) {const oInput = document.createElement('input')// 把文字放进input中，供复制oInput.value = stroInput.id = 'copydom'document.body.appendChild(oInput)// 选中创建的inputoInput.select()// 执行复制方法， 该方法返回bool类型的结果，告诉我们是否复制成功const copyResult = document.execCommand('copy')// 根据返回的复制结果 给用户不同的提示if (copyResult) {instance.$Message.success('已复制到粘贴板')// 操作中完成后 从Dom中删除创建的inputdocument.body.removeChild(oInput)} else {// this.$Message.error('复制失败')let clipboard = new Clipboard('#copydom')clipboard.on('success', () => {instance.$Message.success('已复制到粘贴板')// 操作中完成后 从Dom中删除创建的inputdocument.body.removeChild(oInput)})clipboard.on('error', () => {instance.$Message.error('复制失败')// 操作中完成后 从Dom中删除创建的inputdocument.body.removeChild(oInput)})}} }export default utils

以上便可以实现一个基本的复制功能，可根据自己的项目进行调整。