From d162ba1cb4a285c1b451a2faf5ed839ae55f3b7f 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: Tue, 21 Jul 2020 00:22:06 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=20=E6=8A=BD=E5=B1=89=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=20=E5=AE=8C=E5=96=84=20=E6=8A=BD=E5=B1=89=20?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- component/layui/lay/extends/drawer.js | 181 +++++++++++++ component/layui/layui.js | 1 + component/pear/css/module/button.css | 169 ++++++++++++ component/pear/css/module/code.css | 9 + component/pear/css/module/layout.css | 32 +++ component/pear/css/pear.css | 5 + component/pear/pear.js | 0 view/common/popper/drawer.html | 360 ++++++++++++++++++++------ 8 files changed, 678 insertions(+), 79 deletions(-) create mode 100644 component/layui/lay/extends/drawer.js create mode 100644 component/pear/css/module/button.css create mode 100644 component/pear/css/module/code.css create mode 100644 component/pear/css/module/layout.css create mode 100644 component/pear/css/pear.css create mode 100644 component/pear/pear.js diff --git a/component/layui/lay/extends/drawer.js b/component/layui/lay/extends/drawer.js new file mode 100644 index 0000000..85c48bd --- /dev/null +++ b/component/layui/lay/extends/drawer.js @@ -0,0 +1,181 @@ +layui.define(['jquery', 'element'], function(exports) { + "use strict"; + + var MOD_NAME = 'drawer', + $ = layui.jquery, + element = layui.element; + + var drawer = new function() { + + this.open = function(option) { + + var _right = new mSlider({ + dom: option.dom, + direction: option.direction, + distance: option.distance, + time:option.time?option.time:0, + maskClose:option.maskClose, + callback:option.success + }); + + _right.open(); + + return _right; + } + + } + exports(MOD_NAME,drawer); +}); + +(function(b, c) { + function a(d) { + this.opts = { + "direction": d.direction || "left", + "distance": d.distance || "60%", + "dom": this.Q(d.dom), + "time": d.time || "", + "maskClose": (d.maskClose + "").toString() !== "false" ? true : false, + "callback": d.callback || "" + }; + this.rnd = this.rnd(); + this.dom = this.opts.dom[0]; + this.wrap = ""; + this.inner = ""; + this.mask = ""; + this.init() + } + a.prototype = { + Q: function(d) { + return document.querySelectorAll(d) + }, + isMobile: function() { + return navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i) ? true : false + }, + addEvent: function(f, e, d) { + if (f.attachEvent) { + f.attachEvent("on" + e, d) + } else { + f.addEventListener(e, d, false) + } + }, + rnd: function() { + return Math.random().toString(36).substr(2, 6) + }, + init: function() { + var g = this; + if (!g.dom) { + console.log("未正确绑定弹窗容器"); + return + } + var d = document.createElement("div"); + var e = document.createElement("div"); + var f = document.createElement("div"); + d.setAttribute("class", "mSlider-main ms-" + g.rnd); + e.setAttribute("class", "mSlider-inner"); + f.setAttribute("class", "mSlider-mask"); + g.Q("body")[0].appendChild(d); + g.Q(".ms-" + g.rnd)[0].appendChild(e); + g.Q(".ms-" + g.rnd)[0].appendChild(f); + g.wrap = g.Q(".ms-" + g.rnd)[0]; + g.inner = g.Q(".ms-" + g.rnd + " .mSlider-inner")[0]; + g.mask = g.Q(".ms-" + g.rnd + " .mSlider-mask")[0]; + g.inner.appendChild(g.dom); + switch (g.opts.direction) { + case "top": + g.top = "0"; + g.left = "0"; + g.width = "100%"; + g.height = g.opts.distance; + g.translate = "0,-100%,0"; + break; + case "bottom": + g.bottom = "0"; + g.left = "0"; + g.width = "100%"; + g.height = g.opts.distance; + g.translate = "0,100%,0"; + break; + case "right": + g.top = "0"; + g.right = "0"; + g.width = g.opts.distance; + g.height = document.documentElement.clientHeight + "px"; + g.translate = "100%,0,0"; + break; + default: + g.top = "0"; + g.left = "0"; + g.width = g.opts.distance; + g.height = document.documentElement.clientHeight + "px"; + g.translate = "-100%,0,0" + } + g.wrap.style.display = "none"; + g.wrap.style.position = "fixed"; + g.wrap.style.top = "0"; + g.wrap.style.left = "0"; + g.wrap.style.width = "100%"; + g.wrap.style.height = "100%"; + g.wrap.style.zIndex = 99; + g.inner.style.position = "absolute"; + g.inner.style.top = g.top; + g.inner.style.bottom = g.bottom; + g.inner.style.left = g.left; + g.inner.style.right = g.right; + g.inner.style.width = g.width; + g.inner.style.height = g.height; + g.inner.style.backgroundColor = "#fff"; + g.inner.style.transform = "translate3d(" + g.translate + ")"; + g.inner.style.webkitTransition = "all .2s ease-out"; + g.inner.style.transition = "all .2s ease-out"; + g.inner.style.zIndex = 100; + g.mask.style.width = "100%"; + g.mask.style.height = "100%"; + g.mask.style.opacity = "0"; + g.mask.style.backgroundColor = "black"; + g.mask.style.zIndex = "98"; + g.mask.style.webkitTransition = "all .2s ease-out"; + g.mask.style.transition = "all .2s ease-out"; + g.mask.style.webkitBackfaceVisibility = "hidden"; + g.events() + }, + open: function() { + var d = this; + d.wrap.style.display = "block"; + + setTimeout(function() { + d.inner.style.transform = "translate3d(0,0,0)"; + d.inner.style.webkitTransform = "translate3d(0,0,0)"; + d.mask.style.opacity = 0.5 + }, 30); + if (d.opts.time) { + d.timer = setTimeout(function() { + d.close() + }, d.opts.time) + } + }, + close: function() { + var d = this; + d.timer && clearTimeout(d.timer); + d.inner.style.webkitTransform = "translate3d(" + d.translate + ")"; + d.inner.style.transform = "translate3d(" + d.translate + ")"; + d.mask.style.opacity = 0; + setTimeout(function() { + d.wrap.style.display = "none"; + d.timer = null; + d.opts.callback && d.opts.callback() + }, 300) + }, + events: function() { + var d = this; + d.addEvent(d.mask, "touchmove", function(f) { + f.preventDefault() + }); + d.addEvent(d.mask, (d.isMobile() ? "touchend" : "click"), function(f) { + if (d.opts.maskClose) { + d.close() + } + }) + } + }; + b.mSlider = a +})(window); diff --git a/component/layui/layui.js b/component/layui/layui.js index 7882e99..bc1e19f 100644 --- a/component/layui/layui.js +++ b/component/layui/layui.js @@ -62,6 +62,7 @@ pearStep:"extends/pearStep", pearArea:"extends/pearArea", tinymce:"extends/tinymce/tinymce", + drawer:"extends/drawer", echarts:"extends/echarts", echartsTheme:"extends/echartsTheme", formSelects:'extends/formSelects-v4', diff --git a/component/pear/css/module/button.css b/component/pear/css/module/button.css new file mode 100644 index 0000000..8b907b6 --- /dev/null +++ b/component/pear/css/module/button.css @@ -0,0 +1,169 @@ +/** Buttom 默认*/ +.pear-btn { + display: inline-block; + line-height: 38px; + white-space: nowrap; + cursor: pointer; + background-color: #fff; + border: 1px solid #dcdfe6; + color: #606266; + text-align: center; + box-sizing: border-box; + outline: none; + transition: 0.1s; + font-weight: 500; + padding: 0 18px; + height: 38px; + font-size: 14px; + border-radius: 4px; +} + +.pear-btn i { + font-size: 13px; +} + +.pear-btn:hover { + opacity: .8; + filter: alpha(opacity=80); + color: #409eff; + border-color: #c6e2ff; + background-color: #ECF5FF; +} + +.pear-btn-danger, +.pear-btn-warming, +.pear-btn-success, +.pear-btn-primary { + color: #fff !important +} + +.pear-btn[dashed] { + border-style: dashed !important; +} + +/** Button 主题 */ +.pear-btn-primary { + background-color: #2D8CF0 !important; +} + +.pear-btn-danger { + background-color: #f56c6c !important +} + +.pear-btn-warming { + background-color: #e6a23c !important +} + +.pear-btn-success { + background-color: #67c23a !important +} + +.pear-btn[round] { + border-radius: 50px; +} + +.pear-btn-primary[plain] { + color: #409eff !important; + background: #ecf5ff !important; + border-color: #b3d8ff !important; +} + +.pear-btn-primary[plain]:hover { + color: #fff !important; + background-color: #2d8cf0 !important +} + +.pear-btn-success[plain] { + color: #67c23a !important; + background: #f0f9eb !important; + border-color: #c2e7b0 !important; +} + +.pear-btn-success[plain]:hover { + color: white !important; + background-color: #67c23a !important +} + +.pear-btn-warming[plain] { + color: #e6a23c !important; + background: #fdf6ec !important; + border-color: #f5dab1 !important; +} + +.pear-btn-warming[plain]:hover { + color: white !important; + background-color: #e6a23c !important +} + +.pear-btn-danger[plain] { + color: #f56c6c !important; + background: #fef0f0 !important; + border-color: #fbc4c4 !important; +} + +.pear-btn-danger[plain]:hover { + color: white !important; + background-color: #f56c6c !important +} + +/** Button Group */ +.pear-btn-group { + display: inline-block; + vertical-align: middle; +} + +.pear-btn-group .pear-btn { + float: left; + position: relative; + border-radius: 0px; + +} + +.pear-btn-md { + height: 34px; + line-height: 34px; + padding: 0 10px; + font-size: 12.5px; +} + +.pear-btn-group .pear-btn:first-child { + border-top-left-radius: 4px !important; + border-bottom-left-radius: 4px !important; +} + +.pear-btn-group .pear-btn:last-child { + border-top-right-radius: 4px !important; + border-bottom-right-radius: 4px !important; +} + +.pear-btn-group .pear-btn[round]:first-child { + border-top-left-radius: 50px !important; + border-bottom-left-radius: 50px !important; +} + +.pear-btn-group .pear-btn[round]:last-child { + border-top-right-radius: 50px !important; + border-bottom-right-radius: 50px !important; +} + +/** Button Size*/ +.pear-btn-sm { + height: 30px; + line-height: 30px; + padding: 0 10px; + font-size: 12px; +} + +.pear-btn-xs { + height: 22px; + line-height: 22px; + padding: 0 5px; + font-size: 12px; +} + +.pear-btn-lg { + height: 44px; + line-height: 44px; + padding: 0 25px; + font-size: 16px; +} diff --git a/component/pear/css/module/code.css b/component/pear/css/module/code.css new file mode 100644 index 0000000..4bde0d3 --- /dev/null +++ b/component/pear/css/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/module/layout.css b/component/pear/css/module/layout.css new file mode 100644 index 0000000..3a9ed38 --- /dev/null +++ b/component/pear/css/module/layout.css @@ -0,0 +1,32 @@ +.pear-container{ + margin: 10px; + background-color: whitesmoke; +} + +body::-webkit-scrollbar { + width: 0px; + height: 0px; +} + +body::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +body::-webkit-scrollbar-track { + background: white; + border-radius: 2px; +} + +body::-webkit-scrollbar-thumb { + background: #E6E6E6; + border-radius: 2px; +} + +body::-webkit-scrollbar-thumb:hover { + background: #E6E6E6; +} + +body::-webkit-scrollbar-corner { + background: #f6f6f6; +} \ No newline at end of file diff --git a/component/pear/css/pear.css b/component/pear/css/pear.css new file mode 100644 index 0000000..e8c9a66 --- /dev/null +++ b/component/pear/css/pear.css @@ -0,0 +1,5 @@ +@import url("../../layui/css/layui.css"); + +@import url("module/button.css"); +@import url("module/code.css"); +@import url("module/layout.css"); \ No newline at end of file diff --git a/component/pear/pear.js b/component/pear/pear.js new file mode 100644 index 0000000..e69de29 diff --git a/view/common/popper/drawer.html b/view/common/popper/drawer.html index 8fb92fc..8d7c0cc 100644 --- a/view/common/popper/drawer.html +++ b/view/common/popper/drawer.html @@ -3,90 +3,292 @@ - - - - + + .wrap { + display: none; + } + - - - -
-
抽屉
-
-
- pearOper.drawer("top",".layer-top","30%") -
-
- pearOper.drawer("bottom",".layer-bottom","30%") -
-
- pearOper.drawer("left",".layer-left","30%") -
-
- pearOper.drawer("right",".layer-right","30%") -
-
+
+
+
+
开发环境
+
+ 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("触发回调函数")； 
+								            }
+								        });
+								    })
+								})
+
+
+
- - - -
- - - -
- +
+
+
+

左侧弹层内容...

+
+
+
+

右侧弹层内容...

+
+
+
+

上侧弹层内容...

+
+
+
+

下侧弹层内容...

+
+ +
+
+

点击右侧灰色区域

+
+
+ +
+
+
+

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

+
- - - - - - + - \ No newline at end of file + + +