修复initValue失效

CHANGELOG.md

@@ -1,5 +1,15 @@
 ## 更新日志
 
+### 1.1.0.Beta-3
+
+*2019-11-21*
+
+#### Bug fixes
+
+- 修改`initValue`失效的问题
+- 调整拓展中心下拉日期多选的样式
+
+
 ### 1.1.0.Beta-2
 
 *2019-11-20*

docs/assets/common.less

@@ -92,7 +92,7 @@ button, input, select, textarea {
 .page-container {
 	padding-top: 55px;
 
-	h2 {
+	h2:not(.layui-colla-title) {
 		font-size: 28px;
 		color: #1f2d3d;
 		margin: 0;
@@ -244,11 +244,20 @@ button, input, select, textarea {
     }
 }
 
-.demo-ZP03{
+.demo-ZP03, .demo-ZP04{
-	.layui-laydate-footer{
-		padding: 0;
-	}
 	xm-select .scroll-body{
-		text-align: center;
+		margin-top: -5px;
+	}
+	xm-select .xm-body{
+		padding: 0;
+		border: none;
+		background-color: usnet;
+		box-shadow: none;
+	}
+}
+.demo-ZP05{
+	xm-select .scroll-body{
+		padding-left: 10px;
+		overflow: hidden;
 	}
 }

docs/mds/ZP03.md

@@ -5,15 +5,20 @@
 ```
 //css调整部分
 xm-select .scroll-body{
-	text-align: center;
+	margin-top: -5px;
+}
+xm-select .xm-body{
+	padding: 0;
+	border: none;
+	background-color: usnet;
+	box-shadow: none;
 }
-
 ```
 
 :::demo 
 ```html
 
-<div id="demo1" class="xm-select-demo"></div>
+<div id="demo1" style="width: 274px;"></div>
 
 <script>
 var demo1 = xmSelect.render({

docs/mds/ZP04.md

@@ -0,0 +1,74 @@
+## 下拉折叠面板
+
+### layui折叠面板
+
+```
+//css调整部分
+xm-select .scroll-body{
+	margin-top: -5px;
+}
+xm-select .xm-body{
+	padding: 0;
+	border: none;
+	background-color: usnet;
+	box-shadow: none;
+}
+```
+
+:::demo 
+```html
+
+<div id="demo1" style="width: 500px;"></div>
+
+<script>
+
+var list = [
+	{ name: '杜甫', selected: true, content: '杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。' },
+	{ name: '李清照', content: '李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。' },
+	{ name: '鲁迅', content: '鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。' },
+]
+
+var html = list.map(function(item){
+	return `
+		<div class="layui-colla-item">
+			<h2 class="layui-colla-title" value="${item.name}">${ item.name }</h2>
+			<div class="layui-colla-content ${ item.selected && 'layui-show' }">${ item.content }</div>
+		</div>
+	`
+}).join('');
+
+var demo1 = xmSelect.render({
+	el: '#demo1', 
+	content: `
+		<div class="layui-collapse" lay-filter="collapse">
+			${ html }
+		</div>
+	`,
+	height: 'auto',
+	autoRow: true,
+	data: list,
+	prop: { value: 'name' },
+	on: function(data){
+		if(!data.isAdd){
+			var item = data.change[0];
+			document.querySelector(`#demo1 .layui-collapse .layui-colla-title[value="${item.name}"]`).nextElementSibling.classList.remove('layui-show')
+		}
+	}
+})
+
+layui.element.init()
+
+layui.element.on('collapse(collapse)', function(data){
+	let value = data.title.attr('value');
+	if(data.show){
+		demo1.append([ value ])
+	}else{
+		demo1.delete([ value ])
+	}
+});
+
+//这里仅仅提供一个演示, 更多的想法由你自己来创造
+
+</script>
+```
+:::

docs/mds/ZP05.md

@@ -0,0 +1,65 @@
+## 下拉穿梭框
+
+### layui transfer
+
+```
+//css调整部分
+xm-select .scroll-body{
+	padding-left: 10px;
+	overflow: hidden;
+}
+```
+
+:::demo 
+```html
+
+<div id="demo1" style="width: 502px;"></div>
+
+<script>
+
+var list = [
+	{value: "1", title: "李白" },
+	{value: "2", title: "杜甫" },
+	{value: "3", title: "贤心" },
+]
+
+var initValue = ["1"]
+
+var demo1 = xmSelect.render({
+	el: '#demo1', 
+	content: "<div id='transfer'></div>",
+	height: 'auto',
+	autoRow: true,
+	initValue: initValue,
+	data: list,
+	prop: { name: 'title' },
+	on: function(data){
+		if(!data.isAdd){
+			layui.transfer.reload('transfer', {
+				value: demo1.getValue('value')
+			})
+		}
+	}
+})
+
+layui.transfer.render({
+	id: 'transfer',
+	elem: '#transfer',  //绑定元素
+	title: ['候选人', '获奖者'],
+	data: list,
+	value: initValue,
+	onchange: function(data, index){
+		if(index == 0){
+			demo1.append(data)
+		}else{
+			demo1.delete(data)
+		}
+	}
+});
+
+
+//这里仅仅提供一个演示, 更多的想法由你自己来创造
+
+</script>
+```
+:::

docs/router.js

@@ -99,6 +99,8 @@ export default [{
             { path: '/example-plugin/ZP01', name: '下拉自定义', component: importMd('/ZP01') },
             { path: '/example-plugin/ZP02', name: '下拉树 Tree', component: importMd('/ZP02') },
             { path: '/example-plugin/ZP03', name: '下拉日期多选', component: importMd('/ZP03') },
+            { path: '/example-plugin/ZP04', name: '下拉折叠面板', component: importMd('/ZP04') },
+            { path: '/example-plugin/ZP05', name: '下拉穿梭框', component: importMd('/ZP05') },
         ]
 	}, {
 		path: '/question',

src/components/framework/index.js

@@ -34,13 +34,12 @@ class Framework extends Component{
 
 	init(props, refresh){
 		let { data } = props, sels;
-
 		//如果新数据和旧数据不同 或者 强制刷新 才进行数据处理
 		if(refresh){
 			let dataObj = {};
 			let flatData = [];
 			this.load(data, dataObj, flatData);
-			sels = props.initValue ? this.exchangeValue(props.initValue) : Object.values(dataObj).filter(item => item[props.prop.selected] === true).filter(item => item[this.props.prop.optgroup] !== true)
+			sels = props.initValue ? this.exchangeValue(props.initValue, true, dataObj) : Object.values(dataObj).filter(item => item[props.prop.selected] === true).filter(item => item[this.props.prop.optgroup] !== true)
 			this.setState({ sels, dataObj, flatData });
 		}
 
@@ -49,8 +48,8 @@ class Framework extends Component{
 		return sels;
 	}
 
-	exchangeValue(arr, filterGroup = true){
+	exchangeValue(arr, filterGroup = true, dataObj = this.state.dataObj){
-		let list = arr.map(sel => typeof sel === 'object' ? sel : this.state.dataObj[sel]).filter(a => a)
+		let list = arr.map(sel => typeof sel === 'object' ? sel : dataObj[sel]).filter(a => a)
 		filterGroup && (list = list.filter(item => item[this.props.prop.optgroup] !== true))
 		return list;
 	}