add tag component

2020-07-19 20:25:57 +08:00 · 2020-07-19 20:25:57 +08:00 · 3e4dd83893
parent 505c5a9337
commit 3e4dd83893
8 changed files with 481 additions and 10 deletions
--- a/admin/data/menu.json
+++ b/admin/data/menu.json
@ -81,6 +81,14 @@
 				"type": 1,
 				"openType": "_iframe",
 				"href": "view/document/step.html"
+			},
+			{
+				"id": 208,
+				"title": "标签",
+				"icon": "layui-icon layui-icon-face-cry",
+				"type": 1,
+				"openType": "_iframe",
+				"href": "view/document/tag.html"
 			}
 		]
 	},
--- a/component/pear/css/pear-module/tag.css
+++ b/component/pear/css/pear-module/tag.css
@ -0,0 +1,86 @@
+.input-new-tag {
+	width: 90px;
+}
+
+.input-new-tag input {
+	height: 100%;
+	border: none;
+	padding-left: 0px;
+}
+
+.tag .layui-btn .tag-close:hover {
+	border-radius: 2px;
+	background-color: #FF5722;
+	color: #fff;
+}
+
+.tag .layui-btn .tag-close {
+	margin-left: 8px;
+	transition: all .2s;
+	-webkit-transition: all .2s;
+}
+.tag-item {
+	background-color: #67c23a;
+	color: white;
+	border: none;
+}
+
+.tag-item:hover {
+
+	color: white;
+
+}
+.tag-item-normal {
+	background-color: #2D8CF0;
+	color: white;
+	border: none;
+}
+
+.tag-item-warm {
+	background-color: #e6a23c;
+	color: white;
+	border: none;
+}
+
+.tag-item-danger {
+	background-color: #f56c6c;
+	color: white;
+	border: none;
+}
+
+.tag-item-dark {
+	background-color: #525252;
+	color: white;
+	border: none;
+}
+
+.tag-item-primary {
+	background-color: white !important;
+	color: dimgray;
+	border: 1px solid dimgray;
+}
+
+.tag-item-normal:hover {
+
+	color: white !important;
+}
+
+.tag-item-warm:hover {
+
+	color: white;
+}
+
+.tag-item-danger:hover {
+
+	color: white;
+}
+
+.tag-item-dark:hover {
+
+	color: white;
+}
+
+.tag-item-primary:hover {
+	color: dimgray;
+	border: 1px solid dimgray;
+}
--- a/component/pear/css/pear.css
+++ b/component/pear/css/pear.css
@ -13,4 +13,5 @@
@import url("pear-module/code.css");
@import url("pear-module/link.css");
@import url("pear-module/step.css");
-@import url("pear-module/tab.css");
+@import url("pear-module/tab.css");
+@import url("pear-module/tag.css");
--- a/component/pear/module/tag.js
+++ b/component/pear/module/tag.js
@ -0,0 +1,162 @@
+layui.define('jquery', function(exports){
+  "use strict";
+  
+  var $ = layui.$
+  ,MOD_NAME = 'tag',
+  TAG_CLASS = '.tag',
+  BUTTON_NEW_TAG ='button-new-tag',
+  INPUT_NEW_TAG ='input-new-tag',
+  TAG_ITEM ='tag-item',
+  CLOSE = 'tag-close',
+  DEFAULT_SKIN ='layui-btn layui-btn-primary layui-btn-sm'
+  ,tag = function(){
+    this.config = {
+      likeHref:'../../modules/tag.css',
+      skin: DEFAULT_SKIN,
+      tagText:'+ New Tag'
+    };
+    this.configs = {}
+  };
+  
+  //全局设置
+  tag.prototype.set = function(options){
+    var that = this;
+    $.extend(true, that.config, options);
+    tag.render();
+    return that;
+  };
+  
+  //表单事件监听
+  tag.prototype.on = function(events, callback){
+    return layui.onevent.call(this, MOD_NAME, events, callback);
+  };
+  
+  //外部Tag新增
+  tag.prototype.add = function(filter, options){
+    var tagElem = $(TAG_CLASS + '[lay-filter='+ filter +']')
+    call.add(null, tagElem, options);
+    call.tagAuto(filter);
+    return this;
+  };
+  
+  //外部Tag删除
+  tag.prototype.delete = function(filter, layid){
+    var tagElem = $(TAG_CLASS + '[lay-filter='+ filter +']')
+    ,tagItemElem = tagElem.find('>.' + TAG_ITEM + '[lay-id="'+ layid +'"]');
+    call.delete(null, tagItemElem);
+    return this;
+  };
+
+  //基础事件体
+  var call = {
+    //Tag点击
+    tagClick: function(e, index, tagItemElem, options){
+      options = options || {};
+      var othis = tagItemElem || $(this)
+      ,index = index || othis.index(othis)
+      ,parents = othis.parents(TAG_CLASS).eq(0)
+      ,filter = parents.attr('lay-filter');
+      layui.event.call(this, MOD_NAME, 'click('+ filter +')', {
+        elem: parents
+        ,index: index
+      });
+    }
+    //Tag新增事件
+    ,add: function(e, tagElem, options){
+      var  filter = tagElem.attr('lay-filter'),
+           buttonNewTag = tagElem.children('.' + BUTTON_NEW_TAG),
+           index = buttonNewTag.index()
+          ,newTag = '<button lay-id="'+ (options.id||'') +'"' +(options.attr ? ' lay-attr="'+ options.attr +'"' : '') +' type="button" class="' + TAG_ITEM  + '">'+ (options.text||'unnaming') +'</button>';
+      var result = layui.event.call(this, MOD_NAME, 'add('+ filter +')', {
+        elem: tagElem
+        ,index: index
+        ,othis: newTag
+      })
+      if(result === false) return;
+      buttonNewTag[0] ? buttonNewTag.before(newTag) : tagElem.append(newTag);
+    }
+    //Tag输入事件
+    ,input: function(e, othis){
+      var buttonNewTag = othis || $(this)
+      ,parents = buttonNewTag.parents(TAG_CLASS).eq(0)
+      ,filter = parents.attr('lay-filter')
+      var options = tag.configs[filter] = $.extend({}, tag.config, tag.configs[filter] || {}, options);
+      //标签输入框
+      var inpatNewTag = $('<div class="' + INPUT_NEW_TAG + '"><input type="text" autocomplete="off" class="layui-input"></div>');
+      inpatNewTag.addClass(options.skin);
+      buttonNewTag.after(inpatNewTag).remove();
+      inpatNewTag.children('.layui-input').on('blur', function () {
+        if(this.value){
+          var options = {
+            text: this.value
+          }
+          call.add(null, parents, options);
+        }
+        inpatNewTag.remove();
+        call.tagAuto(filter);
+      }).focus();
+    }
+    //Tag删除
+    ,delete: function(e, othis){
+      var tagItem = othis || $(this).parent(), index = tagItem.index()
+      ,parents = tagItem.parents(TAG_CLASS).eq(0)
+      ,filter = parents.attr('lay-filter');
+
+      var result = layui.event.call(this, MOD_NAME, 'delete('+ filter +')', {
+        elem: parents
+        ,index: index
+      })
+      if(result === false) return;
+      tagItem.remove()
+    }
+    //Tag 自适应
+    ,tagAuto: function(filter){
+      filter = filter || '';
+      var options = filter ? tag.configs[filter] || tag.config : tag.config;
+      var elemFilter = function(){
+        return filter ? ('[lay-filter="' + filter +'"]') : '';
+      }();
+      $(TAG_CLASS + elemFilter).each(function(){
+        var othis = $(this),tagItem = othis.children('.' + TAG_ITEM), buttonNewTag = othis.children('.' + BUTTON_NEW_TAG);
+        tagItem.removeClass(DEFAULT_SKIN).addClass(options.skin);
+        //允许关闭
+        if(othis.attr('lay-allowClose') && tagItem.length){
+          tagItem.each(function(){
+            var li = $(this);
+            if(!li.find('.'+CLOSE)[0]){
+              var close = $('<i class="layui-icon layui-unselect '+ CLOSE +'">&#x1006;</i>');
+              close.on('click', call.delete);
+              li.append(close);
+            }
+          });
+        }
+        //允许新增标签
+        if(othis.attr('lay-newTag') && buttonNewTag.length === 0){
+          buttonNewTag = $('<button type="button" class="' + BUTTON_NEW_TAG + '"></button>');
+          buttonNewTag.on('click', call.input);
+          othis.append(buttonNewTag);
+        }
+        buttonNewTag.html(options.tagText);
+        buttonNewTag.removeClass(DEFAULT_SKIN).addClass(options.skin);
+      });
+    }
+  };
+  
+  //初始化元素操作
+  tag.prototype.init = function(filter, options){
+    layui.addcss(tag.config.likeHref);
+    if(filter){
+      tag.configs[filter] = $.extend({}, tag.config, tag.configs[filter] || {}, options);
+    }
+    return call.tagAuto.call(this, filter);
+  };
+  
+  tag.prototype.render = tag.prototype.init;
+
+  var tag = new tag(), dom = $(document);
+  tag.render();
+
+  dom.on('click', '.' + TAG_ITEM, call.tagClick); //tag 单击事件
+  exports(MOD_NAME, tag);
+});
+
--- a/component/pear/pear.js
+++ b/component/pear/pear.js
@ -18,5 +18,6 @@ layui.config({
 	select: "select",
 	drawer: "drawer",
 	notice: "notice",
-	step:"step"
+	step:"step",
+	tag:"tag"
 });
