v1.1.2

CHANGELOG.md

@@ -1,5 +1,17 @@
 ## 更新日志
 
+### 1.1.2
+
+*2019-11-27*
+
+#### Bug fixes
+
+- 修复tree模式下， 第一级为叶子节点的排版问题
+- 修复tree模式鼠标hover无背景
+- 修复鼠标hover时使用隐藏图标的方式选中状态下背景色异常
+- 修改IE下的bug
+
+
 ### 1.1.1
 
 *2019-11-26*

docs/mds/ZTEST.md

@@ -16,17 +16,10 @@ var demo1 = xmSelect.render({
 		showFolderIcon: true,
 		showLine: true,
 		indent: 20,
-		expandedKeys: [ -1 ],
-		lazy: false,
-		load: function(item, cb){
-			setTimeout(function(){
-				var name = item.name + 1;
-				cb([
-					{name: item.name + 1, value: item.value + '1', children: [] },
-					{name: item.name + 2, value: item.value + '2' },
-				])
-			}, 500)
-		},
+		expandedKeys: [ -1, -2 ],
+	},
+	model: {
+		icon: 'hidden'
 	},
 	toolbar: {
 		show: true
@@ -34,18 +27,46 @@ var demo1 = xmSelect.render({
 	height: 'auto',
 	data(){
 		return [
-			{name: '销售员', value: -1, selected: true},
-			{name: '奖品', value: -2, children: [
-				{name: '奖品3', value: -3, children: [
-					{name: '苹果3', value: 14, selected: false},
-					{name: '香蕉3', value: 15},
-					{name: '葡萄3', value: 16},
-				]},
-				{name: '苹果2', value: 4, selected: false, disabled: true},
-				{name: '香蕉2', value: 5},
-				{name: '葡萄2', value: 6},
+			{name: '北京市', value: -1, children: [
+				{name: '朝阳区', value: 1},
+				{name: '海淀区', value: 2},
+				{name: '通州区', value: 3},
+			]},
+			{name: '河北省', value: -2, children: [
+				{name: '廊坊市', value: 4},
+				{name: '石家庄', value: 5},
+				{name: '邯郸市', value: 6},
 			]},
 		]
+	},
+	on: function(data){
+		var arr = data.arr;
+		var item = data.change[0];
+		var isAdd = data.isAdd;
+		
+		if(isAdd){
+			//检查是否有父节点
+			var parent = item.__node.parent;
+			if(parent){//有父节点，选中的是子节点，移除父节点的选中状态
+				var index = arr.findIndex(function(option){
+					return option.value === parent.value
+				})
+				if(index != -1){
+					arr.splice(index, 1)
+				}
+			}else{//无父节点，选中的是父节点，移除子节点的选中状态
+				var child = item.children;
+				child.forEach(function(childItem){
+					var index = arr.findIndex(function(option){
+						return option.value === childItem.value
+					})
+					if(index != -1){
+						arr.splice(index, 1)
+					}
+				})
+			}
+			return arr;
+		}
 	}
 })
 </script>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "xm-select",
-	"version": "1.1.1",
+	"version": "1.1.2",
 	"description": "始于Layui的select多选解决方案",
 	"main": "index.js",
 	"scripts": {

src/common/expand.js

@@ -97,12 +97,3 @@ if (!Array.prototype.findIndex) {
 		return -1;
 	};
 }
-
-//拓展Object values方法
-if (!Object.values) {
-	Object.prototype.values = function(obj) {
-		return Object.keys(obj).map(function(e) {
-			return obj[e];
-		});
-	};
-}

src/components/framework/index.js

@@ -39,7 +39,10 @@ class Framework extends Component{
 			let dataObj = {};
 			let flatData = [];
 			this.load(data, dataObj, flatData);
-			sels = this.exchangeValue(initValue ? initValue :  Object.values(dataObj).filter(item => item[prop.selected] === true), dataObj)
+			sels = this.exchangeValue(initValue ? initValue :  Object.keys(dataObj).filter(key => {
+				let item = dataObj[key]
+				return item[prop.selected] === true
+			}), dataObj)
 			if(radio && sels.length > 1){
 				sels = sels.slice(0, 1)
 			}

src/components/plugin/general.js

@@ -407,6 +407,12 @@ class General extends Component{
 				borderColor: theme.color,
 			};
 			const itemStyle = {}
+			
+			//处理键盘的选择背景色
+			if(item[value] === this.state.val){
+				itemStyle.backgroundColor = theme.hover
+			}
+			//不显示图标时候的背景色处理
 			if(!showIcon && selected){
 				itemStyle.backgroundColor = theme.color;
 				item[disabled] && (itemStyle.backgroundColor = '#C2C2C2');
@@ -414,10 +420,6 @@ class General extends Component{
 			const className = ['xm-option', (item[disabled] ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' ');
 			const iconClass = ['xm-option-icon xm-iconfont', radio ? 'xm-icon-danx' : 'xm-icon-duox'].join(' ');
 
-			//处理键盘的选择背景色
-			if(item[value] === this.state.val){
-				itemStyle.backgroundColor = theme.hover
-			}
 			//处理鼠标选择的背景色
 			const hoverChange = e => {
 				if(e.type === 'mouseenter'){

src/components/plugin/tree.js

@@ -52,6 +52,7 @@ class Tree extends Component{
 
 			//不是父节点的不需要处理
 			if(!tree.lazy && !item[prop.optgroup]){
+				this.props.ck(item, selected, disabled);
 				return
 			}
 
@@ -198,7 +199,15 @@ class Tree extends Component{
 			} : {
 				borderColor: theme.color,
 			};
+
 			const itemStyle = { paddingLeft: indent + 'px' }
+
+			//处理键盘的选择背景色
+			if(item[value] === this.state.val){
+				itemStyle.backgroundColor = theme.hover
+			}
+
+			//隐藏图标的处理
 			if(!showIcon && selected){
 				itemStyle.backgroundColor = theme.color;
 				dis && (itemStyle.backgroundColor = '#C2C2C2');
@@ -218,10 +227,7 @@ class Tree extends Component{
 				}
 			}
 
-			//处理键盘的选择背景色
-			if(item[value] === this.state.val){
-				itemStyle.backgroundColor = theme.hover
-			}
+
 			//处理鼠标选择的背景色
 			const hoverChange = e => {
 				if(e.type === 'mouseenter'){

src/main.js

@@ -8,7 +8,12 @@ const moduleName = 'xmSelect';
 /**
  * 监听全页面点击关闭事件
  */
-window.addEventListener('click', () => Object.values(datas).forEach(item => item && item.closed && item.closed()))
+window.addEventListener('click', () => {
+	Object.keys(datas).forEach(key => {
+		let item = datas[key]
+		item && item.closed && item.closed()
+	})
+})
 
 
 if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {