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

2019-11-19 10:54:05

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：layui--js控制switch的切换方法

下一篇：layui中的switch开关实现方法