Vue使用Clipboard.JS在h5页面中复制内容实例详解

2024-12-13 01:05:02

安装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();
   });

以上就是本次介绍的全部知识点内容，感谢大家对我们的支持。

Vue使用Clipboard.JS在h5页面中复制内容实例详解

安装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>
JS技巧多状态页面中的mock方案详解

目录引言技术选型业务逻辑改造 Eruda 插件 Mock 数据整理引言我们有时候会遇到一个业务页面存在很多个状态,甚至子状态,比如订单详情就是其中的典型,涉及从订单创建到订单结束,以及售后等流程.维护起来每个状态对应一份数据,虽然我们 QA 提供了数据构造平台,但构造一份对应状态的数据还是需要花费不少时间,而且串行流程一旦出错的话只能重新来一遍. 后期维护阶段也不容易构造对应状态的数据,导致排查页面问题比较耗时. 另外一个问题就是从头熟悉业务的话成本比较高,如果有一个直观的页面能够看到
Vue 中axios配置实例详解

1.GET 请求 //向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(function (respons
Java中Spring Boot+Socket实现与html页面的长连接实例详解

Spring Boot+Socket实现与html页面的长连接,客户端给服务器端发消息,服务器给客户端轮询发送消息,附案例源码功能介绍客户端给所有在线用户发送消息客户端给指定在线用户发送消息服务器给客户端发送消息(轮询方式) 注意:socket只是实现一些简单的功能,具体的还需根据自身情况,代码稍微改造下项目搭建项目结构图 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xml
JS数组索引检测中的数据类型问题详解

之前在写微信小程序项目时,里面有一个"城市选择"的功能,笔者用的是 <picker-view> 组件,这个组件比较特别,因为它的 value 属性规定是数组格式的.比如: value="[1]". 因为当时对JS变量类型转换的不了解,笔者在代码中写下了这样的几行判断:(这是严谨的) let val_one=typeof this.data.pIndex=="number"?[this.daya.pIndex]:this.data.
React中编写CSS实例详解

目录正文内联样式普通的CSS css modules css in js 样式组件引入外部变量默认值引入全局样式 provider 样式继承动态添加class 正文目前,前端最流行的开发方式是组件化,而CSS的设计本身就不是为组件化而生的,所以在目前组件化的框架中都在需要一种合适的CSS解决方案在组件化开发环境下的CSS,应该满足如下需求: 可以编写局部css: css具备自己的具备作用域,不会随意污染其他组件内的元素可以编写动态的css: 可以获取当前组件的一些状态,根据状
Angularjs中数据绑定的实例详解

Angularjs中数据绑定的实例详解这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果 <html ng-app> <head> <title>angularjs-include</title> <script type="text/javascript" src="js/angular/angular.min.js"></script> </head
Linux使用Node.js建立访问静态网页的服务实例详解

Linux使用Node.js建立访问静态网页的服务实例详解一.安装node.js运行所需要的环境,:http://www.jb51.net/article/79536.htm 二.创建node目录(/node/www),并在目录下创建node.js服务文件server.js var http = require('http'); var fs = require('fs');//引入文件读取模块 var documentRoot = '/node/www';//需要访问的文件的存放目录 var
javascript 中的继承实例详解

javascript 中的继承实例详解阅读目录原型链继承借用构造函数组合继承寄生组合式继承后记继承有两种方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法. 由于函数没有签名,在ECMAScript中无法实现接口继承.ECMAScript只支持实现继承,而且实现继承主要依靠原型链来实现. 下面介绍几种js的继承: 原型链继承原型链继承实现的本质是重写原型对象,代之以一个新类型的实例.代码如下: function SuperType() { this.pr
python 中xpath爬虫实例详解

案例一: 某套图网站,套图以封面形式展现在页面,需要依次点击套图,点击广告盘链接,最后到达百度网盘展示页面. 这一过程通过爬虫来实现,收集百度网盘地址和提取码,采用xpath爬虫技术 1.首先分析图片列表页,该页按照更新先后顺序暂时套图封面,查看HTML结构.每一组"li"对应一组套图.属性href后面即为套图的内页地址(即广告盘链接页).所以,我们先得获取列表页内所有的内页地址(即广告盘链接页) 代码如下: import requests 倒入requests库 from lxml

Vue使用Clipboard.JS在h5页面中复制内容实例详解

相关推荐

随机推荐