vue点击复制_js获取复制的内容

vue点击复制_js获取复制的内容Vue中配合clipboard.js实现点击按钮复制内容

大家好,又见面了,我是你们的朋友全栈君。

项目需求

点击某个按钮,将设置的目标内容(例如下载链接地址,电话号,微信号)复制到剪切板,可以在电脑/手机上任何地方粘贴

插件选择

  • clipboard.js:

1. 官方地址:clipboardjs.com

2. 引入方式:

  • NPM 方式npm install clipboard --save

3. 使用方式(官方文档例子):

  • HTML(target包括但不限于input)
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>复制代码
  • JS
var clipboard = new ClipboardJS('.btn');
//成功回调
clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);  
    e.clearSelection();
});
//失败回调
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});复制代码

更多使用方式和功能请参考官方文档,这里只举例一个实用且常用的功能!


在 Vue 中使用

1. 安装:

npm install clipboard --save复制代码

2.  引入:

import Clipboard from 'clipboard';复制代码

3. template: 

<button   ref="copyButton"   :data-clipboard-text="copyNumber"></button>复制代码

如果不想显示 input 输入框,可把需要复制的内容使用 data-clipboard-text 挂载到按钮上

<input id="copyInput" readonly v-module="copyNumber"><button   ref="copyButton"   data-clipboard-target="copyInput"></button>复制代码

如果需要显示 input 输入框,可以在 data-clipboard-target 填写输入框的 id 去复制输入框的内容

4. js

export default {  data() {    return {      copyNumber: '18404960408'    };  },
methods: {    // 初始化复制插件    initClipboard() {      const clipboard = new Clipboard(this.$refs.copyButton);      clipboard.on('success', (e) => {        console.log('复制成功,请在微信粘贴添加')      });      clipboard.on('error', (e) => {        console.log('复制失败,请再次尝试')      });    }  },  mounted() {    this.initClipboard();  }
}复制代码

转载于:https://juejin.im/post/5c80754ef265da2da23d5624

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106944.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 大数据中数据采集的几种方式

    大数据中数据采集的几种方式一、采集大数据的方法1.1通过系统日志采集大数据用于系统日志采集的工具,目前使用最广泛的有:Hadoop的Chukwa、ApacheFlumeAFacebook的Scribe和LinkedIn的Kafka等。这里主要学习Flume。Flume是一个高可靠的分布式采集、聚合和传输系统,Flume支持在日志系统中定制各类数据发送方,用于收集数据,同时对数据进行简单处理,并写到诸如文本、HDFS…

  • ubuntu16安装中文输入法_ubuntu输入法安装

    ubuntu16安装中文输入法_ubuntu输入法安装本文安装谷歌输入法。使用一段时间后发现,谷歌输入法用起来极舒服,比sougouforlinux好用多了。记得谷歌的中文输入法主要是北京分部在做,对googlecn的好感度飙升!!!安装fcitx-googlepinyin(Ctrl+Alt+T打开终端,输入)sudoapt-getinstallfcitx-googlepinyin输入密码开始安装(输入密码的时候光标是不会移动的,不会有对应密码的***这样的星号出来,只管输完密码按回车就行),命令行会停在[y/n]的确认行,输入y并

  • activity的用法总结_pagemanager

    activity的用法总结_pagemanagerActivityManager总结列表1.公共方法(1)getMemoryClass()通过以兆为单位获取当前应用可用的内存大小。(2)getLargeMemoryClass()当开发者在manifest文件中的标签中设置largeHeap属性的值为”true”时,当前应用就可以获取到系统分配的最大堆内存.如果你设置了该值,可以通过ActivityMa

  • 虚函数后面的分号可有可无_虚函数需要实现吗

    虚函数后面的分号可有可无_虚函数需要实现吗const 和 =0要分开理解.首先理解一下分开的意思成员函数后面用 const 修饰,const表示this是一个指向常量的指针,即对象成为一个常量,即它的成员不能够变化.(默认情况下,this的类型是指向类类型非常量版本的常量指针。例如在Sales_data成员函数中,this的类型是Sales_data *const,即类一旦实例化一个对象后,this指向这个对象,是不能改变的,但是对象…

  • E: Could not get lock /var/lib/dpkg/lock-frontend – open (11: Resource temporarly unavailable)

    E: Could not get lock /var/lib/dpkg/lock-frontend – open (11: Resource temporarly unavailable)Ubuntu安装软件报错问题错误信息E:Couldnotgetlock/var/lib/dpkg/lock-frontend-open(11:Resourcetemporarlyunavailable)解决办法:sudorm/var/lib/dpkg/lock-frontendsudorm/var/lib/dpkg/lock

    2022年10月23日
  • 帆软报表,异常问题汇总

    帆软报表,异常问题汇总164.导出excel0kb内存不够或者磁盘空间不足163.UnresolvableOperation:mobileinclassReportDispatcher排除jar包和插件影响的话,可能是LIC里面没有决策平台功能点162.客户嵌入我们的url时出现报错Refusedtodisplay’URL’inaframebecauseitset’X-Fr…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号