安装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();
});
以上就是本次介绍的全部知识点内容，感谢大家对的支持。
© 版权声明
THE END
暂无评论内容