【vue 】复制粘贴div标签内容

vue 复制 粘贴div标签内容

---

1.安装clipboard.js

npm install clipboard

2.在vue页面引入clipboard.js

import Clipboard from 'clipboard';//引入安装复制插件

3.html代码

 <button
	  class="button"
      data-clipboard-target="#text" <!--这里绑定的是要复制的标签的id-->
      data-clipboard-action="copy" //这个加不加都可以
      @click="btnCopy" <!--这里是触发的方法-->
    >
  复制
</button>
<div id="text">需要复制的内容</div>

4.vue.js代码

btnCopy() {
    
    
      let textUrl = new Clipboard('.button');
      textUrl.on('success', (e)=> {
    
    
        this.$message('复制成功');
        textUrl.destroy()
      });
      textUrl.on("error", () => {
    
    
		this.$message('没有复制成功');
        textUrl.destroy();
      });
}

---