clipboard使用Require自动复制「建议收藏」

全栈程序员站长

发布于 2022-09-14 09:50:28

5660

发布于 2022-09-14 09:50:28

大家好，又见面了，我是你们的朋友全栈君。

由于没有使用过require，在微擎人人商城中遇到了一个需要自动复制内容的功能。头疼了一番。

var version = +new Date();
var myconfig = {
    path: '../addons/ewei_shopv2/static/js/',
    alias: {
        'jquery': 'dist/jquery/jquery-1.11.1.min',
        'jquery.form': 'dist/jquery/jquery.form',
        'jquery.gcjs': 'dist/jquery/jquery.gcjs',
        'jquery.validate': 'dist/jquery/jquery.validate.min',
        'jquery.nestable': 'dist/jquery/nestable/jquery.nestable',
        'jquery.qrcode':'../dist/jquery/jquery.qrcode.min',
        'bootstrap': 'dist/bootstrap/bootstrap.min',
        'bootstrap.suggest': 'dist/bootstrap/bootstrap-suggest.min',
        'bootbox': 'dist/bootbox/bootbox.min',
        'sweet': 'dist/sweetalert/sweetalert.min',
        'select2': 'dist/select2/select2.min',
        'jquery.confirm': 'dist/jquery/confirm/jquery-confirm',
        'jquery.contextMenu': 'dist/jquery/contextMenu/jquery.contextMenu',
        'switchery': 'dist/switchery/switchery',
        'echarts': 'dist/echarts/echarts-all',
        'echarts.min': 'dist/echarts/echarts.min',
        'toast': 'dist/jquery/toastr.min',
        'clipboard': 'dist/clipboard.min',
        'tpl': 'dist/tmodjs',
        'daterangepicker': 'dist/daterangepicker/daterangepicker',
        'datetimepicker': 'dist/datetimepicker/jquery.datetimepicker',
        'ueditor': 'dist/ueditor/ueditor.parse.min',
        'tooltipbox': 'dist/tooltipbox',
        'moment':'dist/moment/moment'

    },
    map: {
        'js': '.js?v=' + version,
        'css': '.css?v=' + version
    },
    css: {
        'jquery.confirm': 'dist/jquery/confirm/jquery-confirm',
        'sweet': 'dist/sweetalert/sweetalert',
        'select2': 'dist/select2/select2,dist/select2/select2-bootstrap',
        'jquery.nestable': 'dist/jquery/nestable/nestable',
        'jquery.contextMenu': 'dist/jquery/contextMenu/jquery.contextMenu',
        'daterangepicker': 'dist/daterangepicker/daterangepicker',
        'datetimepicker': 'dist/datetimepicker/jquery.datetimepicker',
        'ueditor': 'dist/ueditor/themes/default/css/ueditor.min',
        'switchery': 'dist/switchery/switchery'
    }
    , preload: ['jquery']

};

这个配置文件中已经定义了 cliboard，然后在使用的地方写入下面的代码：

require(['clipboard'], function(Clipboard){
        var koulingStr = '{$info[kouling]}';
        var videoElem = document.getElementById('video01');
       $("#btnPlayer").click(function(){
           if(videoElem.paused){
               videoElem.play();
               $("#btnPlayer img").hide();
           }else{
               videoElem.pause();
               $("#btnPlayer img").show();
           }

           var clipboard = new Clipboard('#kouling',{
               text:function(e){
                   return koulingStr;
               }
           });
           clipboard.on('success', function(e) {
               console.log('copy ok');
           });
       });
        //var clipboard = new Clipboard(document.getElementById('kouling'));


    })

这个clipboard是不能自动触发的，必须需要一个事件去触发他。这里用的是播放事件。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/159276.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

java