--- a/view/document/button.html
+++ b/view/document/button.html
@ -24,7 +24,7 @@
 						<div class="layui-colla-content">
 							<pre class="layui-code" lay-encode="true">
 								<link rel="stylesheet" href="component/pear/css/pear.css" />
-								 或
+								或
 								<link rel="stylesheet" href="component/pear/css/pear-module/button.css" />
 							</pre>
 						</div>
@ -89,10 +89,10 @@
 						<h2 class="layui-colla-title">显示代码</h2>
 						<div class="layui-colla-content">
 							<pre class="layui-code" lay-encode="true">
-								<button class="pear-btn pear-btn-primary pear-btn-lg"> Button-Lg </button>
-								<button class="pear-btn pear-btn-primary"> Button-Default </button>
-								<button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm </button>
-								<button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs </button>
+								<button class="pear-btn pear-btn-primary pear-btn-lg"> Button-Lg </button>&nbsp;&nbsp;
+								<button class="pear-btn pear-btn-primary"> Button-Default </button>&nbsp;&nbsp;
+								<button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm </button>&nbsp;&nbsp;
+								<button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs </button>&nbsp;&nbsp;
 							</pre>
 						</div>
 					</div>
--- a/view/document/form.html
+++ b/view/document/form.html
@ -7,9 +7,27 @@
 		<link href="../../component/pear/css/pear.css" rel="stylesheet">
 	</head>
 	<body class="pear-container">
