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