layer - 简单好用的Web弹出层组件使用详解8（初始化全局配置）

2018-07-04 发布：hangge 阅读：2010

十四、初始化全局配置

layer.config(options) 方法可以实现初始化全局配置。我们可以使用它来配置一些诸如路径、加载的模块，甚至可以决定所有弹出框的默认参数。

1，修改所有弹出框的默认参数

比如下面我们统一修改了所有提示框的出场动画、以及皮肤样式。

layer.config({
  anim: 1, //默认出场动画改成从上掉落
  skin: 'layui-layer-molv' //默认皮肤改成绿色的
});

2，统一使用自定义皮肤

（1）我们可以通过全局配置，让所有弹出框都使用我们自定义的皮肤。皮肤样式可以直接写在页面上，或者其他 css 文件中。

<style>
  .demo-class .layui-layer-title{background:orange; color:#fff; border: none;}
  .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
  .demo-class .layui-layer-btn a{background:#333;}
  .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
</style>

<script>
  layer.config({
    skin: 'demo-class' //使用自定义皮肤
  });
</script>

（2）不过为了皮肤以后能复用，我们还是建议将皮肤放在独立的 css 文件中。

首先在在 layer 的 theme 目录建立一个文件夹（比如：hangge），然后在新建的文件夹中创建一个单独的样式文件（style.css），最后我们把皮肤样式写在这里面。

而全局配置这边我们可以这样使用这个皮肤：

layer.config({
  extend: 'hangge/style.css', //加载我们的扩展样式
  skin: 'demo-class' //默认皮肤改成绿色的
});

3，初始化路径配置

如果我们是采用 seajs 或者 requirejs 加载 layer，那么需要执行该方法来完成初始化的配置。

layer.config({
  path: '/res/layer/' //layer.js所在的目录，可以是绝对目录，也可以是相对目录
});
//这样的话，layer就会去加载一些它所需要的配件，比如css等。  
//当然，你即便不用seajs或者requirejs，也可以通过上述方式设定路径