-		<div class="layui-row layui-col-space15">
+		<div class="layui-row layui-col-space10">
 			<div class="layui-col-md6">
 				<div class="layui-card">
+					<div class="layui-card-header">开发环境</div>
+					<div class="layui-card-body">
+						Pear 基于 From 的基础上扩展样式
+					</div>
+				</div>
+				<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">
+								<link rel="stylesheet" href="component/pear/css/pear.css" />
+								 或
+								<link rel="stylesheet" href="component/pear/css/pear-module/form.css" />
+							</pre>
+						</div>
+					</div>
+				</div>
+				<div class="layui-card" style="margin-top: 10px;">
 					<div class="layui-card-header">输入框</div>
 					<div class="layui-card-body layui-row layui-col-space10">
 						<div class="layui-col-md12">
@ -37,7 +55,7 @@

 					</div>
 				</div>
-<div class="layui-card layui-form" lay-filter="component-form-element">
+				<div class="layui-card layui-form" lay-filter="component-form-element">
 					<div class="layui-card-header">下拉选择框</div>
 					<div class="layui-card-body layui-row layui-col-space10">
 						<div class="layui-col-md6">
@ -225,8 +243,11 @@
 		<script src="../../component/layui/layui.js"></script>
 		<script src="../../component/pear/pear.js"></script>
 		<script>
