layui使用实践总结

小灰灰 2022-12-11 13:34 185阅读 0赞

## 【1】弹出层子元素获取父页面dom元素值 ##

如下所示，点击添加关系数据会弹出子页面，在子页面需要获取父页面的8。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70_pic_center]  
假设8对应dom id为orderId，子页面代码示例如下：

var text = parent.window.$('#orderId').val();
    console.log("获取的父页面orderID："+text);

### 子页面直接获取父页面的变量 ###

父页面设置变量如下：

var fieldType1=[1];//单选数量

那么子页面可以直接使用如下代码获取：

parent.fieldType1

## 【2】日期时间控件点击闪没 ##

有时页面高度不够，会出现点击控件闪现一下就没有了的情况，可以修改代码如下：

laydate.render({
        elem: '#deadTime',
        type: 'datetime',
        trigger: 'click' //主要是这里哦
    });

## 【3】检测select的change事件 ##

页面代码如下：

JS如下：

form.on('select(type)', function(data){ 
       console.log(data)
       if(data.value==2){ 
           $("#companyDiv").hide();
       }
       if(data.value==3){ 
           $("#companyDiv").show();
       }
        form.render('select');//select是固定写法 不是选择器
    });

## 【4】行工具头条件显示 ##

## 【5】自定义校验 ##

//自定义验证规则
    form.verify({ 
        email: [/(.+)@.+\..+$/, '请输入正确的邮箱'],
        score: function (value) { 
            var regexStr=/\d*\.\d*$/;
            var regex = new RegExp(regexStr);
            if(value>100||value<10||regex.test(value)){ 
                return "请输入合法值！";
            }
        }
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/80d8627929f6467b99cd35e370bf4dc7.png