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 相关文章推荐
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
BootStrap selectpicker
Jun 20 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 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数据库连接类~~做成一个分页类!
2006/11/25 PHP
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
thinkphp分页集成实例
2017/07/24 PHP
不安全的常用的js写法
2009/09/15 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
Python时间戳使用和相互转换详解
2017/12/11 Python
Python决策树和随机森林算法实例详解
2018/01/30 Python
python中字符串的操作方法大全
2018/06/03 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
关于毕业的广播稿
2014/01/10 职场文书
卖房授权委托书样本
2014/10/05 职场文书
2016年党建工作简报
2015/11/26 职场文书
竞聘书的秘诀
2019/04/02 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
pytorch 6 batch_train 批训练操作
2021/05/28 Python
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle