为了不忘记把它记下来

估计只有我自已能看的懂，呵呵。

8.2.二维码模块
此插件来源于 qrcodejs，使用方式：https://github.com/davidshimjs/qrcodejs

<div id="xxx"></div>
<script>
    layui.use(['QRCode'], function () {
        var $ = layui.jquery;
        var QRCode = layui.QRCode;

        // 二维码
        var demoQrCode = new QRCode(document.getElementById("xxx"), {
            text: "Hello Word!",
            width: 101,  // 宽度
            height: 101,  // 高度
            colorDark: "#000000",  // 颜色
            colorLight: "#ffffff",  // 背景颜色
            correctLevel: QRCode.CorrectLevel.H
        });

        // 更换内容
        demoQrCode.makeCode("Easyweb");

    });
</script>



8.4.剪贴板
此插件来源于 clipboard.js，使用方式：https://zenorocha.github.io/clipboard.js

<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<button id="btnCopy" data-clipboard-target="#foo">复制</button>
<script>
    layui.use(['ClipboardJS'], function () {
        var ClipboardJS = layui.ClipboardJS;

        var clipboard = new ClipboardJS('#btnCopy');
        clipboard.on('success', function(e) {
            e.clearSelection();
        });

        clipboard.on('error', function(e) {
            console.error('Action:', e.action);
        });

    });
</script>
按钮通过data-clipboard-target绑定的不一定是input，div也可以，也不一定用id，jquery选择器都可以。



8.5.视频播放器
视频播放器使用的是西瓜视频开源的xgplayer，使用方式： http://h5player.bytedance.com/

<div id="demoVideo"></div>

<script>
    layui.use(['Player'], function () {
        var Player = layui.Player;

        // 视频播放器
        var player = new Player({
            id: "demoVideo",
            url: "//s1.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4",  // 视频地址
            poster: "https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png",  // 封面
            fluid: true,  // 宽度100%
            playbackRate: [0.5, 1, 1.5, 2],  // 开启倍速播放
            pip: true,  // 开启画中画
            lang: 'zh-cn'
        });

        // 开启弹幕
        var dmStyle = {
            color: '#ffcd08', fontSize: '20px'
        };
        var player = new Player({
            id: "demoVideo2",
            url: "http://demo.htmleaf.com/1704/201704071459/video/2.mp4",  // 视频地址
            autoplay: false,
            fluid: true,  // 宽度100%
            lang: 'zh-cn',
            danmu: {
                comments: [
                    {id: '1', start: 0, txt: '空降', color: true, style: dmStyle, duration: 15000},
                    {id: '2', start: 1500, txt: '前方高能', color: true, style: dmStyle, duration: 15000},
                    {id: '3', start: 3500, txt: '弹幕护体', color: true, style: dmStyle, duration: 15000},
                ]
            }
        });

    });
</script>



9.2.自定义扩展模块
集成社区模块：

把下载好的模块放在/assets/module/下面，如果模块是一个js，不用做任何配置就可以使用了， 例如admin.js、index.js，如果模块是一个文件夹，还需要在common.js中配置模块的具体位置，如notice/notice。

自定义扩展模块：

如果需要自己写一个扩展模块，请前往阅读Layui定义模块的开发文档， 或者参考admin.js、index.js等模块。

集成jquery插件：

jquery作为老牌框架，有着丰富的第三方插件，把插件放入libs下，页面中先引入jquery，再引入插件，即可使用。 当然更友好的集成方式是把它改造成layui扩展模块，改造方式请参考layui 封装第三方组件。