修复下拉滚动样式问题

docs/mds/XM27.md

@@ -8,8 +8,8 @@
 xmSelect.render({
 	//...
 	filterable: true,
-	create: function(val){
-		//返回一个创建成功的对象, val是搜索的数据
+	create: function(val, arr){
+		//返回一个创建成功的对象, val是搜索的数据, arr是搜索后的当前页面数据
 		return {
 			name: '创建-' + val,
 			value: val
@@ -26,10 +26,12 @@ xmSelect.render({
 var demo1 = xmSelect.render({
 	el: '#demo1', 
 	filterable: true,
-	create: function(val){
-		return {
-			name: '创建-' + val,
-			value: val
+	create: function(val, arr){
+		if(arr.length === 0){
+			return {
+				name: '创建-' + val,
+				value: val
+			}
 		}
 	},
 	data: [
@@ -55,10 +57,12 @@ var demo1 = xmSelect.render({
 	radio: true,
 	clickClose: true,
 	filterable: true,
-	create: function(val){
-		return {
-			name: '创建-' + val,
-			value: val
+	create: function(val, arr){
+		if(arr.length === 0){
+			return {
+				name: '创建-' + val,
+				value: val
+			}
 		}
 	},
 	model: {

docs/mds/ZTEST.md

@@ -7,11 +7,8 @@
 <script>
 var demo1 = xmSelect.render({
 	el: '#demo1', 
-	model: {
-		type: 'relative',
-	},
 	filterable: true,
-	tree: {
+	cascader: {
 		show: true,
 		showFolderIcon: true,
 		showLine: true,

docs/mds/options.md

@@ -79,9 +79,6 @@
 {name: '自定义', children: [...], click: function(item){
 	alert('自定义的, 想干嘛干嘛');
 }},
-
-
-
 ```
 
 
@@ -150,7 +147,6 @@ model: {
 > 自定义方式
 
 ```
-
 list: [ "ALL", "CLEAR", 
 	{
 		//显示图标, 可以是layui内置的图标, 也可以是自己引入的图标
@@ -165,8 +161,6 @@ list: [ "ALL", "CLEAR",
 		}
 	} 
 ]
-
-
 ```
 
 ### tree

src/components/framework/index.js

@@ -6,6 +6,7 @@ import Label from '../label';
 import General from '../plugin/general';
 import Custom from '../plugin/custom';
 import Tree from '../plugin/tree';
+import Cascader from '../plugin/cascader';
 
 /**
  * 框架渲染类, 渲染基础的外边框 + 属性变化监听
@@ -378,15 +379,15 @@ class Framework extends Component{
 		const bodyProps = {  ...config, data, dataObj, flatData, sels, ck: this.itemClick.bind(this), show, onReset: this.onReset.bind(this) }
 
 		//渲染组件
-		let Body = content ? <Custom { ...bodyProps } /> : tree.show ? <Tree { ...bodyProps } /> : <General { ...bodyProps } />;
-
+		let Body = content ? <Custom { ...bodyProps } /> : tree.show ? <Tree { ...bodyProps } /> : config.cascader.show ? <Cascader { ...bodyProps } /> : <General { ...bodyProps } />;
+		
 		return (
 			<xm-select { ...xmSelectProps } >
 				<input class="xm-select-default" lay-verify={ config.layVerify } lay-verType={ config.layVerType } name={ config.name } value={ sels.map(item => item[prop.value]).join(',') }></input>
 				<i class={ show ? 'xm-icon xm-icon-expand' : 'xm-icon' } />
 				{ sels.length === 0 && <div class="xm-tips">{ config.tips }</div> }
 				<Label { ...labelProps } />
-				<div class={ ['xm-body', config.model.type, show ? '':'dis', ].join(' ') } ref={ ref => this.bodyView = ref}>
+				<div class={ ['xm-body', Body.type.name, config.model.type, show ? '':'dis', ].join(' ') } ref={ ref => this.bodyView = ref}>
 					{ Body }
 				</div>
 				{ disabled && <div class="xm-select-disabled"></div> }
@@ -444,11 +445,11 @@ class Framework extends Component{
 	//此时页面又被重新渲染了
 	componentDidUpdate(){
 		let { direction, model } = this.props;
-		
+
 		if(model.type === 'relative'){
 			return ;
 		}
-		
+
 		let rect = this.base.getBoundingClientRect();
 		if(direction === 'auto'){
 			//用于控制js获取下拉框的高度

src/components/plugin/cascader.js

@@ -0,0 +1,40 @@
+import { h, Component, render } from 'preact'
+
+class Cascader extends Component{
+
+
+	constructor(options){
+		super(options);
+	}
+
+	//组件将要接收新属性
+	componentWillReceiveProps(props){
+
+	}
+
+	//组件将要被挂载
+	componentWillMount(){
+
+	}
+
+	render(config, state) {
+		return (
+			<div class="xm-cascader">
+				
+
+			</div>
+		)
+	}
+
+	//组件完成挂载
+	componentDidMount(){
+
+	}
+
+	//此时页面又被重新渲染了
+	componentDidUpdate(){
+
+	}
+}
+
+export default Cascader;

src/config/options.js

@@ -101,6 +101,11 @@ export default function (lan = 'zn') {
 			lazy: false,
 			//懒加载回调
 			load: null,
+		},
+		//级联结构
+		cascader: {
+			//是否展示级联
+			show: false,
 		},
 		//自定义属性名称
 		prop: {

src/style/index.less

@@ -180,7 +180,8 @@ xm-select{
 		animation-fill-mode: both;
 
 		.scroll-body{
-			overflow: hidden auto;
+			overflow-x: hidden;
+			overflow-y: auto;
 
 			.scrollBorder() {
 				-webkit-border-radius: 2em;
@@ -426,6 +427,24 @@ xm-select{
 			width: 0 !important;
 		}
 
+		&.Cascader{
+			border: none;
+			background-color: transparent;
+			box-shadow: none;
+			width: unset;
+			min-width: unset;
+			padding: 0;
+			margin-left: -1px;
+
+			.xm-cascader{
+				border: @border;
+				border-radius: 2px;
+				box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
+				background-color: #FFF;
+				min-width: 100px;
+			}
+		}
+
 	}
 
 	.xm-input{