From 947ee1c1ae85d332469fe477107a4cefe0965928 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com> Date: Sat, 18 Jul 2020 20:26:03 +0800 Subject: [PATCH] Drawer Document --- view/document/drawer.html | 197 +++++++++++++++++++++++++++++++------- 1 file changed, 160 insertions(+), 37 deletions(-) diff --git a/view/document/drawer.html b/view/document/drawer.html index a9fc43a..3f04289 100644 --- a/view/document/drawer.html +++ b/view/document/drawer.html @@ -51,16 +51,14 @@

显示代码

-								layui.use(['element', 'jquery', 'drawer', 'layer','code'], function() {
-								    var drawer = layui.drawer;
-									
+								layui.use(['drawer'], function() {
+									var drawer = layui.drawer;
+								
 								    drawer.open({
 								        direction: "right",
-								        dom: ".layer-open-mask",
-								        distance: "30%",
-								        maskClose: true
+								        dom: ".layer-top",
+								        distance: "30%"
 								    });
-									
 								})
@@ -69,39 +67,132 @@
-
文档
+
进阶
-
- 属性 -
- -
- 方法 -
- + +
+
+
+
+
+
+

显示代码

+
+ 
+								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("触发回调函数")； 
+								            }
+								        });
+								    })
+								})
+
+
-
-
+

-

关闭后产生回调函数...

+

左侧弹层内容...

+
+
+
+

右侧弹层内容...

+
+
+
+

上侧弹层内容...

+
+
+
+

下侧弹层内容...


-

开启遮盖层关闭 ,点击右侧灰色区域

+

点击右侧灰色区域

-
-

关闭遮盖层，通过 JS API 关闭抽屉


-

打开 2 秒 后自动关闭...

+

打开 2秒 后自动关闭...

@@ -118,6 +209,40 @@ layui.code(); $(".drawer-right").click(function() { + drawer.open({ + direction: "right", + dom: ".layer-right", + distance: "30%" + }); + }) + + $(".drawer-left").click(function() { + + drawer.open({ + direction: "left", + dom: ".layer-left", + distance: "30%" + }); + + }) + + $(".drawer-top").click(function() { + drawer.open({ + direction: "top", + dom: ".layer-top", + distance: "30%" + }); + }) + + $(".drawer-bottom").click(function() { + drawer.open({ + direction: "bottom", + dom: ".layer-bottom", + distance: "30%" + }); + }) + + $(".drawer-open-mask").click(function() { drawer.open({ direction: "right", dom: ".layer-open-mask", @@ -126,20 +251,24 @@ }); }) - $(".drawer-left").click(function() { + var dom; + $(".drawer-close-mask").click(function() { dom = drawer.open({ - direction: "left", + direction: "right", dom: ".layer-close-mask", distance: "30%", maskClose: false }); - }) - $(".drawer-top").click(function() { + $("#btnClose").click(function() { + dom.close(); + }) + + $(".drawer-auto-close").click(function() { dom = drawer.open({ - direction: "top", + direction: "right", dom: ".layer-auto-close", distance: "30%", maskClose: false, @@ -147,10 +276,10 @@ }); }) - $(".drawer-bottom").click(function() { + $(".drawer-call-back").click(function() { dom = drawer.open({ - direction: "bottom", - dom: ".layer-call-back", + direction: "right", + dom: ".layer-right", distance: "30%", success: function() { layer.msg("触发回调函数", { @@ -161,12 +290,6 @@ }); }) - var dom; - - $("#btnClose").click(function() { - dom.close(); - }) - })