layui弹出层：皮肤扩展（文档解读）

layui弹出层：皮肤扩展（文档解读）

layui弹出层：样式自定义

• 官方文档：https://layer.layui.com/
  
  

---

皮肤扩展 · 官方教程：

• 官方文档：https://layer.layui.com/skin.html

教程如下：自定义皮肤说明

/* 自定义皮肤说明 */


layer 提供了强健的皮肤扩展属性，这意味着如果你对 layer 默认的样式不太满意，你还有更多的选择。
 
一：命名文件夹
在 layer 的 skin 目录建立一个文件夹，假设您将该文件夹命名为：yourskin
 
二：创建样式依赖文件
在 yourskin 文件夹下建立一个单独的样式文件，务必命名为：style.css。并且你可能用到的图片也要存放在该文件夹下
  
三：书写样式
/*  
通过 body 前缀，是为了确保你皮肤的优先级
你可以通过调试工具重置更多样式 
*/
body .layer-ext-yourskin .layui-layer-title{}
body .layui-ext-yourskin .layui-layer-btn{}
body .layui-ext-yourskin .layui-layer-btn a{}
 
四：调试
通过全局配置看看你的皮肤定义的如何：
layer.config({
  extend: 'myskin/style.css', //加载您的扩展样式
  skin: 'layer-ext-yourskin'
});
layer.alert('layer 新皮肤');
 
五：应用
现在你已经成功制作了一个皮肤了，如果你觉得它很美，你可以放入项目中去使用。
 
1. 全局配置
见第四步
 
2. 局部使用
layer.config({
  extend: 'myskin/style.css' //同样需要先加载新皮肤
});
//单个使用
layer.open({
  skin: 'layer-ext-myskin' //只对该层采用 myskin皮肤
});
 
//也就是说，无论你全局还是局部，都要通过 layer.config 的 extend 来加载样式。
  

---

以上就是关于“ layui弹出层：皮肤扩展（文档解读） ”的全部内容。