在vue脚手架中使用vue-clipboard2实现一键复制图片功能

在vue脚手架中使用vue-clipboard2实现一键复制功能(包含图片和文字)

tips:2020-12-3 该方法已失效 用了浏览器废弃的属性, 现在已经不支持了,实现需求请移步新方法

---

请查看 新方法

1. 安装

npm install --save vue-clipboard2

2. 在main.js里引入

import VueClipboard from 'vue-clipboard2'   
VueClipboard.config.autoSetContainer = true;//如果要复制没有特定按钮的文本内容,请添加此行
Vue.use(VueClipboard)

3.页面引用
html部分

<div ref="foo" >//通过ref获取dom
     <img :src="url" alt="">//盒子内为你需要复制的内容
     <p>盒子内为你需要复制的内容</p>
</div>
<el-button  type="primary" @click="copy">一键复制</el-button>

methods部分

    copy (e) {
      this.$nextTick(function () {//nextTick,当前dom渲染完毕的回调
        console.log('foo', this.$refs.foo)//打印获取的dom
        const selection = window.getSelection()
        const range = document.createRange()
        range.selectNode(this.$refs.foo)//传入dom
        selection.addRange(range)
        document.execCommand('copy')//copy是复制
        selection.removeAllRanges()/清除缓存
      })
    },

点击按钮 盒子内的图片文字都已一键复制了,粘贴出来也是图片和文字.