调整代码结构

admin/data/menu.json

@@ -41,6 +41,14 @@
 				"type": 1,
 				"openType": "_iframe",
 				"href": "view/document/select.html"
+			},
+			{
+				"id": 203,
+				"title": "抽屉组件",
+				"icon": "layui-icon layui-icon-face-cry",
+				"type": 1,
+				"openType": "_iframe",
+				"href": "view/document/drawer.html"
 			}
 		]
 	},

component/pear/module/drawer.js

@@ -0,0 +1,180 @@
+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,
+				maskClose:option.maskClose
+			});
+			
+			_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);

component/pear/pear.all.js

@@ -15,5 +15,6 @@ layui.config({
 	echartsTheme: "echartsTheme",
 	hash: "hash",
 	document: "document",
-	select: "select"
+	select: "select",
+	drawer: "drawer"
 });

component/pear/pear.js

@@ -15,5 +15,6 @@ layui.config({
 	echartsTheme: "echartsTheme",
 	hash: "hash",
 	document: "document",
-	select:"select"
+	select: "select",
+	drawer: "drawer"
 });

view/document/button.html

@@ -44,7 +44,6 @@
 				</div>
 			</div>
 		</div>
-
 		<div class="layui-row layui-col-space10">
 			<div class="layui-col-md12">
 				<div class="layui-card">

view/document/drawer.html

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<link href="../../component/pear/css/pear.css" rel="stylesheet" />
+		<style>
+			.wrap {
+				display: none;
+			}
+		</style>
+	</head>
+	<body class="pear-container">
+		<div class="layui-card">
+			<div class="layui-card-header">抽屉</div>
+			<div class="layui-card-body">
+				<button class="drawer-top pear-btn pear-btn-primary">上</button>
+				<button class="drawer-bottom pear-btn pear-btn-success">下</button>
+				<button class="drawer-left pear-btn pear-btn-warming">左</button>
+				<button class="drawer-right pear-btn pear-btn-danger">右</button>
+			</div>
+		</div>
+
+		<div class="layui-card">
+			<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>
+			</div>
+
+		</div>
+
+		<div class="wrap">
+			<div class="layer-left">
+				<h3>左侧弹层内容...</h3>
+			</div>
+			<div class="layer-right">
+				<h3>右侧弹层内容...</h3>
+			</div>
+			<div class="layer-top">
+				<h3>上侧弹层内容...</h3>
+			</div>
+			<div class="layer-bottom">
+				<h3>下侧弹层内容...</h3>
+			</div>
+
+			<div class="layer-open-mask">
+				<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>
+
+	</body>
+	<script src="../../component/layui/layui.js"></script>
+	<script src="../../component/pear/pear.js"></script>
+	<script>
+		layui.use(['element', 'jquery', 'drawer', 'code'], function() {
+			var element = layui.element;
+			var $ = layui.jquery;
+			var drawer = layui.drawer;
+
+			$(".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",
+					distance: "30%",
+					maskClose: true
+				});
+			})
+
+			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();
+			})
+
+		})
+	</script>
+</html>

view/document/select.html

@@ -8,9 +8,7 @@
 	<body class="pear-container">
 		<div class="layui-card">
 			<div class="layui-card-header">
-
 			</div>
-
 			<div class="layui-card-body">
 
 				<select name="city4" xm-select="select4" xm-select-skin="default">
@@ -21,14 +19,10 @@
 					<option value="5">天津</option>
 				</select>
 			</div>
-
 		</div>
-
 		<div class="layui-card">
 			<div class="layui-card-header">
-
 			</div>
-
 			<div class="layui-card-body">
 				<select name="city1" xm-select="select1">
 					<option value="1">北京</option>
@@ -43,9 +37,7 @@
 
 		<div class="layui-card">
 			<div class="layui-card-header">
-
 			</div>
-
 			<div class="layui-card-body">
 				<select name="city2" xm-select="select2" xm-select-skin="normal">
 					<option value="1">北京</option>
@@ -54,17 +46,13 @@
 					<option value="4" selected="selected">深圳</option>
 					<option value="5">天津</option>
 				</select>
-			</div>
+			</div
-
 		</div>
 
 		<div class="layui-card">
 			<div class="layui-card-header">
-
 			</div>
-
 			<div class="layui-card-body">
-
 				<select name="city3" xm-select="select3" xm-select-skin="warm">
 					<option value="1">北京</option>
 					<option value="2" selected="selected">上海</option>
@@ -73,16 +61,12 @@
 					<option value="5">天津</option>
 				</select>
 			</div>
-
 		</div>
 
 		<div class="layui-card">
 			<div class="layui-card-header">
-
 			</div>
-
 			<div class="layui-card-body">
-
 				<select name="city4" xm-select="select4" xm-select-skin="danger">
 					<option value="1">北京</option>
 					<option value="2" selected="selected">上海</option>