import ClipboardJS from "clipboard";

或

<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
  • 使用：
  1. 剪切
<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>
  1. 复制
 <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();

      });

Vue使用Clipboard.JS在h5页面中复制内容的更多相关文章

  1. 前端视频直播技术总结及video.js在h5页面中的应用

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...

  2. H5页面中唤起native app

    现在各类app,分享出去的H5页面中,一般都会带着一个立即打开的按钮,如果本地安装了app,那么就直接唤起本地的app,如果没有安装,则跳转到下载.这是一个很正常的推广和导流量的策略,最近产品经理就提 ...

  3. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  4. 如何使用Web3.js API 在页面中进行转账

    本文介绍如何使用Web3.js API 在页面中进行转账,是我翻译的文档Web3.js 0.2x 中文版 及 区块链全栈-以太坊DAPP开发实战 中Demo的文章说明. 写在前面 阅读本文前,你应该对 ...

  5. 纯css、js 的H5页面对接echarts

    做项目时,会遇到一些零碎的技术点.记录下来以防忘记 需求:做可视化界面,但是需要兼容ie8,需要用纯css.js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip). 实现方 ...

  6. H5页面中判断是安卓手机还是ios手机的方法；APP页面中嵌套的H5跳转到APP其他页面的方法。

    (一).在H5页面中,可以直接利用如下的方法来进行判断是安卓还是ios. var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu ...

  7. Android : 如何在WebView显示的页面中查找内容

    Android : 如何在WebView显示的页面中查找内容 Author : Aoyousatuo Zhao http://blog.sina.com.cn/aoyousatuo WebView是A ...

  8. vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟，连续点击无反应的问题

    异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...

  9. js在新页面中返回到上一页浏览的历史位置

    在微信浏览器中浏览页面时,在当前页面中当我们将页面往下滚动到某一个位置时,可能我们就会点击某个链接而页面跳转到了另外一个页面,而当我们又返回到上一个页面时我们会发现那个页面还停留在我们之前浏览的位置, ...

随机推荐

  1. 测试工具Fiddler（一）—— 基础知识

    Fiddler基础知识 一.Fiddler是什么? Fiddler是一个http协议调试代理工具,它能够记录客户端和服务器之间的所有 HTTP请求,可以针对特定的HTTP请求,分析请求数据.设置断点. ...

  2. 所有锁的unlock要放到try{}finally{}里，不然发生异常返回就丢了unlock了

    所有锁的unlock要放到try{}finally{}里,不然发生异常返回就丢了unlock了

  3. 8.for循环及练习

    For循环:   虽然所有循环结构都可以用 while 或者 do...while 表示,但Java提供了另一种语句— —for循环,使一些循环结构变的更加简单. for 循环语句是支持迭代的一种通用 ...

  4. Oracle GoldenGate for BigData-Kafka

    0. Env list:Oracle Linux:6.10Oracle DB 11.2.0.4OGG4Ora:19.1OGG4BD:19.1 1.Install package for OCI ins ...

  5. CCPC-Wannafly Winter Camp Day 1

    B. 密码学 题意: 告诉你关于字符串加密的方法,然后给你一些加密操作和加密后的字符串,让你求原来的串 思路: 知道被加密后的串与加密字符可以向前推出被加密之前的串,不断向前模拟即可 #include ...

  6. [bzoj2115] [洛谷P4151] [Wc2011] Xor

    Description Input 第一行包含两个整数N和 M, 表示该无向图中点的数目与边的数目. 接下来M 行描述 M 条边,每行三个整数Si,Ti ,Di,表示 Si 与Ti之间存在 一条权值为 ...

  7. ElEmentUI选择器弹出框定位错乱问题解决(弹出框出现在左上角)

    这个是原问题,我之前是没问题的,后来的突然出现了这个问题,查了好多没找到,后来看文档才发现的.通过这个问题,说明看文档的重要性,嘻嘻 解决办法是在选择器里插入一个 :popper-append-to- ...

  8. java小心机(3)| 浅析finalize()

    每天进步一丢丢,连接梦与想 如果你停止就是谷底,如果你还在努力就是上坡 系列文章 java"小心机"(1)[资源彩蛋!] java小心机(2)| 重载和构造器的小细节 预备知识 J ...

  9. Docker 安装 Elasticsearch+kibana

    1 下载镜像 docker pull elasticsearch:7.4.1 docker pull kibana:7.4.1 拉取的镜像如下: 2 创建network 创建一个网络,名字任意取,使得 ...

  10. 批量解决win10图标上有两个蓝色箭头的方法

    双击“此电脑”,点击“C盘”,可以看到一个”用户“文件夹,双击”用户“, 选择现在正在使用的用户名,双击用户名,找到该文件夹下的”桌面“或”Desktop“点击“属性”, 在“常规”选项卡中的属于项中 ...