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. Appium自动化测试框架研究(2)——搭建IOS环境

    今天的文章讲iOS的Appium环境搭建. 对于iOS而言,只能在Mac笔记本上安装Appium,以及所需要的各种组件. 也许有人会问,能否在Windows系统上使用Appium测试iOS手机,这不就 ...

  2. Python工具类（二）—— 操作时间相关

    #!/usr/bin/env python # -*- coding: utf-8 -*- """ __title__ = '操作时间的工具类' "" ...

  3. scrapy在存储数据到json文件中时，中文变成为\u开头的字符串的处理方法

    在settings.py文件中添加 FEED_EXPORT_ENCODING = 'utf-8'

  4. Sigmoid非线性激活函数，FM调频，胆机，HDR的意义

    前几天家里买了个二手车子,较老,发现只有FM收音机,但音响效果不错,车子带蓝牙转FM,可以手机蓝牙播放音乐,但经过几次转换以及对FM的质疑,所以怀疑音质是否会剧烈下降,抱着试试的态度放了一个手机上的音 ...

  5. springboot 报错nested exception is java.lang.IllegalStateException: Failed to check the status of the service xxxService No provider available for the service

    spring: dubbo:#关闭所有服务的启动时检查:(没有提供者时报错) consumer: check: false timeout: 3000

  6. [bzoj2004] [洛谷P3204] [Hnoi2010] Bus 公交线路

    Description 小Z所在的城市有N个公交车站,排列在一条长(N-1)km的直线上,从左到右依次编号为1到N,相邻公交车站间的距 离均为1km. 作为公交车线路的规划者,小Z调查了市民的需求,决 ...

  7. Tomcat 9 与JDK 8 的安装与配置

    Tomcat 9的安装与配置 解压压缩包,我的解压路径是:D:\Program Files\Java 注意:这里tomcat压缩包不能解压到C盘,否则会因为C盘文件夹访问权限授权问题,没法解决后面出现 ...

  8. typescript 为什么使用 let呢

    为什么是使用let呢 因为已经厌烦了 int var 呵呵

  9. Shell 脚本学习总结

    自己根据目前学到的东西制作了一张思维导图

  10. Android教程2020 - RecyclerView响应点击

    本文介绍RecyclerView设置点击的方法.这里给出比较常见的使用方式. Android教程2020 - 系列总览 本文链接 前面我们已经知道如何用RecyclerView显示一列数据. 用户点击 ...