v1.1.4

CHANGELOG.md

@@ -1,5 +1,19 @@
 ## 更新日志
 
+### 1.1.4
+
+*2019-12-09*
+
+#### 新增
+
+- 支持表单的重置按钮
+
+#### Bug fixes
+
+- 调整表单验证时, 如果不满足条件, 边框变色
+- 修复radio模式下, 工具条操作全选的问题
+
+
 ### 1.1.3
 
 *2019-12-04*

docs/mds/XM09.md

@@ -11,6 +11,7 @@
 var demo1 = xmSelect.render({
 	el: '#demo1', 
 	radio: true,
+	toolbar: {show: true},
 	data: [
 		{name: '张三', value: 1},
 		{name: '李四', value: 2},

docs/mds/ZM02.md

@@ -40,6 +40,7 @@ var demo1 = xmSelect.render({
 <form class="layui-form">
 	<div id="demo2" class="xm-select-demo"></div>
 	<button class="btn" type="submit" lay-submit>提交</button>
+	<button class="btn" type="reset">重置</button>
 </form>
 
 <script>
@@ -47,7 +48,7 @@ var demo2 = xmSelect.render({
 	el: '#demo2', 
 	name: 'lalalalalala',
 	layVerify: 'required',
-	layVerType: 'tips',
+	layVerType: 'msg',
 	data: [
 		{name: '张三', value: 1},
 		{name: '李四', value: 2},

docs/mds/ZTEST.md

@@ -9,7 +9,7 @@ var demo1 = xmSelect.render({
 	el: '#demo1', 
 	paging: true,
 	pageSize: 2,
-	autoRow: true,
+	autoRow: true,
 	tree: {
 		strict: false,
 		show: true,
@@ -38,7 +38,10 @@ var demo1 = xmSelect.render({
 		show: true
 	},
 	height: 'auto',
-	initValue: [-1, 1],
+	initValue: [],
+	on: function(a){
+		console.log(this)
+	}.bind('#demo1'),
 	data(){
 		return [
 			{name: '北京市时代峰峻莱克斯顿荆防颗粒受到了开发建设的路口附近', value: -1, children: [
@@ -53,8 +56,6 @@ var demo1 = xmSelect.render({
 			]},
 		]
 	},
-	on: function(data){
-	}
 })
 </script>
 ```

package.json

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

src/components/framework/index.js

@@ -394,12 +394,48 @@ class Framework extends Component{
 	componentDidMount(){
 		this.prepare = true;
 
+		//监听键盘事件
 		this.base.addEventListener('keydown', e => {
 			let keyCode = e.keyCode;
 			if(keyCode === 13){
 				this.onClick()
 			}
 		});
+
+		//表单验证
+		this.input = this.base.querySelector('.xm-select-default');
+		//监听class的变化, 然后进行边框变色处理, 或者更多的处理
+		let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
+		MutationObserver && new MutationObserver(mutations => {
+			mutations.forEach(mutation => {
+				if (mutation.type == "attributes") {
+					let attr = mutation.attributeName;
+					if(attr === 'class'){
+						if(this.input.className.indexOf('layui-form-danger') !== -1){
+							this.input.className = 'xm-select-default';
+							this.base.style.borderColor = this.props.theme.maxColor;
+							//这里可以自己新增一个回调, 也许看到源码的你能够看到
+							// this.base.scrollIntoView({ behavior: "smooth" });
+						}
+					}
+					console.log(attr);
+				}
+			});
+		}).observe(this.input, { attributes: true });
+
+		//监听form的重置按钮
+		let dom = this.base;
+		while(dom){
+			dom = dom.parentElement;
+			if(dom.tagName === 'FORM'){
+				let resetBtn = dom.querySelector('button[type="reset"]')
+				resetBtn && resetBtn.addEventListener('click', e => {
+					this.init(this.props, true);
+				});
+				break;
+			}
+		}
+
 	}
 
 	//此时页面又被重新渲染了

src/components/plugin/general.js

@@ -355,7 +355,7 @@ class General extends Component{
 						info = { icon: 'xm-iconfont xm-icon-quanxuan', name, method: (pageData) => {
 							const { optgroup, disabled } = prop;
 							const list = pageData.filter(item => !item[optgroup]).filter(item => !item[disabled])
-							this.props.onReset(mergeArr(list, sels, prop), 'sels');
+							this.props.onReset(radio ? list.slice(0, 1) : mergeArr(list, sels, prop), 'sels');
 						} };
 					}else if(tool === 'CLEAR'){
 						info = { icon: 'xm-iconfont xm-icon-qingkong', name, method: (pageData) => {
@@ -375,7 +375,7 @@ class General extends Component{
 									list.splice(index, 1);
 								}
 							})
-							this.props.onReset(mergeArr(list, selectedList, prop), 'sels');
+							this.props.onReset(radio ? selectedList.slice(0, 1) : mergeArr(list, selectedList, prop), 'sels');
 						} };
 					}else {
 						info = tool
@@ -407,7 +407,7 @@ class General extends Component{
 				borderColor: theme.color,
 			};
 			const itemStyle = {}
-			
+
 			//处理键盘的选择背景色
 			if(item[value] === this.state.val){
 				itemStyle.backgroundColor = theme.hover