1. layui中layer的简介
Layer是一款强大的web提示框组件，它是由layui团队开发，提供了丰富的配置选项和交互动画效果，广泛应用于前端开发中。
在Layui中，我们可以通过调用Layer组件来展示各种各样的弹出层，例如：提示框、询问框、加载层等，同时还可以自定义弹出层的样式和动作。
2. 使用Layer组件自定义宽高
当我们使用Layer组件进行弹出层的展示时，它默认会根据弹出内容的大小自动为弹出层设置宽高。
如果我们需要手动地设置弹出层的宽高，我们可以通过配置选项来完成。
2.1 在Layer中配置宽高
在需要弹出层的页面中，我们首先需要引入Layer组件的JS文件：
<script src="layui/layui.js"></script>
引入Layer组件的JS文件之后，我们就可以在需要的位置调用Layer组件的弹出层方法了。在调用方法时，我们可以通过一个参数对象来设置弹出层的配置选项。
下面是一个自定义宽度、高度和自动关闭时间的弹出层示例：
<script>
layui.use('layer', function(){
var layer = layui.layer;
layer.open({
title: '自定义宽高的提示框',
type: 1,
area: ['400px', '200px'], //自定义宽度和高度
content: '这是内容',
time: 2000 //2秒后自动关闭
});
});
</script>
在这个示例中，我们通过配置参数对象中的area属性来设置弹出层的宽度和高度，这个属性的值是一个数组，数组的第一个值表示宽度，第二个值表示高度。
因此在上述示例中，我们设置了弹出层的宽度为400px，高度为200px。
类似地，如果我们需要设置弹出层的宽度和高度比例，可以在area属性中使用字符串的方式进行设置。下面是一个弹出层宽高比例为3:2的示例：
<script>
layui.use('layer', function(){
var layer = layui.layer;
layer.open({
title: '宽高比例为3:2的提示框',
type: 1,
area: '50%', //宽高比例，设置宽度为屏幕的50%
content: '这是内容',
time: 2000 //2秒后自动关闭
});
});
</script>
在上述示例中，我们通过将area属性的值设置为'50%'，来让弹出层的宽度为屏幕的50%。这时候，弹出层的高度会自动按比例适配。
2.2 透明度和阴影的自定义设置
除了可以设置弹出层的宽高之外，我们还可以通过一些配置选项来个性化地定制弹出层的透明度和阴影效果。
我们可以使用shade属性来设置遮罩层的透明度。下面是一个弹出层配有遮罩层的示例：
<script>
layui.use('layer', function(){
var layer = layui.layer;
layer.open({
title: '透明度为0.6的提示框',
type: 1,
area: ['400px', '200px'],
shade: 0.6, //遮罩层透明度
content: '这是内容',
time: 2000
});
});
</script>
在上述示例中，我们将shade属性设置为0.6，表示遮罩层的透明度为60%。
在弹出层中，我们还可以通过offset属性来调整弹出层的位置。
下面是一个左上角偏移60px，top和left偏移50%的示例：
<script>
layui.use('layer', function(){
var layer = layui.layer;
layer.open({
title: '自定义偏移的提示框',
type: 1,
area: ['400px', '200px'],
offset: ['60px', '50%'], //偏移量
content: '这是内容',
time: 2000
});
});
</script>
在上述示例中，我们通过offset属性来设置弹出层的位置偏移。其中，'60px'表示弹出层向下偏移60px，'50%'表示弹出层向右偏移50%。
3. 总结
在Layui中，我们可以通过配置选项来自定义Layer组件的宽高、透明度、阴影效果、位置等属性，从而满足不同弹出层展示的需求。
同时，在使用Layer组件设置属性时，我们需要注意参数类型和正确的设置格式，这样才能完美地定制我们需要的弹出层效果。
Layui还提供了其他丰富的组件和模块，可以满足各种开发需求，让前端开发更加容易、高效。