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漏洞的定义漏洞,也叫脆弱性(英语:Vulnerability),是指计算机系统安全方面的缺陷,使得系统或其应用数据的保密性、完整性、可用性、访问控制等面临威胁。漏洞在各时间阶段的名称根据是否公开分为:未公开漏洞、已公开漏洞根据漏洞是否发现分为:未知漏洞、已知漏洞根据补丁和利用价值是否发布分为:0day漏洞、1day漏洞、历史漏洞图1漏洞在各时间阶段的名称漏洞的特…

  • mpvue还能用吗(mpvue的性能问题)

    在newvue()的时候不能加入store,否则在App.vue文件中onLaunch(){}失效正确的使用姿势:importstorefrom’@/store’Vue.prototype.$store=store

  • list集合转化为数组_list集合转成数组

    list集合转化为数组_list集合转成数组packagecom.loaderman.jdk5;importjava.util.ArrayList;importjava.util.Arrays;importjava.util.List;publicclassDemo4_AsList{/***数组转换成集合*数组转换成集合虽然不能增加或减少元素,但是可以用集合的思想操作数组,也就是说可以使用其他集合中的方法*/public…

  • PyCharm如何删除工程项目

    PyCharm如何删除工程项目1、在菜单中选择:file——>closeproject2、选择需要删除的项目右上角的“×”号进行删除工程项目3、找到工程项目的存放路径,删除对应的工程项目文件通过上诉操作即可在pycharm中删除工程文件。转载于:https://www.cnblogs.com/benpao1314/p/9679508.html…

  • ubuntu学习的简单笔记

    l vi编辑器开发步骤A)输入 vi Hello.javaB) 输入 i 插入模式。C)输入 冒号。【保存退出:wq】【退出

    2021年12月28日
  • python3 gil锁_python 全局锁

    python3 gil锁_python 全局锁前言python的使用者都知道Cpython解释器有一个弊端,真正执行时同一时间只会有一个线程执行,这是由于设计者当初设计的一个缺陷,里面有个叫GIL锁的,但他到底是什么?我们只知道因为他导致pyt

发表回复

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

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