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>
- 使用：
- 剪切
<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页面中复制内容的更多相关文章
- 前端视频直播技术总结及video.js在h5页面中的应用
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...
- H5页面中唤起native app
现在各类app,分享出去的H5页面中,一般都会带着一个立即打开的按钮,如果本地安装了app,那么就直接唤起本地的app,如果没有安装,则跳转到下载.这是一个很正常的推广和导流量的策略,最近产品经理就提 ...
- 使用HTML5的JS选择器操作页面中的元素
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...
- 如何使用Web3.js API 在页面中进行转账
本文介绍如何使用Web3.js API 在页面中进行转账,是我翻译的文档Web3.js 0.2x 中文版 及 区块链全栈-以太坊DAPP开发实战 中Demo的文章说明. 写在前面 阅读本文前,你应该对 ...
- 纯css、js 的H5页面对接echarts
做项目时,会遇到一些零碎的技术点.记录下来以防忘记 需求:做可视化界面,但是需要兼容ie8,需要用纯css.js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip). 实现方 ...
- H5页面中判断是安卓手机还是ios手机的方法；APP页面中嵌套的H5跳转到APP其他页面的方法。
(一).在H5页面中,可以直接利用如下的方法来进行判断是安卓还是ios. var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu ...
- Android : 如何在WebView显示的页面中查找内容
Android : 如何在WebView显示的页面中查找内容 Author : Aoyousatuo Zhao http://blog.sina.com.cn/aoyousatuo WebView是A ...
- vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟，连续点击无反应的问题
异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...
- js在新页面中返回到上一页浏览的历史位置
在微信浏览器中浏览页面时,在当前页面中当我们将页面往下滚动到某一个位置时,可能我们就会点击某个链接而页面跳转到了另外一个页面,而当我们又返回到上一个页面时我们会发现那个页面还停留在我们之前浏览的位置, ...
随机推荐
- 高校表白app使用体验
在本次软件工程专业交流会中,有幸了解了很多学长学姐研究并且开发的软件,使我受益匪浅.其中最让我记忆犹新的还属一款名为高校表白app的软件.首先这款app的主要功能是为我们提供一个委婉的告白平台,我们可 ...
- request session
例子 url = 'http://beanhome.com/user/login' header = { "Content-Type": 'application/json', & ...
- 做.net的成为 微软mvp 是一个目标吧。
mvp 的评比 需要好多好多 绩效考核 比如博客排名,比如发表的文章数.
- Kindle Unlimited 上线的最热书单
Kindle 也给出了一份,到现在为止,在 Kindle Unlimited 上线的最热书单: 1.岛上书店2.一个人的朝圣3.自控力4.嫌疑人 X 的献身5.沉默的大多数(王小波文集)6.跟任何人都 ...
- Python3之json文件操作
json函数 使用json函数之前,首先需要导入json模块,import json 1).json.dumps()函数 该函数是将 Python 对象编码成 JSON 字符串,例如: import ...
- Scala 学习（7）之「trait (1) 」
作为接口使用 在 triat 中可以定义抽象方法,就与抽象类中的抽象方法一样,只要不给出方法的具体实现即可 类可以使用 extends 关键字继承 trait,注意,这里不是 implement,而是 ...
- 对于传统scnece-classfication的分析
BoW模型最初应用于文本处理领域,用来对文档进行分类和识别.BoW 模型因为其简单有效的优点而得到了广泛的应用.其基本原理可以用以下例子来给予描述.给定两句简单的文档: 文档 1:“我喜欢跳舞,小明也 ...
- os模块常用方法笔记
os模块是程序和系统文件之间的交互接口,可以实现对文件的创建.删除等功能,以下对os模块的功能做一个笔记,方便以后学习和查找. import os os.getcwd() #获取当前工作目录,即当前p ...
- ios--->使用@synchronized和dispatch_once实现单例
使用dispatch_once实现单例 单例实现的两种模式 @implementation XXClass //@synchronized来实现 + (id)sharedInstance { stat ...
- Selenium(一)：元素定位
一.Selenium 8种定位方式 baidu.html <form id="form" name="f" action="/s" c ...