先看看效果:
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