Vue使用Clipboard.JS在h5页面中复制内容实例详解


Posted in Javascript onSeptember 03, 2019

安装clipboard.js

github路径:https://github.com/zenorocha/clipboard.js

安装:

npm install clipboard --save

引入clipboard.js

import ClipboardJS from "clipboard";

<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>

使用:

剪切

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title>dfsf</title>

  <script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    $(function() {
      new ClipboardJS('.btn');
    })
  </script>
</head>

<body>
  <div>
    <!-- Target -->
    <textarea id="bar">Mussum ipsum cacilds...</textarea>

    <!-- Trigger -->
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
  Cut to clipboard
</button>

  </div>

</body>

</html>

复制

<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">

3.在vue中使用并自定义复制内容,定义复制回调:

<div class="dlbtn cpkw" @click="copykeyword">复制关键词</div>

·····
copykeyword() {
   var clipboard = new ClipboardJS(".cpkw", {
    text: function(trigger) {
     //alert("ok");
     return "testvalue";
    }
   });
   clipboard.on("success", e => {
    //复制成功
    // 释放内存
    clipboard.destroy();
   });
   clipboard.on("error", e => {
    // 不支持复制
     console.log("该浏览器不支持自动复制");
    // 释放内存
    clipboard.destroy();
   });

以上就是本次介绍的全部知识点内容,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
初探jquery——表单应用范例
Feb 20 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
vue登录注册实例详解
Sep 14 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
layui中的switch开关实现方法
Sep 03 #Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 #Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 #Javascript
vue路由教程之静态路由
Sep 03 #Javascript
多个vue子路由文件自动化合并的方法
Sep 03 #Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 #Javascript
vue 自动化路由实现代码
Sep 03 #Javascript
You might like
PHP版自动生成文章摘要
2008/07/23 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php实现的mongodb操作类
2015/05/28 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
javascript tips提示框组件实现代码
2010/11/19 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
python mysqldb连接数据库
2009/03/16 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
Python常见的pandas用法demo示例
2019/03/16 Python
python3实现表白神器
2019/04/09 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
娱乐地球:Entertainment Earth
2020/01/08 全球购物
更夫岗位责任制
2014/02/11 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
关于建议书的格式范文
2014/05/20 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
会计试用期自我评价
2015/03/10 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
HTML中的表格元素介绍
2022/02/28 HTML / CSS