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

    【第一步】：命名文件夹
    在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皮肤-Yourskin');

    【最后一步】：应用
    现在你已经成功制作了一个皮肤了，如果你觉得它很美，你可以放入项目中去使用。