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 相关文章推荐
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 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 冒泡排序算法的实现代码
2010/08/08 PHP
教你如何使用php session
2013/10/28 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
使用正则替换变量
2007/05/05 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
基于jQuery的自动完成插件
2011/02/03 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
JavaScript中AOP的实现与应用
2019/05/06 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
js实现微信聊天界面
2020/08/09 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
个人社会实践自我鉴定
2014/03/24 职场文书
三万活动总结
2014/04/28 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书