开发环境
Drawer 在 弹出层 UI 上带来不一样的体验.

显示代码

								
								 并
抽屉

显示代码

								layui.use(['drawer'], function() {
									var drawer = layui.drawer;

								    drawer.open({
								        direction: "right",
								        dom: ".layer-top",
								        distance: "30%"
								    });
								})
进阶

显示代码

								var dom;

								$(".drawer-close-mask").click(function() {
								    dom = drawer.open({
								        direction: "right",
								        dom: ".layer-close-mask",
								        distance: "30%",
								        maskClose: false
								    });
								})

								$("#btnClose").click(function() {
								    dom.close();
								})
扩展

显示代码

								layui.use(['drawer'], function() {
									var drawer = layui.drawer;

								    $(".drawer-auto-close").click(function() {
								        dom = drawer.open({
								            direction: "right",
								            dom: ".layer-auto-close",
								            distance: "30%",
								            maskClose: false,
								            time: 1000
								        });
								    })
								})
扩展

显示代码

								layui.use(['drawer'], function() {
									var drawer = layui.drawer;

								    $(".drawer-auto-close").click(function() {
								        dom = drawer.open({
								            direction: "right",
								            dom: ".layer-auto-close",
								            distance: "30%",
								            success:function(){
								                layer.msg("触发回调函数");
								            }
								        });
								    })
								})
扩展

显示代码

									layui.use(['drawer'], function() {
									  var drawer = layui.drawer;
									    $("#targetDemo").click(function () {
									      drawer.open({
									      // 指定挂载节点
									      target: "#targetEl"
									      direction: "right",
									      dom: ".layer-right",
									      distance: "50%",
									      });
									})
基于 layer 的抽屉扩展

兼容原版 drawer 所有参数,要使用 layer 扩展,设置 legacy 选项为 false 即可

指定容器内打开，需使用 layer 捕获层模式，并设置目标容器 style="overflow: hidden; position: relative;"
使用 url 参数指定抽屉代码片段地址，会使用 ajax 请求将代码片段拼接到抽屉中，和原来的页面在同一个页面上, 传值更方便。注意片段和原页面不能出现相同的 ID。

显示代码

											$("#layerDrawerLeft").click(function(){
											  drawer.open({
											    legacy: false,
											    offset: 'l',
											    area: "30%",
											    content: "left内容",
											  })
											})
											$("#layerDrawerRight").click(function () {
											  drawer.open({
											    legacy: false,
											    offset: 'r',
											    area: "30%",
											    content: "right内容",
											  })
											})
											$("#layerDrawerTop").click(function () {
											  drawer.open({
											    legacy: false,
										      offset: "t",
											    content: "top内容",
											  })
											})
											$("#layerDrawerBottom").click(function () {
											  drawer.open({
											    legacy: false,
											    offset: "b",
											    content: "bottom内容",
											  })
											})

											$("#layerDrawer").click(function () {
											  var index = drawer.open({
											    legacy: false,
											    title: ['标题', 'font-size:16px;color:#2d8cf0'],
											    maxmin: true,
											    offset: "r",
											    area: "30%",
											    content: "抽屉内容",
											    btn:"关闭",
											    yes:function(index,layero){
											      drawer.close(index);
											      console.log(index,layero);
											    },
											    btnAlign: "l",
											    closeBtn: 1,
											  })
											})

											$("#layerDrawerParent").click(function () {

											  var index = parent.layui.drawer.open({
												    legacy: false,
												    title: ['标题', 'font-size:16px;color:#2d8cf0'],
												    maxmin: true,
												    offset: "r",
												    area: "30%",
												    content: "抽屉内容",
												    btn:"关闭",
												    yes:function(index,layero){
												      drawer.close(index);
												      console.log(index,layero);
												    },
												    btnAlign: "l",
												    closeBtn: 1,
												})
											})

											$("#layertargetDemo").click(function () {
											    drawer.open({
											    legacy: false,
											    target: "#layertargetEl",
											    direction: "right",
											    dom: ".layer-right",
											    distance: "50%",
											    });
											})

											$("#layerDrawerIframe").click(function () {
											  drawer.open({
											  legacy: false,
											  title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
											  offset: 'r',
											  area: "80%",
											   maxmin: true,
											   closeBtn: 1,
											   iframe: window.location.origin + "/view/document/table.html"
											  })
											})

											$("#layerDrawerURL").click(function () {
											   drawer.open({
										     legacy: false,
										     title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
											   offset: 'r',
											   area: "80%",
											   maxmin: true,
											   closeBtn: 1,
											   url: window.location.origin + "/view/document/drawerFragment.html"
											   })
											})