vue 复制粘贴div标签内容

最新推荐文章于 2023-07-19 14:25:22 发布

转载最新推荐文章于 2023-07-19 14:25:22 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

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

文章标签：

#html #vue.js

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Clipboard.js插件来实现复制div标签内容的功能。通过安装并配置Clipboard.js，结合Vue.js的特性，可以轻松地让用户复制网页中的指定内容。

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