From d3f4bfd2ac5e4b0e180bfb0f77c2112769683248 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: Fri, 24 Jul 2020 13:01:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8C=89=E9=92=AE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 component/pear/module/button.js   | 55 ++++++++++++++++++
 component/pear/module/document.js |  5 --
 component/pear/pear.js            |  3 +-
 view/document/button.html         | 97 ++++++++++++++++++++++++++++++-
 4 files changed, 153 insertions(+), 7 deletions(-)
 create mode 100644 component/pear/module/button.js

diff --git a/component/pear/module/button.js b/component/pear/module/button.js
new file mode 100644
index 0000000..000a4a7
--- /dev/null
+++ b/component/pear/module/button.js
@@ -0,0 +1,55 @@
+layui.define(['jquery', 'element', 'util'], function(exports) {
+	"use strict";
+
+	var MOD_NAME = 'button',
+		$ = layui.jquery,
+		util = layui.util,
+		element = layui.element;
+
+	var button = function(opt) {
+		this.option = opt;
+	};
+
+	button.prototype.load = function(opt) {
+		//默认配置值
+		var option = {
+			elem: opt.elem,
+			time: opt.time ? opt.time : false,
+			done: opt.done ? opt.done : function(){}
+		}
+
+		var load = $(option.elem).text();
+
+		$(option.elem).html("<i class='layui-anim layui-anim-rotate layui-icon layui-anim-loop layui-icon-loading'/>");
+
+		var buttons = $(option.elem);
+
+		if (option.time == "") {
+
+
+		} else {
+
+			setTimeout(function() {
+
+				buttons.html(load);
+				
+				option.done();
+
+			}, option.time);
+		}
+		
+		option.text = load;
+		
+		return new button(option);
+	}
+	
+	button.prototype.stop = function(success) {
+		
+		$(this.option.elem).html(this.option.text);
+	
+		success();
+		
+	} 
+
+	exports(MOD_NAME, new button());
+});
diff --git a/component/pear/module/document.js b/component/pear/module/document.js
index 6700f37..0d78590 100644
--- a/component/pear/module/document.js
+++ b/component/pear/module/document.js
@@ -9,10 +9,5 @@ layui.define(['jquery', 'element'], function(exports) {
 		this.option = opt;
 	};
 
-
-	$("body").on("click", "*[loading]", function() {
-	
-	})
-
 	exports(MOD_NAME, new document());
 })
diff --git a/component/pear/pear.js b/component/pear/pear.js
index e4e1852..e39a08e 100644
--- a/component/pear/pear.js
+++ b/component/pear/pear.js
@@ -27,5 +27,6 @@ layui.config({
 	tinymce:"tinymce/tinymce",
 	area:"area",
 	count:"count",
-	topBar: "topBar"
+	topBar: "topBar",
+	button: "button"
 });
diff --git a/view/document/button.html b/view/document/button.html
index c49e3f0..fc53a68 100644
--- a/view/document/button.html
+++ b/view/document/button.html
@@ -169,13 +169,108 @@
 					</div>
 				</div>
 			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						Load 自动
+					</div>
+					<div class="layui-card-body">
+						<button class="pear-btn pear-btn-primary" load> 加载 600 ms </button>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(["button"], function() {
+								    var button = layui.button;
+								    
+									button.load({
+								        elem:'[load]',
+								        time: 600,
+								        done: function(){
+									        popup.success("加载完成");
+								        }
+								    })
+								})
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						Load 手动
+					</div>
+					<div class="layui-card-body">
+
+						<button class="pear-btn pear-btn-primary" loading> 开始 </button>
+
+						<button class="pear-btn pear-btn-danger" stop> 停止 </button>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(["button"], function() {
+								    var button = layui.button;
+								    
+									var dom = button.load({
+								        elem:'[load]',
+								    })
+									
+								    dom.stop(function() {
+								        popup.failure("已停止");
+								    });
+								})
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
 		</div>
 		<script src="../../component/layui/layui.js"></script>
 		<script src="../../component/pear/pear.js"></script>
 		<script>
-			layui.use(['element', 'code'], function() {
+			layui.use(['element', 'code', 'jquery', "button", "popup"], function() {
 				var element = layui.element;
+				var $ = layui.jquery;
+				var popup = layui.popup;
+				var button = layui.button;
+				
 				layui.code();
+				
+				$("[load]").click(function() {
+					button.load({
+						elem: '[load]',
+						time: 600,
+						done: function() {
+							popup.success("加载完成");
+						}
+					})
+				})
+
+				var dom;
+
+				$("[loading]").click(function() {
+					dom = button.load({
+						elem: '[loading]'
+					})
+				})
+
+				$("[stop]").click(function() {
+					dom.stop(function() {
+						popup.failure("已停止");
+					});
+				})
 			})
 		</script>
 	</body>