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是这样包了一层,所以照葫芦画瓢 -_-^^

 

 

posted @ 2017-05-18 17:00  Chrisreen  阅读(6322)  评论(0编辑  收藏  举报