clipboardjs实现点击拷贝复制

简介: clipboardjs实现点击拷贝复制

1、文档

英文:https://clipboardjs.com/

中文http://www.clipboardjs.cn/

2、安装

npm install clipboard --save

3、使用示例

demo.vue

<template>
  <div>
    <input type="text" v-model="message" />
    <button class="btn" :data-clipboard-text="message">Copy</button>
  </div>
</template>
<script>
import ClipboardJS from "clipboard";
export default {
  data: function() {
    return {
      message: "Copy These Text"
    };
  },
  mounted() {
    // 创建的时候就绑定事件
    var clipboard = new ClipboardJS(".btn");
    clipboard.on("success", function(e) {
      alert(e.text);
      console.log(e);
      e.clearSelection();
    });
    clipboard.on("error", function(e) {
      console.log(e);
    });
  }
};
</script> 


相关文章
|
前端开发
Layui 内置方法 - layer.load(加载层)
Layui 内置方法 - layer.load(加载层)
2531 0
|
JavaScript 前端开发 Go
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
2633 2
element el-table 设置fixed导致行错乱问题
文章讨论了在使用Element UI的`el-table`组件时,设置固定列(`fixed`)导致行错乱的问题,并提供了解决方案。问题产生的原因是当表格底部有滚动条而固定列底部没有滚动条时,行无法对齐。解决办法是在表格中设置`padding-bottom`的内边距与滚动条高度相等,确保固定列和非固定列的行能够对齐。
3805 0
|
数据库
vue+elementui中,el-select多选下拉列表中,如何同时获取:value和:label的值?
vue+elementui中,el-select多选下拉列表中,如何同时获取:value和:label的值?
Layui 内置方法 - layer.alert(普通信息框)
Layui 内置方法 - layer.alert(普通信息框)
1862 0
|
存储 网络协议 API
案例分享:某品牌音响系列协议调试工具(搜寻主机,查询通道,基本控制API,云音乐API,语言节目API等,可增删改指令)
案例分享:某品牌音响系列协议调试工具(搜寻主机,查询通道,基本控制API,云音乐API,语言节目API等,可增删改指令)
案例分享:某品牌音响系列协议调试工具(搜寻主机,查询通道,基本控制API,云音乐API,语言节目API等,可增删改指令)
|
关系型数据库 MySQL Linux
CentOS 7 编译部署 LAMP 环境
CentOS 7 编译部署 LAMP 环境
326 0
|
JavaScript 前端开发 数据格式