From 2f79ecb2b310b35169b204db4d9eef52dcd1fc34 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 16:29:03 +0800 Subject: [PATCH] Button Document --- component/pear/css/pear-module/code.css | 9 ++ component/pear/css/pear-module/label.css | 0 component/pear/css/pear-module/link.css | 20 ++++ component/pear/css/pear.css | 3 + view/document/button.html | 98 ++++++++++++++++++- view/document/drawer.html | 114 ++++++----------------- 6 files changed, 157 insertions(+), 87 deletions(-) create mode 100644 component/pear/css/pear-module/code.css create mode 100644 component/pear/css/pear-module/label.css create mode 100644 component/pear/css/pear-module/link.css diff --git a/component/pear/css/pear-module/code.css b/component/pear/css/pear-module/code.css new file mode 100644 index 0000000..4bde0d3 --- /dev/null +++ b/component/pear/css/pear-module/code.css @@ -0,0 +1,9 @@ +.layui-colla-content{ + padding: 0px; +} +.layui-code-view{ + margin: 0px!important; +} +.layui-code-h3{ + display: none!important; +} \ No newline at end of file diff --git a/component/pear/css/pear-module/label.css b/component/pear/css/pear-module/label.css new file mode 100644 index 0000000..e69de29 diff --git a/component/pear/css/pear-module/link.css b/component/pear/css/pear-module/link.css new file mode 100644 index 0000000..380351c --- /dev/null +++ b/component/pear/css/pear-module/link.css @@ -0,0 +1,20 @@ +.pear-link{ + font-size: 15px!important; +} + +.pear-link.pear-link-primary{ + color : #5FB878 ; +} + +.pear-link.pear-link-success{ + color : #5FB878 ; +} + +.pear-link .pear-link-warming{ + + +} + +.pear-link .pear-link-danger{ + +} \ No newline at end of file diff --git a/component/pear/css/pear.css b/component/pear/css/pear.css index c39db1e..a85f6cc 100644 --- a/component/pear/css/pear.css +++ b/component/pear/css/pear.css @@ -6,5 +6,8 @@ @import url("pear-module/frame.css"); @import url("pear-module/menu.css"); @import url("pear-module/form.css"); +@import url("pear-module/link.css"); @import url("pear-module/form.css"); @import url("pear-module/tab.css"); +@import url("pear-module/code.css"); +@import url("pear-module/link.css"); diff --git a/view/document/button.html b/view/document/button.html index f3d57fd..99be0c3 100644 --- a/view/document/button.html +++ b/view/document/button.html @@ -7,6 +7,28 @@
+
+
+ 开发环境 +
+
+ Pear Button 参考 Element UI 样式 ，提供 Button 服务 +
+
+
+
+
+

显示代码

+
+ 
+								
+								 或
+								
+
+
+
+
+
@@ -24,6 +46,22 @@
+
+
+
+

显示代码

+
+ 
+								
+								
+															
+								
+								
+
+
+
+
+
@@ -43,7 +81,23 @@
+
+
+
+

显示代码

+
+ 
+								
+								
+								
+								
+
+
+
+
+
+
@@ -59,9 +113,25 @@

- - - + + + +
+
+
+
+
+
+
+

显示代码

+
+ 
+								

+								    
+								    
+								    
+								

+
@@ -83,6 +153,28 @@
+
+
+
+

显示代码

+
+ 
+								
+								
+								
+
+
+
+
+
+ + + diff --git a/view/document/drawer.html b/view/document/drawer.html index 0648437..a05f2c3 100644 --- a/view/document/drawer.html +++ b/view/document/drawer.html @@ -20,49 +20,24 @@ -
-
进阶
-
- - -
- -
-
-
扩展
-
- - -
-
-
-
-

左侧弹层内容...

-
-
-
-

右侧弹层内容...

-
-
-
-

上侧弹层内容...

-
-
-
-

下侧弹层内容...

+
+
+

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

-
-

点击右侧灰色区域

+
+

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

+
+

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

-
-

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

+
+

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

@@ -77,40 +52,6 @@ var layer = layui.layer; $(".drawer-right").click(function() { - drawer.open({ - direction: "right", - dom: ".layer-top", - 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-right", - 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", @@ -119,42 +60,47 @@ }); }) - var dom; + $(".drawer-left").click(function() { - $(".drawer-close-mask").click(function() { dom = drawer.open({ - direction: "right", + direction: "left", dom: ".layer-close-mask", distance: "30%", maskClose: false }); + }) - $("#btnClose").click(function() { - dom.close(); - }) - - $(".drawer-auto-close").click(function() { + $(".drawer-top").click(function() { dom = drawer.open({ - direction: "right", + direction: "top", dom: ".layer-auto-close", distance: "30%", maskClose: false, time: 1000 }); }) - - $(".drawer-call-back").click(function(){ + + $(".drawer-bottom").click(function() { dom = drawer.open({ - direction: "right", - dom: ".layer-right", + direction: "bottom", + dom: ".layer-call-back", distance: "30%", - success:function(){ - layer.msg("触发回调函数",{icon:1,time:1000}); + success: function() { + layer.msg("触发回调函数", { + icon: 1, + time: 1000 + }); } }); }) - + + var dom; + + $("#btnClose").click(function() { + dom.close(); + }) + })