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. Linux内存管理解析(一) : 分段与分页机制

    背景 : 在此文章里会从分页分段机制去解析Linux内存管理系统如何工作的,由于Linux内存管理过于复杂而本人能力有限.会尽量将自己总结归纳的部分写清晰. 从实模式到保护模式的寻址方式的不同 : 1 ...

  2. Java中的循环语句

    1.1 while 循环语句 while 语句也称为条件判断语句. 循环方式 : 利用一个条件来控制是否要反复执行这个语句. 语法 : while(条件表达式){ 执行语句 } 当条件表达式的返回值为 ...

  3. 我的ubuntu源18和16

    16阿里云的 deb cdrom:[Ubuntu 16.04 LTS _Xenial Xerus_ - Release amd64 (20160420.1)]/ xenial main restric ...

  4. 创建dynamics CRM client-side (三) - Execution Context

    Execution Context 在代码执行的时候定义了event  context. 当form或者grid发生event时候传递了execution context. 可以在event hand ...

  5. C++从array数组向vector向量复制元素的两种方式

    #include <iostream> #include <vector> using namespace std; int main() { const int arr_si ...

  6. 大数据之Kafka史上最详细原理总结

    Kafka Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就是可以实 ...

  7. 虚拟机 ubuntu系统忘记密码如何进入

    重启 虚拟机 按住shift键 会出现下面的界面 按住‘e’进入下面的界面往下翻 更改红框勾到的字符串为:  rw init=/bin/bash 然后按F10进行引导 然后输入 :”passwd”  ...

  8. vue2.x中子组件修改父组件通过pops传递过来的值

    首先,父组件向子组件传值 这里面主要是在传值的时候,加上.sync 然后子组件通过 $emit 修改 如此即可完成对父组件的数据操作

  9. Topics类型配置

    配置项 备注 segment.bytes 分段文件大小,最大2GB segment.ms 强制新建段文件间隔阀值时间 segment.jitter.ms 段文件抖动时间 segment.index.b ...

  10. Codeforces Round #618 (Div. 2)

    题库链接 https://codeforces.ml/contest/1300 A. Non-zero 一个数组,每次操作可以给某个数加1,让这个数组的积和和不为0的最小操作数 显然如果有0的话,必须 ...