关于vue项目中使用复制粘贴功能

最新推荐文章于 2025-10-23 18:38:30 发布

原创最新推荐文章于 2025-10-23 18:38:30 发布 · 4.9k 阅读

1 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

9 篇文章

订阅专栏

本文介绍如何通过npm安装Clipboard.js库，并利用该库实现网页元素的复制功能。文章详细展示了安装步骤及如何通过实例化Clipboard对象绑定复制事件。

1.使用npm安装

npm install clipboard --save

2.实例化

var clipboard = new Clipboard('.btn');//可通过任意选择器进行实例化
        clipboard.on('success', function(e) {//使用on绑定成功
            console.log(e);
        });
        clipboard.on('error', function(e) {//使用on绑定失败
            console.log(e);
        });

3.DOM

<el-input id="foo"v-model="uuuurl" placeholder="请点击生成链接" style="width:330px;height:30px;margin-left:23px;" ref="vas"></el-input>
 <el-button class="btn"  data-clipboard-action="copy" data-clipboard-target="#foo">复制链接</el-button>