这是著名开源项目 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. 在 IntelliJ IDEA 中这样使用 Git,效率提升2倍以上

    1.Git简介 Git是目前流行的分布式版本管理系统.它拥有两套版本库,本地库和远程库,在不进行合并和删除之类的操作时这两套版本库互不影响.也因此其近乎所有的操作都是本地执行,所以在断网的情况下任然可 ...

  2. 测试demo controllerweb.xml

    <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...

  3. makefile 中的patsubst

    1. wildcard:扩展通配符 2. notdir:去除路径 3. patsubst:替换通配符 若有一个makefile如下: src=$(wildcard *.c ./sub/*.c) dir ...

  4. hdu 5860 Death Sequence(递推+脑洞)

    Problem Description You may heard of the Joseph Problem, the story comes from a Jewish historian liv ...

  5. Database基础(一):构建MySQL服务器、 数据库基本管理 、MySQL 数据类型、表结构的调整

    一.构建MySQL服务器 目标: 本案例要求熟悉MySQL官方安装包的使用,快速构建一台数据库服务器: 安装MySQL-server.MySQl-client软件包 修改数据库用户root的密码 确认 ...

  6. Comet OJ 三元组 推导+两个指针+分类讨论

    题目:https://www.cometoj.com/contest/59/problem/F?problem_id=2681 题意:给你n个三元组 ai,bi,ci,如果某一对三元组满足    2* ...

  7. postgreSQL执行计划

    " class="wiz-editor-body wiz-readonly" contenteditable="false"> explain命 ...

  8. 利用core_pattern实现core文件的配置和管理

    参考:https://xz.aliyun.com/t/1098 这里所说的core_pattern 指的是:/proc/sys/kernel/core_pattern. 我们知道在Linux系统中,如 ...

  9. 93、R语言教程详解

    加载数据 > w<-read.table("test.prn",header = T) > w X.. X...1 1 A 2 2 B 3 3 C 5 4 D 5 ...

  10. 点读系列《jmeter官方用户手册》

    官网:http://jmeter.apache.org/usermanual/ 说明:十八元件.十九属性.二十函数,涉及清单内容暂未仔细阅读,个人觉得一是仅供使用参考,二是适合单独写文章来解读 一.让 ...