2020年10月

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

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 封装第三方组件。

通常情况下url只能传递字符串参数,无法传递对象。现在有了解决办法:

var objDemo = {
      name: "liziyu",
      age: 12,
      content: "abc"
    };
    var jsonObj = JSON.stringify(objDemo);
    jsonObj = encodeURI(jsonObj);
    let url = "http://localhost:8080/demo?id=" + jsonObj;
    //console.log(url);
    jsonObj = decodeURI(jsonObj);
    jsonObj = JSON.parse(jsonObj);
    //console.log(jsonObj);
}

说明:
JSON.stringify(objDemo)将对象转换为 JSON 字符串。
encodeURI()函数可把字符串作为 URI 进行编码。
decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
JSON.parse()方法用于将一个 JSON 字符串转换为对象。

注意:
1、被传递的对象内容不能太大(比如正文内容)否则会报错如下:

Request-URI Too Long
The requested URL's length exceeds the capacity limit for this server.

2、通常情况下如果是两个独立页面间传递的话,都是传到控制器,然后控制器通过模板变量赋值给模板,做页面渲染。

本文转自:https://blog.csdn.net/baidu_39812199/article/details/104492133

$.ajax({
          //请求数据格式见:https://www.layui.com/doc/modules/tree.html
          url: "{:url('content.Category/menu')}",
          type: 'GET',
          success: function (dataList) {
           //点击节点新窗口跳转
           tree.render({
           elem: '#categoryMenuTree',
           data: dataList,
           isJump: true,  //link 为参数匹配
           //利用回调 使url在name为articleIframe的iframe中显示
           click: function (layero, index) {
           //console.log(layero.data.href);
           myhref = {"ew-href" : layero.data.href};
           $(".layui-tree-txt").attr(myhref).removeAttr("href");
        }
    });
    }
});

//利用回调 使urlnamearticleIframeiframe中显示

click: function (layero, index) {
//console.log(layero.data.href);
myhref = {"ew-href" : layero.data.href};
$(".layui-tree-txt").attr(myhref).removeAttr("href"); 
}

重点我记的是这里

myhref = {"ew-href" : layero.data.href};
$(".layui-tree-txt").attr(myhref).removeAttr("href");
动态修改表单属性并赋值