这是著名开源项目 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. webpack第一节(1)

    跟着慕课网的老师做了下笔记 webpack是一个前端打包工具 它可以优化网页.例如 页面模块化加载.图片优化.css.js压缩等等. 模块化加载也就是懒加载,按需加载,以前的模式是所以得css写在一起 ...

  2. hibernate简单连接mysql数据库配置

    使用hibernate连接mysql数据库 1:项目搭建好之后,在lib包中添加必要的jar包,和mysql数据库驱动jar包: jar包可以在hibernate的下载包(hibernate3.3.2 ...

  3. MariaDB 建立连接

    与MariaDB建立连接的一种方法是在命令提示符下使用mysql二进制文件. MySQL脚本 查看下面给出的示例. [root@host]# mysql -u root -p Enter passwo ...

  4. SparkStreaming获取kafka数据的两种方式:Receiver与Direct

    简介: Spark-Streaming获取kafka数据的两种方式-Receiver与Direct的方式,可以简单理解成: Receiver方式是通过zookeeper来连接kafka队列, Dire ...

  5. for循环语句示例

    for循环语句示例 一判断/var/目录下所有文件的类型 完整脚本 [root@centos73 ~]# cat shell_scripts/filetype.sh #!/bin/bash #Auth ...

  6. shell--grep命令+正则表达式+基本语法

    什么是正则 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则. 在linux中,通配符是由shell解释的,而正则表达式则 ...

  7. node 桌面应用开发

    1.node桌面应用开发的框架 :electron 和 nw.js     https://www.jianshu.com/p/c6bdb087e60d 2.使用electron构建跨平台Node.j ...

  8. vuedraggable 实现拖动数据改变

    // 引入组件 import Draggable from 'vuedraggable' // 使用组件 DragList 为自己封装好的组件 注意一定要使用vue的sync <DragList ...

  9. Python字典操作及课后练习

    '''dict,唯一一个映射数据类型数据类型划分:可变数据类型,不可变数据类型不可变数据类型:元组,bool int str(对str的任何改变都是形成了新的str,对原来的str没有改变)可变数据类 ...

  10. struts2 值栈分析

    目录 一.值栈分为两个逻辑部分 二.Struts2 利用 s:property 标签和 OGNL表达式来读取值栈中的属性值 1.值栈中的属性值: 2.读取对象栈中对象的属性: 3.默认情况下,Acti ...