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. ancconda创建爬虫项目

    # 安装 conda env list conda create -n <envname> conda activate <envname> conda install scr ...

  2. Elasticsearch如何修改Mapping结构并实现业务零停机

    Elasticsearch 版本:6.4.0 一.疑问 在项目中后期,如果想调整索引的 Mapping 结构,比如将 ik_smart 修改为 ik_max_word 或者 增加分片数量 等,但 El ...

  3. C入门题目

    37. 反转一个3位整数 反转一个只有3位数的整数. 样例 样例 1: 输入: number = 123 输出: 321 样例 2: 输入: number = 900 输出: 9 注意事项 你可以假设 ...

  4. 「 深入浅出 」集合List

    第一篇文章 「 深入浅出 」java集合Collection和Map 主要讲了对集合的整体介绍,本篇文章主要讲List相对于Collection新增的一些重要功能以及其重要子类ArrayList.Li ...

  5. mysql -- collection一对多查询

    数据库表 角色组表: CREATE TABLE `sso_character_group` ( `group_id` ) NOT NULL AUTO_INCREMENT COMMENT '角色组ID' ...

  6. JDK源码之Byte类分析

    一 简介 byte,即字节,由8位的二进制组成.在Java中,byte类型的数据是8位带符号的二进制数,以二进制补码表示的整数 取值范围:默认值为0,最小值为-128(-2^7);最大值是127(2^ ...

  7. javaweb-codereview 学习记录-5

    1.关于URLConnection 应用程序利用url与远程通信的所有类的超类 jdk1.8中支持的协议包括以上这些,gopher在jdk8中取消了. java中默认对(http|https)做了一些 ...

  8. Tiny Linux -- tce-load

    Tiny Linux which has its own package manager called "tce-load". There's a list of packages ...

  9. Struts2与OGNL的联系

    1.Struts与OGNL的结合原理 (1)值栈: OGNL表达式要想运行就要准备一个OGNLContext对象,Struts2内部含有一个OGNLContext对象,名字叫做值栈. 值栈也由两部分组 ...

  10. HTTPS详解二：SSL / TLS 工作原理和详细握手过程

    HTTPS 详解一:附带最精美详尽的 HTTPS 原理图 HTTPS详解二:SSL / TLS 工作原理和详细握手过程 在上篇文章HTTPS详解一中,我已经为大家介绍了 HTTPS 的详细原理和通信流 ...