vue 复制 粘贴div标签内容

vue 复制 粘贴div标签内容

1. 安装clipboard.js

npm install clipboard

2. 在vue页面引入clipboard.js

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

3. html代码

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

4. vue.js代码

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