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");
        }
    });
    }
});

//利用回调 使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"); 
}

重点我记的是这里

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

废话不多说，上代码：
html之iframe：

<iframe name="menuFrame" id="menuFrame" onload="reinitIframe()" style="overflow:visible;"
       scrolling="no" height="100%" width="100%">
</iframe>

javascript：

    window.onresize = function () {
        reinitIframe();
    }
    function reinitIframe(){
        var iframe = document.getElementById("menuFrame");
        try{
            var bHeight = iframe.contentWindow.document.body.scrollHeight;
            var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            var height = Math.min(bHeight, dHeight);
            iframe.height = height+50;
            // console.log(iframe.height);
        }catch (ex){}
    }
    // 定时触发
    window.setInterval("reinitIframe()", 200);

关键在这里window.setInterval("reinitIframe()", 200);

本文转自：https://blog.csdn.net/qq_28333105/article/details/91449921

JQuery：https://jquery.cuishifeng.cn/
xm-select：https://maplemei.gitee.io/xm-select/#/basic/use
treetable-lay：https://gitee.com/whvse/treetable-lay/wikis/pages
layui-soul-table：https://saodiyang.gitee.io/layui-soul-table/
OPTable：https://hbangmao.gitee.io/OPTable/layui-op-table/demo/index.html
Dtree：http://www.wisdomelon.com/DTreeHelper/
eleTree：https://layuiextend.hsianglee.cn/eletree/

layui 第三方组件平台：https://fly.layui.com/extend/

错误提示

Access to XMLHttpRequest at 'http://localhost:8080/api/user/login' from origin 'http://localhost

解决方案

1、HTML部分

ajax 请求加入 contentType: "application/x-www-form-urlencoded"
请求如下：

$.ajax({
            type: "post",
            url: 'url',
            contentType: "application/x-www-form-urlencoded",
            data: {"gameCode": 106, type: "2",version:1,uid:1},
            dataType: "json",
            success: function (data,status) {
                console.log(data);
            }
        });

2、PHP部分

PHP 文件中加入请求头部 header ('Access-Control-Allow-Origin: *') ;

<?php 
    header('Access-Control-Allow-Origin: *');
    $arr = [
        array('id'=>1,'title'=>'one1'),
        array('id'=>2,'title'=>'one2'),
        array('id'=>3,'title'=>'one3'),
        array('id'=>4,'title'=>'one4'),
    ];
    echo json_encode($arr);
 ?>

3、请求数据

微信截图_20201011010842.png

文章转自：https://learnku.com/articles/32041

  1. 1
  2. 2