vue实现点击复制文本功能

废话不多说，直接上步骤！

STEP1:

安装clipboard.js

npm install clipboard --save

STEP2:

在需要使用的页面引入clipboard

import Clipboard from 'clipboard';

STEP3:

vue:

 // 这里的url是要复制的内容， class名与点击事件里创建 Clipboard 对象相关联
<div><p @click="copyUrl" class="copy-btn" :data-clipboard-text="url">【复制链接】</p><a>{{ url}}</a>
</div>

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

Well, that’s all！

vue实现点击复制文本功能相关推荐

vue移动端点击复制文本内容
安装依赖包: npm install clipboard --save 在需要用到的vue文件导入: import Clipboard from 'clipboard'; import { Toast ...
小程序文字长按识别复制和自定义一键复制文本功能
1.文字长按识别复制: 把需要长按复制的文字用text标签包裹,然后添加selectable="true"属性即可但是这个属性有些缺点,就是长按后不可以直接全选中文本内容进行复制 ...
js点击复制文本 - 案例篇
文章目录 js点击复制文本 :代码+效果图效果图 · 示下: html 代码如下: 注意代码: 附:[javascript监听键盘事件 - 如表单enter回车提交](https://blog.cs ...
html点击自动复制功能,html5页面如何实现点击复制的功能
html5页面如何实现点击复制的功能发布时间:2020-09-22 11:07:18 来源:亿速云阅读:136 作者:小新这篇文章主要介绍了html5页面如何实现点击复制的功能,具有一定借鉴价值 ...
【前端技巧】实现点击复制文本内容方法
/*** 点击复制文本内容* * @param {String} content * * @author Outman* @date 2022-10-27*/ // [旧]利用inputElement ...
实现一键复制文本功能（laya、egret、cocos）
实现一键复制文本功能(laya.egret.cocos) 如果想转请评论留个言并注明原博 @Sclifftop @13805064305 维尼 https://blog.csdn.net/S_clif ...
js实现复制并能保留原格式粘贴；vue中点击复制粘贴功能；vue复制功能（不需要插件）；
使用场景:vue项目中遇到点击按钮,复制文本的功能.复制成功后可以黏贴. <div @click="copyDesc">复制</div>methods:{c ...
vue中实现点击复制文本内容之clipboard
项目中有些场景需要点击复制某段内容并粘贴的功能如点击复制名称,订单号,文章段落等需要先安装引入使用对应的方法 1.安装 npm install clipboard --save 2.引入直接 ...
vue点击复制链接功能两种方法实现
今天在写需求的时候有个复制链接功能给实现下,有两种方式可实现第一种用原生实现 <Button type="success" @click="copyLink(ro ...
vue点击复制链接功能
需求:点击复制链接,粘贴到地址栏中跳转到相应页面原理:创建input标签,将链接值赋值给input标签,调用浏览器复制方法示例代码: <template> <div class= ...

vue实现点击复制文本功能

STEP1:

STEP2:

STEP3:

vue实现点击复制文本功能相关推荐

最新文章

热门文章