按钮组件

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());
+});

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());
 })

component/pear/pear.js

@@ -27,5 +27,6 @@ layui.config({
 	tinymce:"tinymce/tinymce",
 	area:"area",
 	count:"count",
-	topBar: "topBar"
+	topBar: "topBar",
+	button: "button"
 });

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>