Drawer.js 自动关闭 / success 回调函数

component/pear/module/drawer.js

@@ -13,8 +13,9 @@ layui.define(['jquery', 'element'], function(exports) {
 				dom: option.dom,
 				direction: option.direction,
 				distance: option.distance,
-				time:option.time,
-				maskClose:option.maskClose
+				time:option.time?option.time:0,
+				maskClose:option.maskClose,
+				callback:option.success
 			});
 			
 			_right.open();

view/document/drawer.html

@@ -22,7 +22,7 @@
 		</div>
 
 		<div class="layui-card">
-			<div class="layui-card-header">更多</div>
+			<div class="layui-card-header">进阶</div>
 			<div class="layui-card-body">
 				<button class="drawer-open-mask pear-btn pear-btn-primary">开启遮盖层</button>
 				<button class="drawer-close-mask pear-btn pear-btn-primary">关闭遮盖层</button>
@@ -30,37 +30,56 @@
 
 		</div>
 
+		<div class="layui-card">
+			<div class="layui-card-header">扩展</div>
+			<div class="layui-card-body">
+				<button class="drawer-auto-close pear-btn pear-btn-success">自动关闭</button>
+				<button class="drawer-call-back pear-btn pear-btn-success">回调函数</button>
+			</div>
+
+		</div>
+
 		<div class="wrap">
 			<div class="layer-left">
+				<br/>
 				<h3>左侧弹层内容...</h3>
 			</div>
 			<div class="layer-right">
+				<br/>
 				<h3>右侧弹层内容...</h3>
 			</div>
 			<div class="layer-top">
+				<br/>
 				<h3>上侧弹层内容...</h3>
 			</div>
 			<div class="layer-bottom">
+				<br/>
 				<h3>下侧弹层内容...</h3>
 			</div>
 
 			<div class="layer-open-mask">
-				<h3>点击右侧灰色区域
-				</h3>
+				<br/>
+				<h3>点击右侧灰色区域</h3>
 			</div>
 			<div class="layer-close-mask">
 				<button id="btnClose" class="pear-btn pear-btn-primary" style="position: absolute; bottom: 10px;left: 10px;">关闭抽屉</button>
 			</div>
+			
+			<div class="layer-auto-close">
+				<br/>
+				<h3>打开 2秒 后自动关闭...</h3>
+			</div>
 		</div>
 
 	</body>
 	<script src="../../component/layui/layui.js"></script>
 	<script src="../../component/pear/pear.js"></script>
 	<script>
-		layui.use(['element', 'jquery', 'drawer', 'code'], function() {
+		layui.use(['element', 'jquery', 'drawer', 'layer'], function() {
 			var element = layui.element;
 			var $ = layui.jquery;
 			var drawer = layui.drawer;
+			var layer = layui.layer;
 
 			$(".drawer-right").click(function() {
 				drawer.open({
@@ -120,6 +139,27 @@
 				dom.close();
 			})
 
+			$(".drawer-auto-close").click(function() {
+				dom = drawer.open({
+					direction: "right",
+					dom: ".layer-auto-close",
+					distance: "30%",
+					maskClose: false,
+					time: 1000
+				});
+			})
+			
+			$(".drawer-call-back").click(function(){
+				dom = drawer.open({
+					direction: "right",
+					dom: ".layer-right",
+					distance: "30%",
+				    success:function(){
+						layer.msg("触发回调函数",{icon:1,time:1000});
+					}
+				});
+			})
+			
 		})
 	</script>
 </html>