zoukankan      html  css  js  c++  java
  • clipboard复制剪贴板功能,以及用sea.js时报错---Uncaught ReferenceError: Clipboard is not defined

    写在前面的话:

      实现的效果: 点击一个区域,将另一个区域的内容进行复制。


    clipboard 的用法,有些人已经写得很详细啦~ 感谢  白树 的  【原】js实现复制到剪贴板功能,兼容所有浏览器   这篇文章!!!

    用法我就在这里贴一下clipboard.js 的用法吧:

    1.下载js:  官方文档,还有下载资源 以及使用方法可参照:https://clipboardjs.com/

    2.其实上面的不是重点,-_-!!! 重点是,我在使用sea.js的时候,报错:Uncaught ReferenceError: Clipboard is not defined

    在sea.js 中的使用方法:

    <p class="code-num" id="js-code-num">12345678</p>
    <p class="copy" id="js-copy" data-clipboard-target="#js-code-num">复制</p>
    
    <div class="clip-toast js-clip-toast hidden"></div>

    点击“复制”,页面上会提示“已复制”,“12345678”就会被复制到剪贴板了,可以粘贴了~

    <script src="./js/seajs/sea.js"></script>
    <script src="./js/modules-config.js"></script>
    <script>
    seajs.use(['jquery', 'clipboard'], function($, Clipboard){
    
        // 剪贴板功能
        var clipboard = new Clipboard('#js-copy');
        clipboard.on('success', function(e) {
            // console.info('Action:', e.action);
            // console.info('Text:', e.text);
            // console.info('Trigger:', e.trigger);
    
            $('.js-clip-toast').show().html('已复制').delay(1000).hide(0);
            e.clearSelection();
        });
    
        clipboard.on('error', function(e) {
            // console.error('Action:', e.action);
            // console.error('Trigger:', e.trigger);
            $('.js-clip-toast').show().html('复制失败!').delay(1000).hide(0);
        });
    });
    </script>

    坑在哪里?使用时传参,就是上边的  seajs.use(['jquery', 'clipboard'],function($,Clipboard){  //你的代码  })

    Clipboard这个参数一定要写,不然就会报错:Uncaught ReferenceError: Clipboard is not defined

    可怜我找了辣么久的错误…………当然,如果你的代码还有问题的话,可以在  clipboard.min.js 外面包上一层:

    define(function (require, exports, module) {
            //clipboard.min.js 的代码
    })

    虽然我不知道为啥是这样包一层(之前未曾用过模块块加载js^^),因为我看到其他的被加载的Js是这样包了一层,所以照葫芦画瓢 -_-^^

     
  • 相关阅读:
    docker知识3---镜像
    docker知识2---docker简介
    docker知识1---容器背景
    docker故障排查
    linux故障处理--ssh故障
    sqlalchemy的一行代码更新数据库
    Python内置函数和高阶函数(map,filter,reduce, sorted,enumerate, zip,单行条件语句 )
    Mysql略复杂命令总结
    pip的使用
    Linux的基础命令
  • 原文地址:https://www.cnblogs.com/Christeen/p/6874297.html
Copyright © 2011-2022 走看看