layer.open怎么传参数到子页面呢？不知道的小伙伴来看看小编今天的分享吧!
父页面传参给子页面(iframe页面)：
代码：
var index = layer.open({
title: '编辑',
type: 1,
shade: 0.2,
maxmin: true,
shadeClose: true,
area: [openWH[0] + 'px', openWH[1] + 'px'],
offset: [openWH[2] + 'px', openWH[3] + 'px'],
content: content, //这里是iframe页面的路由
success: function(layero, index){
var body=layer.getChildFrame('body',index);
var fileId = body.contents().find("#fileId");
$(fileId.selector).val(data.id);
}
});
子页面
<input type="hidden" name="id" id="fileId" placeholder="文件id" value=""
class="layui-input">
以上就是小编今天的分享了，希望可以帮助到大家。
详解 css 新特性 级联层@layer
介绍
@layer又名级联层，是 css2022 推出的新特性，目的是用来解决样式被覆盖，使用混乱的场景。
同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制，让 CSS 样式按照我们定义好的级联顺序展示，起到控制不同样式间的优先级的作用。
语法@layer a { div { background-color: red; }}创建了一个名字为a的级联层
我们也可以先定义级联层，之后再补充规则
@layer a,b,c;@layer a { div { background-color: red; }}@layer b { #box { background-color: blue; }}@layer c { div { background-color: green; }}
级联层的执行顺序将会按照定义的时候的先后顺序执行，所以，最终会执行 c 的级联层，得到一个蓝色的 div，即使级联层 b 是一个 id 选择器，仍然是最后一个级联层会生效
此时的级联层的顺序是@layer c > @layer b > @layer a
由此，我们可以大致得出一个结论：可以利用级联层将 css 进行模块的划分，按照先后顺序，更好的控制样式。
怎么引用引用的方式分为三种
直接创建一个 @layer 规则，其中包含作用于该层内部的 CSS 规则：
@import(index.css) layer(a);- 命名方式创建带命名的级联层，但不指定任何样式。样式随后可在 CSS 内任意位置添加@layer a;@layer a { div { color: red; }}非 @layer 包裹层与 @layer 层内样式优先级
没有被 @layer 包裹的样式和被 @layer 包裹的样式相比，那个优先级更高呢。
@layer A { div { background: red; }}@layer B { div { background: orange; }}@layer C { div { background: yellow; }}div { background: green;}
最终为绿色，这里会有一个非常重要的结论，非 @layer 包裹的样式，拥有比 @layer 包裹样式更高的优先级，因此，上述规则的排序是：未被 @layer 包裹的样式 > @layer C > @layer B > @layer A
级联层的规则级联层可以像上面的案例一样，简单命名，也可以设置匿名使用方式和嵌套使用方式 ### 匿名 允许创建一个不带名字的 @layer：
@layer { p { margin: 1rem; }}
这里，创建了一个匿名层。匿名层的两个重要特性：
@layer a,b,c;@layer { div { background: orange; }}@layer a { div { background-color: red; }}@layer b { #box { background-color: green; }}@layer c { div { background-color: blue; }}
最终展示匿名层的样式，此时的优先级的顺序为 匿名层@layer > @layer c > @layer b > @layer a > @layer a
嵌套层嵌套层的意思就是在 @layer 内部，我们可以再嵌套使用 @layer 级联层
@layer A { @layer B { ...; }}
上述代码等价于
@layer A.B { ...;}
那么这里的样式谁优先呢
@layer A { div { background: blue; } @layer B { div { background: red; } }}
最终为蓝色, 对于单个 @layer 内的嵌套关系，样式优先级为 @layer A > @layer A.B
!important 对 CSS @layer 的影响div { background: black;}@layer A { div { background: blue !important; }}@layer C { div { background: green; }}
最终会展示!important的样式，也就是说!important的规则更加优先。
那么，接下来这个场景呢?
div { background: black !important;}@layer A { div { background: blue !important; }}@layer C { div { background: green; }}
在上述代码中，非级联层和级联层 A 中各添加了一个!important, 结果为蓝色。
这是一个非常重要的特性，在比较正常（非 !important）规则时，越是级联（排序较后的 @layer 规则），优先级越低；反之，在比较 !important 规则时，越是级联靠后的（排序较后的 @layer 规则），优先级越高。
!important在比较的时候遵循下面的规则
