vue中实现点击复制功能

最新推荐文章于 2025-03-20 18:24:17 发布

hh22。

最新推荐文章于 2025-03-20 18:24:17 发布

阅读量1.8k

点赞数

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/weixin_44953689/article/details/109533255

版权

笔记专栏收录该内容

37 篇文章

订阅专栏

1.安装

npm install clipboard --save

2.引入

import Clipboard from 'clipboard';

  <div class="lianjie_box">
      <div class="dizhi">{{ url }}</div>
      <div
      class="dizhi_btn"
      @click="copyUrl"
      :data-clipboard-text="url"
       >
       <img
        src="../../assets/img/personal/icon_lianjie.png"
        alt=""/>
        复制链接
       </div>
   </div>

data() { 
	return {
		url:'hhhhhhhhhh'
	}
}

   copyUrl() {
      // let _this = this;
      let clipboard = new Clipboard(".dizhi_btn"); // 这里括号里填写上面点击事件绑定的class名
      clipboard.on("success", (e) => {
        // 复制成功，提示根据自己项目实际使用的UI来写
        this.$message.success("复制成功，快去分享吧~");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制，提示根据自己项目实际使用的UI来写
        this.$message.error("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    },