主页 > 教程合集 > 工具推荐 >

Vue使用Clipboard.JS在H5页面中复制内容

时间:2019-10-16 阅读:0

安装clipboard.js

github路径:https://github.com/zenorocha/clipboard.js

安装:

npm install clipboard --save

Vue使用Clipboard.JS在H5页面中复制内容

引入clipboard.js


import ClipboardJS from "clipboard";
 


<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
 

使用:

1.剪切


<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>
 

2.复制


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

本站所有资源均在Resource资源站有分享,你可以点击 >>> Resource 进入资源站自助提取,也可以扫描以下店铺二维码直接选购,自动极速发货

余斗微信二维码

扫描微信加好友咨询
了解更多

余斗淘宝店铺二维码

淘宝扫描二维码购买
自动发货

余斗余斗
  • 版权声明:原创文章由发表在工具推荐分类下,2019-10-16最后更新,转载注明出处。

相关推荐

返回顶部