Vue使用Clipboard.JS在h5页面中复制内容实例详解
(编辑:jimmy 日期: 2024/11/27 浏览:3 次 )
安装clipboard.js
github路径:https://github.com/zenorocha/clipboard.js
安装:
npm install clipboard --save
引入clipboard.js
import ClipboardJS from "clipboard";
或
<script src="/UploadFiles/2021-04-02/clipboard.min.js">使用:
剪切
<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="/UploadFiles/2021-04-02/clipboard.min.js">复制
<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(); });以上就是本次介绍的全部知识点内容,感谢大家对的支持。
下一篇:layui中的switch开关实现方法