-			layui.use(['form'], function() {
+			layui.use(['form','element','code'], function() {
 				var form = layui.form;
+				var element = layui.element;
+				
+				layui.code();

 			});
 		</script>
--- a/view/document/tag.html
+++ b/view/document/tag.html
@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>layui</title>
+		<meta name="renderer" content="webkit">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
+	</head>
+	<body class="pear-container">
+		<div class="layui-row layui-col-space10">
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">开发环境</div>
+					<div class="layui-card-body">
+							Tag 标签组件
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">默认风格</div>
+					<div class="layui-card-body">
+						<div class="layui-btn-container tag">
+							<button lay-id="11" type="button" class="tag-item">网站设置</button>
+							<button lay-id="22" type="button" class="tag-item">用户管理</button>
+							<button lay-id="33" type="button" class="tag-item">权限分配</button>
+							<button lay-id="44" type="button" class="tag-item">商品管理</button>
+							<button lay-id="55" type="button" class="tag-item">订单管理</button>
+						</div>
+					</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">
+								<link rel="stylesheet" href="component/pear/css/pear.css" />
+								 并
+								<script src="component/layui/layui.js"></script>
+								 并
+								<script src="component/pear/pear.js"></script>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">主题风格</div>
+					<div class="layui-card-body">
+						<div class="layui-btn-container tag">
+							<button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
+							<button lay-id="22" type="button" class="tag-item">用户管理</button>
+							<button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
+							<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">动态操作</div>
+					<div class="layui-card-body">
+						<div class="layui-btn-container tag" lay-filter="demo" lay-allowclose="true" lay-newTag="true">
+							<button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
+							<button lay-id="22" type="button" class="tag-item">用户管理</button>
+							<button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
+							<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
+						</div>
+						<div class="site-demo-button" style="margin-bottom: 0;">
+							<button class="pear-btn pear-btn-primary site-demo-active" data-type="tagAdd">新增Tag项</button>
+							<button class="pear-btn pear-btn-primary site-demo-active" data-type="tagDelete">删除：商品管理</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">圆角风格</div>
+					<div class="layui-card-body">
+						<div class="layui-btn-container tag" lay-filter="test" lay-newTag="true">
+							<button lay-id="11" type="button" class="tag-item">网站设置</button>
+							<button lay-id="22" type="button" class="tag-item">用户管理</button>
+							<button lay-id="33" type="button" class="tag-item">权限分配</button>
+							<button lay-id="44" type="button" class="tag-item">商品管理</button>
+							<button lay-id="55" type="button" class="tag-item">订单管理</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">删除功能</div>
+					<div class="layui-card-body">
+						<div class="layui-btn-container tag" lay-allowclose="true">
+							<button lay-id="11" type="button" class="tag-item tag-item-danger">网站设置</button>
+							<button lay-id="22" type="button" class="tag-item tag-item-danger">用户管理</button>
+							<button lay-id="33" type="button" class="tag-item tag-item-danger">权限分配</button>
+							<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
+							<button lay-id="55" type="button" class="tag-item tag-item-danger">订单管理</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">新建功能</div>
+					<div class="layui-card-body">
+						<div class="layui-btn-container tag" lay-newTag="true">
+							<button lay-id="11" type="button" class="tag-item">网站设置</button>
+							<button lay-id="22" type="button" class="tag-item">用户管理</button>
+							<button lay-id="33" type="button" class="tag-item">权限分配</button>
+							<button lay-id="44" type="button" class="tag-item">商品管理</button>
+							<button lay-id="55" type="button" class="tag-item">订单管理</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['tag','code','element'], function() {
+				var $ = layui.jquery,
+					tag = layui.tag; //Tag的切换功能，切换事件监听等，需要依赖tag模块
+
+                layui.code();
+				
+				//全局设置
+				/*tag.set({
+				  likeHref: 'modules/tag.css', //tag.css所在的路径
+				  skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius',//标签样式
+				  tagText: '添加标签' //标签添加按钮提示文本
+				});*/
+
+				tag.render("test", {
+					skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius', //标签样式
+					tagText: '<i class="layui-icon layui-icon-add-1"></i>添加标签' //标签添加按钮提示文本
+				});
+
+				var active = {
+					tagAdd: function() {
+						//新增一个Tag项
+						tag.add('demo', {
+							text: '新选项' + (Math.random() * 1000 | 0) //用于演示
+								,
+							id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
+						})
+					},
+					tagDelete: function(othis) {
+						//删除指定Tag项
+						tag.delete('demo', '44'); //删除：“商品管理”
+						othis.addClass('layui-btn-disabled');
+					}
+				};
+
+				$('.site-demo-active').on('click', function() {
+					var othis = $(this),
+						type = othis.data('type');
+					active[type] ? active[type].call(this, othis) : '';
+				});
+
+				tag.on('click(demo)', function(data) {
+					console.log('点击');
+					console.log(this); //当前Tag标签所在的原始DOM元素
+					console.log(data.index); //得到当前Tag的所在下标
+					console.log(data.elem); //得到当前的Tag大容器
+				});
+
+				tag.on('add(demo)', function(data) {
+					console.log('新增');
+					console.log(this); //当前Tag标签所在的原始DOM元素
+					console.log(data.index); //得到当前Tag的所在下标
+					console.log(data.elem); //得到当前的Tag大容器
+					console.log(data.othis); //得到新增的DOM对象
+					//return false; //返回false 取消新增操作； 同from表达提交事件。
+				});
+
+				tag.on('delete(demo)', function(data) {
+					console.log('删除');
+					console.log(this); //当前Tag标签所在的原始DOM元素
+					console.log(data.index); //得到当前Tag的所在下标
+					console.log(data.elem); //得到当前的Tag大容器
+				});
+			});
+		</script>
+	</body>
+</html>