layer

layer 扩展皮肤

如果 layer 默认提供的配色并不符合您的项目,您还可以自定义您所需要的弹出层风格

layer 首页 文档手册

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 来加载样式。