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

     
  • 相关阅读:
    用到了yii2 hasMany() 方法,一对多关联
    jquery操作select标签change事件
    Yii2如何批量添加数据
    [bzoj1497][NOI2006]最大获利
    [bzoj]2962序列操作
    洛谷 P1350 车的放置
    洛谷 P1142 轰炸
    初级数论练习题
    洛谷 P3795 钟氏映射
    洛谷 2953 [USACO09OPEN]牛的数字游戏Cow Digit Game
  • 原文地址:https://www.cnblogs.com/Christeen/p/6874297.html
Copyright © 2020-2023  润新知