这是著名开源项目 clipboard.js 的 README.md,里面讲解的更加详细,有兴趣的同学可以了解一下。
项目地址:https://github.com/zenorocha/clipboard.js

下面我就简单记录一下,我对clipboard.js的小小见解。

安装:

npm install clipboard --save

安装完成后,会在项目目录下的node_modules文件夹下找到clipboard文件夹

注:如果不是vue项目,可以去官网https://clipboardjs.com/下载js,通过<script src='clipboard.js'></script>使用

使用:

在需要使用的地方引入import Clipboard from 'clipboard'

html部分:

注:给按钮添加两个属性--data-clipboard-target和data-clipboard-action

  data-clipboard-target属性的值就是能匹配到另一个元素的选择器;data-clipboard-action属性来指明你想要复制(copy)还是剪切(cut)内容,默认copy;

  还需要注意的是如果设置cut动作只在 <input> 或 <textarea> 元素起作用。

  如果你不需要从另一个元素来复制内容。你仅需要给目标元素设置一个 data-clipboard-text 属性就可以了; data-clipboard-text 属性值为你设置的固定内容

js部分:

最后,如果你使用单页应用,你可能想要更加精确地管理 DOM 的生命周期。你可以清理事件以及创建的对象。

clipboard.destroy();

js实现复制|剪切指定内容到粘贴板--clipboard的更多相关文章

  1. js插件实现点击复制内容到粘贴板,兼容IE8

    先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...

  2. js实现复制内容到粘贴板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. js点击按钮复制内容到粘贴板

    复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...

  4. vue复制textarea文本域内容到粘贴板

    vue实现复制内容到粘贴板   方案:找到textarea对象(input同样适用),获取焦点,选中textarea的所有内容,并调用document.execCommand("copy&q ...

  5. js 实现复制剪切

    原生js实现复制 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  6. vue 复制内容到粘贴板

    首先是npm安装依赖包:npm install clipboard --save 导入组件:import Clipboard from "clipboard"; html如图: c ...

  7. Intellij IDE使用 ideavim,不能复制文档到系统粘贴板

    vim的yank命令默认不会复制到系统粘贴板,而是粘贴到寄存器.你可以使用* 或 +寄存器来访问系统粘贴板. 在~/.ideavimrc (如果不存在就创建) 中添加下列选项 set clipboar ...

  8. JS 操作复制剪切粘贴

    测试了很多次之后,虽然有点细碎的突破,但还是想说,麻辣隔壁... 众所周知使用 oncut/oncopy/onpaste 监听剪切板,采用 window.clipboardData 并不是适用于大多浏 ...

  9. js 复制内容到粘贴板的兼容性

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...

随机推荐

  1. C++ 浅析移位运算

    按位左移(<<): 按二进制形式把所有的数字向左移动对应的位数,高位移出(舍弃),低位的空位补零 按位右移(>>): 按二进制形式把所有的数字向右移动对应位移位数,低位移出(舍 ...

  2. 【Nginx】缓存配置

    1.如何配置基本缓存设置 开启简单的缓存配置,只需要两个指令:proxy_cache_path和proxy_cache.proxy_cache_path配置缓存的存放地址和其他的一些常用配置,prox ...

  3. Tomcat负载均衡图片显示不正常解决方法

    在部署一个Tomcat玩玩的时候,发现在做nginx负载均衡时,网站显示不正常,图片会变得很大.测试了半天都没成功,最后查找资料,才发现Tomcat负载均衡时Session处理有问题,Session是 ...

  4. Panel

    在Panel上绘图的实现 近期制作了FDS的一个建模工具,由于知识有限,做出的效果是2D的.昨天上课的时候看老师画一个长方体,突然想到,为什么不给普通的2D图形加画上几条直线,就能实现2D图形的3D视 ...

  5. Jquery 实现回车键触发功能

    keyup,上抬键盘 .$(function(){ 方法一: $(document).keyup(function(event){ if(event.keyCode ==13){ alert(&quo ...

  6. C++ pair

    C++ pair Pair类型概述 pair是一种模板类型,其中包含两个数据值,两个数据的类型可以不同,基本的定义如下: pair<int, string> a; 表示a中有两个类型,第一 ...

  7. Android 测试点归纳总结

    前言 除了测试平台工具,业务测试的总结和思考同样重要,这里总结了一些Android测试知识点,可以辅助业务测试快速形成测试用例和检查点,当作抛砖引玉分享给大家.如有思考不全面的地方,欢迎大家指出来. ...

  8. RHEL6.1 安装 Oracle10gr2 (图文、解析)

    目录 目录 软件环境 前言 初始化RHEL61 硬件检测 预安装软件包 安装oratoolkit 创建Oracle用户 修改配置文件 系统版本伪装 解压并运行Oracle10gr2安装包 安装rlwr ...

  9. angular 通过路由获取ID

    constructor( private dataService: TestListsService, private route: ActivatedRoute, ) { // 通过路由获取ID c ...

  10. Jenkins 搭建篇

    1.Jenkins 介绍 自动化运维工具:saltstack.jenkins.等.因为他们的目标一样,为了我们的软件.构建.测试.发布更加的敏捷.频繁.可靠 如果运维对git不熟,是无法做自动化部署. ...