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在新页面中返回到上一页浏览的历史位置
在微信浏览器中浏览页面时,在当前页面中当我们将页面往下滚动到某一个位置时,可能我们就会点击某个链接而页面跳转到了另外一个页面,而当我们又返回到上一个页面时我们会发现那个页面还停留在我们之前浏览的位置, ...
随机推荐
- MySQL查询基础
MySQL查询 DQL(Data Query Language ) 1.排序查询 # 语法: select 字段 from 表名 order by 字段1 [降序/升序],字段2 [降序/升序],.. ...
- Oracle GoldenGate to Confluent with Kafka Connect
Confluent is a company founded by the team that built Apache Kafka. It builds a platform around Kafk ...
- Error connecting to the Service Control Manager: 拒绝访问 Mongodb问题-解决
原文地址:https://blog.csdn.net/carrot5032/article/details/74742888 发现在mongodb.log里出现 2017-07-07T17:01:5 ...
- 学习 lind api 十月 第5弹
继续 四弹里的 自定义的api response message 但是 那上面的 那些值得也是包含
- NOI2.5 8783:单词接龙
描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的"龙"(每个单词都最多在"龙"中 ...
- 解决luajit ffi cdata引用cdata的问题
使用luajit ffi会遇到cdata引用cdata的情况.官方说明是必须手动保存所有cdata的引用,否则会被gc掉. ffi.cdef[[ struct A { int id; }; struc ...
- k8s概述
k8s概述 概述 Kubernetes 使你在数以千计的电脑节点上运行软件时就像所有这些节点是单个大节点一样.它将底层基础设施抽象,这样做同时简化了应用的开发.部署, 以及对开发和运维团队的管理. K ...
- 小程序--->scroll-view组件不能触发相应滚动事件
小程序scroll-view组件不能触发相应滚动事件 在制作加载更多时会发现不能触发相应事件,一般情况下首先要查看两个必要的属性scroll-view的高度是否设置,第二就是scroll-view的滚 ...
- Docker基础内容之资源限制
内存限制 --memory:内存限定,格式是数字加单位,单位可以为 B.K.M.G.最小为 4M. --memory-swap:交换分区大小限定 CPU限制 --cpus:表示分配给容器可用的cpu资 ...
- spring mvc 框架运行机制 + 数据绑定原理
spring mvc 运行主要的组件: 1 前端控制器 (dispatchservlet) 相当于一个重要处理器,它用来调用其他功能模块来分工的效应一次请求,主要起调度的作用. 2. handler ...