vue 复制粘贴div标签内容

最新推荐文章于 2025-04-27 16:54:07 发布

周同学_web

最新推荐文章于 2025-04-27 16:54:07 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： html vue.js

原文链接：https://blog.youkuaiyun.com/weixin_45020094/article/details/107840642

vue 专栏收录该内容

10 篇文章

订阅专栏

vue 复制粘贴div标签内容

安装clipboard.js

npm install clipboard

在vue页面引入clipboard.js

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

html代码

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

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();
      });
}