init

2019-04-30 11:07:58 +08:00 · 2019-04-30 11:07:58 +08:00 · f27ae9ba9f
commit f27ae9ba9f
parent 5dd011eaec
25 changed files with 1786 additions and 78 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pragma":"h" }]
+  ]
+}
--- a/.gitignore
+++ b/.gitignore
@ -1,26 +1,3 @@
-# General
 .DS_Store
-.AppleDouble
-.LSOverride
-
-# Icon must end with two \r
-Icon
-
-# Thumbnails
-._*
-
-# Files that might appear in the root of a volume
-.DocumentRevisions-V100
-.fseventsd
-.Spotlight-V100
-.TemporaryItems
-.Trashes
-.VolumeIcon.icns
-.com.apple.timemachine.donotpresent
-
-# Directories potentially created on remote AFP share
-.AppleDB
-.AppleDesktop
-Network Trash Folder
-Temporary Items
-.apdisk
+node_modules/*
+yarn.lock
--- a/2
+++ b/2
@ -186,7 +186,7 @@
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

-   Copyright [yyyy] [name of copyright owner]
+   Copyright [2019] [maplemei@aliyun.com]

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
--- a/README.en.md
+++ b/README.en.md
@ -3,34 +3,3 @@
 #### Description
 基于Layui, 下拉选择框的多选解决方案

-#### Software Architecture
-Software architecture description
-
-#### Installation
-
-1. xxxx
-2. xxxx
-3. xxxx
-
-#### Instructions
-
-1. xxxx
-2. xxxx
-3. xxxx
-
-#### Contribution
-
-1. Fork the repository
-2. Create Feat_xxx branch
-3. Commit your code
-4. Create Pull Request
-
-
-#### Gitee Feature
-
-1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
-2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
-3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
-4. The most valuable open source project [GVP](https://gitee.com/gvp)
-5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
-6. The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
--- a/README.md
+++ b/README.md
@ -4,34 +4,335 @@
 基于Layui, 下拉选择框的多选解决方案

 #### 软件架构
-软件架构说明
-
+1. 引入第三方[preact](https://preactjs.com/)库, 利用jsx渲染页面结构
+2. 使用[webpack](https://www.webpackjs.com/)进行打包

 #### 安装教程
-
-1. xxxx
-2. xxxx
-3. xxxx
+```
+1. git clone https://gitee.com/maplemei/xm-select.git
+2. cd xm-select
+3. yarn 或者 npm install
+```

 #### 使用说明

-1. xxxx
-2. xxxx
-3. xxxx
+> 历史版本

-#### 参与贡献
+[formSelectes](https://github.com/hnzzmsf/layui-formSelects)

-1. Fork 本仓库
-2. 新建 Feat_xxx 分支
-3. 提交代码
-4. 新建 Pull Request
+> 联系方式 
+
+QQ群: 769620939
+
+> 默认配置项
+
+```
+{
+	//多选数据
+	data: [],
+	//默认选中数据, 优先级大于selected
+	initValue: null,
+	//默认提示
+	tips: '请选择', //please selected
+	//空数据提示
+	empty: '暂无数据', //no data
+	//自定义属性名称
+	prop: {
+		name: 'name',
+		value: 'value',
+		selected: 'selected',
+		disabled: 'disabled',
+	},
+	//主题配置
+	theme: {
+		color: '#009688',
+	},
+	//模型
+	model: {
+		label: {
+			type: 'block',
+			text: {
+				left: '',
+				right: '',
+				separator: ', ',
+			},
+			block: {
+				showCount: 0,
+				showIcon: true,
+			},
+			count: {
+				template(data, sels){
+					return "已选中 " + sels.length + " 项, 共 " + data.length + " 项"
+				}
+			},
+		},
+	},
+	// 展开下拉框, return false; 代表组件受控
+	show(){
+		
+	},
+	// 隐藏下拉框, return false; 代表组件受控
+	hidn(){
+		
+	},
+	// 模板组成, 当前option数据, 已经选中的数据, name, value  
+	template(item, sels, name, value){
+		return name;
+	}
+}
+```
+
+> 默认方法
+
+```
+//更新组件
+xmSelect: update(options)
+
+//重置组件
+xmSelect: reset()
+
+//重新渲染
+xmSelect: render(options)
+
+//主动关闭
+xmSelect: opened()
+
+//主动关闭
+xmSelect: closed()
+
+//获取已选中数据
+xmSelect: getValue()
+
+//设置选中数据, array: 选中数据, show: 是否展开下拉框
+xmSelect: setValue(array, show)
+```
+
+#### 示例
+
+```
+<h3>这是一个多选</h3>
+<div id="demo1"></div>
+
+<h3>这是一个国际版多选</h3>
+<div id="demo2"></div>
+
+<h3>有基础数据</h3>
+<div id="demo3"></div>
+
+<h3>有选中, 禁用的</h3>
+<div id="demo4"></div>
+
+<h3>自定义key</h3>
+<div id="demo5"></div>
+
+<h3>使用template自己构建选项1</h3>
+<div id="demo6"></div>
+
+<h3>使用template自己构建选项2</h3>
+<div id="demo7"></div>
+
+<h3>简单的展示形式1</h3>
+<div id="demo8"></div>
+
+<h3>简单的展示形式2</h3>
+<div id="demo9"></div>
+
+<h3>自定义展示</h3>
+<div id="demo10"></div>
+
+<h3>多余的用 +隐藏</h3>
+<div id="demo11"></div>
+
+<h3>不显示删除图标</h3>
+<div id="demo12"></div>
+
+<h3>换一个主题</h3>
+<div id="demo13"></div>


-#### 码云特技
+<script src="../dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
+<script type="text/javascript">
+	
+	var demo1 = xmSelect.render({
+		el: '#demo1', 
+		language: 'zn',
+		isShow: true,
+	})

-1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
-2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com)
-3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
-4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
-5. 码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
-6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
+	var demo2 = xmSelect.render({
+		el: '#demo2', 
+		language: 'en'
+	})
+
+	var demo3 = xmSelect.render({
+		el: '#demo3', 
+		data: [
+			{name: '水果', value: 1},
+			{name: '蔬菜', value: 2},
+			{name: '桌子', value: 3},
+		]
+	})
+
+	var demo4 = xmSelect.render({
+		el: '#demo4', 
+		data: [
+			{name: '水果', value: 1, selected: true, disabled: true},
+			{name: '蔬菜', value: 2, selected: true},
+			{name: '桌子', value: 3, disabled: true},
+			{name: '北京', value: 4},
+		]
+	})
+
+	var demo5 = xmSelect.render({
+		el: '#demo5', 
+		data: [
+			{label: '水果', val: 1, sel: true, dis: true},
+			{label: '蔬菜', val: 2, sel: true},
+			{label: '桌子', val: 3, dis: true},
+			{label: '北京', val: 4},
+		],
+		prop: {
+			name: 'label',
+			value: 'val',
+			selected: 'sel',
+			disabled: 'dis'
+		}
+	})
+
+	var demo6 = xmSelect.render({
+		el: '#demo6', 
+		data: [
+			{name: '水果', value: 1, selected: true, disabled: true},
+			{name: '蔬菜', value: 2, selected: true},
+			{name: '桌子', value: 3, disabled: true},
+			{name: '北京', value: 4},
+		],
+		template: function(item, sels, name, value){
+			return name  + '<span style="color: red; margin-left: 20px;">'+value+'</span>' 
+		}
+	})
+
+	var demo7 = xmSelect.render({
+		el: '#demo7', 
+		data: [
+			{name: '水果', value: 1, selected: true, disabled: true},
+			{name: '蔬菜', value: 2, selected: true},
+			{name: '桌子', value: 3, disabled: true},
+			{name: '北京', value: 4},
+		],
+		template: function(item, sels, name, value){
+			return name  + '<span style="position: absolute; right: 10px; color: red">'+value+'</span>' 
+		}
+	})
+
+	var demo8 = xmSelect.render({
+		el: '#demo8', 
+		data: [
+			{name: '水果', value: 1, selected: true, disabled: true},
+			{name: '蔬菜', value: 2, selected: true},
+			{name: '桌子', value: 3, disabled: true},
+			{name: '北京', value: 4},
+		],
+		model: {
+			label: {
+				type: 'text',
+				text: {
+					left: '<',
+					right: '>',
+					separator: ', ',
+				},
+			}
+		}
+	})
+
+	var demo9 = xmSelect.render({
+		el: '#demo9', 
+		data: [
+			{name: '水果', value: 1, selected: true, disabled: true},
+			{name: '蔬菜', value: 2, selected: true},
+			{name: '桌子', value: 3, disabled: true},
+			{name: '北京', value: 4},
+		],
+		model: {
+			label: {
+				type: 'count',
+				count: {
+					template(data, sels){
+						return "已选中 " + sels.length + " 项, 共 " + data.length + " 项"
+					}
+				}
+			}
+		}
+	})
+
+	var demo10 = xmSelect.render({
+		el: '#demo10', 
+		data: [
+			{name: '水果', value: 1, selected: true, disabled: true},
+			{name: '蔬菜', value: 2, selected: true},
+			{name: '桌子', value: 3, disabled: true},
+			{name: '北京', value: 4},
+		],
+		model: {
+			label: {
+				type: 'count',
+				count: {
+					template(data, sels){
+						return "我是自定义的... 已选中 " + sels.length + " 项, 共 " + data.length + " 项"
+					}
+				}
+			}
+		}
+	})
+
+	var demo11 = xmSelect.render({
+		el: '#demo11', 
+		data: [
+			{name: '水果', value: 1, selected: true, disabled: true},
+			{name: '蔬菜', value: 2, selected: true},
+			{name: '桌子', value: 3, disabled: true},
+			{name: '北京', value: 4},
+		],
+		model: {
+			label: {
+				type: 'block',
+				block: {
+					showCount: 1,
+				}
+			}
+		}
+	})
+
+	var demo12 = xmSelect.render({
+		el: '#demo12', 
+		data: [
+			{name: '水果', value: 1, selected: true, disabled: true},
+			{name: '蔬菜', value: 2, selected: true},
+			{name: '桌子', value: 3, disabled: true},
+			{name: '北京', value: 4},
+		],
+		model: {
+			label: {
+				type: 'block',
+				block: {
+					showCount: 1,
+					showIcon: false,
+				}
+			}
+		}
+	})
+
+	var demo13 = xmSelect.render({
+		el: '#demo13', 
+		data: [
+			{name: '水果', value: 1, selected: true, disabled: true},
+			{name: '蔬菜', value: 2, selected: true},
+			{name: '桌子', value: 3, disabled: true},
+			{name: '北京', value: 4},
+		],
+		theme: {
+			color: 'red',
+		},
+	})
+</script>
+```
--- a/dist/index.html
+++ b/dist/index.html
@ -0,0 +1 @@
+<!DOCTYPE html><html><head><link rel="preload" href="xm-select.js" as="script"><meta charset="utf-8"><title>xm-select</title></head><body><div id="demo1"></div><script type="text/javascript" src="xm-select.js"></script></body></html>
--- a/dist/xm-select.js
+++ b/dist/xm-select.js
--- a/docs/index.html
+++ b/docs/index.html
@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+		<style>
+			body{padding-bottom: 300px;}
+		</style>
+	</head>
+	<body>
+
+		<h3>这是一个多选</h3>
+		<div id="demo1"></div>
+
+		<h3>这是一个国际版多选</h3>
+		<div id="demo2"></div>
+
+		<h3>有基础数据</h3>
+		<div id="demo3"></div>
+
+		<h3>有选中, 禁用的</h3>
+		<div id="demo4"></div>
+
+		<h3>自定义key</h3>
+		<div id="demo5"></div>
+
+		<h3>使用template自己构建选项1</h3>
+		<div id="demo6"></div>
+
+		<h3>使用template自己构建选项2</h3>
+		<div id="demo7"></div>
+
+		<h3>简单的展示形式1</h3>
+		<div id="demo8"></div>
+
+		<h3>简单的展示形式2</h3>
+		<div id="demo9"></div>
+
+		<h3>自定义展示</h3>
+		<div id="demo10"></div>
+
+		<h3>多余的用 +隐藏</h3>
+		<div id="demo11"></div>
+
+		<h3>不显示删除图标</h3>
+		<div id="demo12"></div>
+
+		<h3>换一个主题</h3>
+		<div id="demo13"></div>
+
+		
+		<script src="../dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
+		<script type="text/javascript">
+			
+			var demo1 = xmSelect.render({
+				el: '#demo1', 
+				language: 'zn',
+				isShow: true,
+			})
+
+			var demo2 = xmSelect.render({
+				el: '#demo2', 
+				language: 'en'
+			})
+
+			var demo3 = xmSelect.render({
+				el: '#demo3', 
+				data: [
+					{name: '水果', value: 1},
+					{name: '蔬菜', value: 2},
+					{name: '桌子', value: 3},
+				]
+			})
+
+			var demo4 = xmSelect.render({
+				el: '#demo4', 
+				data: [
+					{name: '水果', value: 1, selected: true, disabled: true},
+					{name: '蔬菜', value: 2, selected: true},
+					{name: '桌子', value: 3, disabled: true},
+					{name: '北京', value: 4},
+				]
+			})
+
+			var demo5 = xmSelect.render({
+				el: '#demo5', 
+				data: [
+					{label: '水果', val: 1, sel: true, dis: true},
+					{label: '蔬菜', val: 2, sel: true},
+					{label: '桌子', val: 3, dis: true},
+					{label: '北京', val: 4},
+				],
+				prop: {
+					name: 'label',
+					value: 'val',
+					selected: 'sel',
+					disabled: 'dis'
+				}
+			})
+
+			var demo6 = xmSelect.render({
+				el: '#demo6', 
+				data: [
+					{name: '水果', value: 1, selected: true, disabled: true},
+					{name: '蔬菜', value: 2, selected: true},
+					{name: '桌子', value: 3, disabled: true},
+					{name: '北京', value: 4},
+				],
+				template: function(item, sels, name, value){
+					return name  + '<span style="color: red; margin-left: 20px;">'+value+'</span>' 
+				}
+			})
+
+			var demo7 = xmSelect.render({
+				el: '#demo7', 
+				data: [
+					{name: '水果', value: 1, selected: true, disabled: true},
+					{name: '蔬菜', value: 2, selected: true},
+					{name: '桌子', value: 3, disabled: true},
+					{name: '北京', value: 4},
+				],
+				template: function(item, sels, name, value){
+					return name  + '<span style="position: absolute; right: 10px; color: red">'+value+'</span>' 
+				}
+			})
+
+			var demo8 = xmSelect.render({
+				el: '#demo8', 
+				data: [
+					{name: '水果', value: 1, selected: true, disabled: true},
+					{name: '蔬菜', value: 2, selected: true},
+					{name: '桌子', value: 3, disabled: true},
+					{name: '北京', value: 4},
+				],
+				model: {
+					label: {
+						type: 'text',
+						text: {
+							left: '<',
+							right: '>',
+							separator: ', ',
+						},
+					}
+				}
+			})
+
+			var demo9 = xmSelect.render({
+				el: '#demo9', 
+				data: [
+					{name: '水果', value: 1, selected: true, disabled: true},
+					{name: '蔬菜', value: 2, selected: true},
+					{name: '桌子', value: 3, disabled: true},
+					{name: '北京', value: 4},
+				],
+				model: {
+					label: {
+						type: 'count',
+						count: {
+							template(data, sels){
+								return "已选中 " + sels.length + " 项, 共 " + data.length + " 项"
+							}
+						}
+					}
+				}
+			})
+
+			var demo10 = xmSelect.render({
+				el: '#demo10', 
+				data: [
+					{name: '水果', value: 1, selected: true, disabled: true},
+					{name: '蔬菜', value: 2, selected: true},
+					{name: '桌子', value: 3, disabled: true},
+					{name: '北京', value: 4},
+				],
+				model: {
+					label: {
+						type: 'count',
+						count: {
+							template(data, sels){
+								return "我是自定义的... 已选中 " + sels.length + " 项, 共 " + data.length + " 项"
+							}
+						}
+					}
+				}
+			})
+
+			var demo11 = xmSelect.render({
+				el: '#demo11', 
+				data: [
+					{name: '水果', value: 1, selected: true, disabled: true},
+					{name: '蔬菜', value: 2, selected: true},
+					{name: '桌子', value: 3, disabled: true},
+					{name: '北京', value: 4},
+				],
+				model: {
+					label: {
+						type: 'block',
+						block: {
+							showCount: 1,
+						}
+					}
+				}
+			})
+
+			var demo12 = xmSelect.render({
+				el: '#demo12', 
+				data: [
+					{name: '水果', value: 1, selected: true, disabled: true},
+					{name: '蔬菜', value: 2, selected: true},
+					{name: '桌子', value: 3, disabled: true},
+					{name: '北京', value: 4},
+				],
+				model: {
+					label: {
+						type: 'block',
+						block: {
+							showCount: 1,
+							showIcon: false,
+						}
+					}
+				}
+			})
+
+			var demo13 = xmSelect.render({
+				el: '#demo13', 
+				data: [
+					{name: '水果', value: 1, selected: true, disabled: true},
+					{name: '蔬菜', value: 2, selected: true},
+					{name: '桌子', value: 3, disabled: true},
+					{name: '北京', value: 4},
+				],
+				theme: {
+					color: 'red',
+				},
+			})
+		</script>
+		
+	</body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,28 @@
+{
+  "name": "xm-select",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "node_modules/.bin/webpack-dev-server",
+    "build": "webpack"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@babel/core": "^7.4.0",
+    "@babel/preset-env": "^7.4.2",
+    "babel-loader": "^8.0.5",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "css-loader": "^2.1.1",
+    "less": "^3.9.0",
+    "less-loader": "^4.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.2.1"
+  },
+  "devDependencies": {
+    "html-webpack-plugin": "^3.2.0"
+  }
+}
--- a/src/components/common/util.js
+++ b/src/components/common/util.js
@ -0,0 +1,59 @@
+/**
+ * 选中dom元素
+ */
+export function selector(el) {
+	return document.querySelector(el);
+}
+
+/**
+ * 警告提示
+ */
+export function warn() {
+	let arr = [];
+	for (var i = 0; i < arguments.length; i++) {
+		arr.push(`${i + 1}. ${arguments[i]}`);
+	}
+	console.warn(arr.join('\n'));
+}
+
+/**
+ * 全局监听点击事件
+ */
+export function listenerClose(data, handler){
+	window.addEventListener('click', (e) => handler(e));
+}
+
+/**
+ * 安全拷贝数据
+ */
+export function safety(data){
+	return JSON.parse(JSON.stringify(data));
+}
+
+/**
+ * 检测对象是否为数组
+ */
+export function isArray(obj){
+	return Object.prototype.toString.call(obj) == "[object Array]";
+}
+
+export function watch(data) {
+	return new Promise((resolve, reject) => {
+		for (let key in data) {
+			let value = data[key];
+			Object.defineProperty(data, key, {
+				configurable: false, // 该状态下的属性描述符不能被修改和删除
+				enumerable: false, // 该状态下的属性描述符中的属性不可被枚举
+				get() {
+					return value;
+				},
+				set(newVal) {
+					if (newVal !== value) {
+						resolve(key, newVal, value);
+						value = newVal;
+					}
+				}
+			});
+		}
+	});
+}
--- a/src/components/config/language/en.js
+++ b/src/components/config/language/en.js
@ -0,0 +1,4 @@
+export default {
+	tips: 'please selected',
+	empty: 'no data',
+}
--- a/src/components/config/language/zn.js
+++ b/src/components/config/language/zn.js
@ -0,0 +1,4 @@
+export default {
+	tips: '请选择',
+	empty: '暂无数据',
+}
--- a/src/components/config/options.js
+++ b/src/components/config/options.js
@ -0,0 +1,67 @@
+import zn from './language/zn'
+import en from './language/en'
+
+const lanSetting = { zn, en }
+
+export default function (lan = 'zn') {
+	let setting = lanSetting[lan] || zn;
+	
+	return {
+		//多选数据
+		data: [],
+		//默认选中数据, 优先级大于selected
+		initValue: null,
+		//默认提示
+		tips: setting.tips,
+		//空数据提示
+		empty: setting.empty,
+		//是否重置多选
+		reset: false,
+		//用来判断多选是否显示
+		isShow: false,
+		//自定义属性名称
+		prop: {
+			name: 'name',
+			value: 'value',
+			selected: 'selected',
+			disabled: 'disabled',
+		},
+		//主题配置
+		theme: {
+			color: '#009688',
+		},
+		//模型
+		model: {
+			label: {
+				type: 'block',
+				text: {
+					left: '',
+					right: '',
+					separator: ', ',
+				},
+				block: {
+					showCount: 0,
+					showIcon: true,
+				},
+				count: {
+					template(data, sels){
+						return `已选中 ${sels.length} 项, 共 ${data.length} 项`
+					}
+				},
+			},
+		},
+		
+		// 展开下拉框
+		show(){
+			
+		},
+		// 隐藏下拉框
+		hidn(){
+			
+		},
+		// 模板组成, 当前option数据, 已经选中的数据, name, value  
+		template(item, sels, name, value){
+			return name;
+		}
+	}
+}
--- a/src/components/core/index.js
+++ b/src/components/core/index.js
@ -0,0 +1,113 @@
+import { h, Component, render } from '@/components/preact'
+import Framework from '@/components/element/framework'
+import { selector, warn, listenerClose, watch, safety, isArray } from '@/components/common/util'
+import defaultOptions from '@/components/config/options'
+
+
+
+/**
+ * 保留初始化的数据
+ */
+const initData = {};
+const data = {};
+const onClose = (el) => Object.keys(data).filter(a => a != el).forEach(el => data[el].closed());
+listenerClose(data, onClose);
+
+/**
+ * 子组件集合
+ */
+const childs = {};
+
+
+/**
+ * 对外提供的处理方法
+ */
+class xmOptions {
+
+	constructor(options) {
+		//保留初始化时的数据
+		initData[options.el] = options;
+		//定义默认值
+		this.options = defaultOptions(options.language);
+		//开始渲染数据
+		this.update(options);
+	}
+	
+	/**
+	 * 更新数据 + 重新渲染
+	 */
+	update(options = {}){
+		//记录最新的配置项
+		this.options = {...this.options, ...options};
+		
+		//如果dom不存在, 则不进行渲染事项
+		let dom = selector(this.options.el);
+		if(!dom){
+			warn(`没有找到渲染对象: ${options.el}, 请检查`)
+			return ;
+		}
+		const onRef = (ref) => childs[this.options.el] = ref;
+		
+		render(<Framework { ...this.options } onClose={ onClose } onRef={ onRef } />, dom);
+		
+		//记录数据
+		data[this.options.el] = this;
+		//返回多选对象
+		return this;
+	}
+	
+	/**
+	 * 重置多选, 回到初始化的状态
+	 */
+	reset(){
+		let initVal = this.options;
+		//设置options的默认数据
+		this.options = defaultOptions(initVal.language);
+		//更新渲染
+		this.update({ ...initData[initVal.el]});
+		//子组件初始化
+		childs[this.options.el].reset();
+		return this;
+	}
+	
+	/**
+	 * 主动打开多选
+	 */
+	opened(){
+		let ref = childs[this.options.el];
+		!ref.state.show && ref.onClick();
+		return this;
+	}
+
+	/**
+	 * 主动关闭多选
+	 */
+	closed(){
+		let ref = childs[this.options.el];
+		ref.state.show && ref.onClick();
+		return this;
+	}
+	
+	/**
+	 * 获取多选选中的数据
+	 */
+	getValue(){
+		return safety(childs[this.options.el].state.sels);
+	}
+	
+	/**
+	 * 设置多选数据
+	 */
+	setValue(sels, show){
+		if(!isArray(sels)){
+			warn('请传入数组结构...')
+			return ;
+		}
+		childs[this.options.el].value(sels, !!show);
+		return this;
+	}
+	
+
+}
+
+export default xmOptions;
--- a/src/components/element/framework.js
+++ b/src/components/element/framework.js
@ -0,0 +1,114 @@
+import { h, Component, render } from '@/components/preact'
+
+//渲染类
+import Tips from './tips';
+import Label from './label';
+import General from './model/general';
+
+/**
+ * 框架渲染类, 渲染基础的外边框 + 属性变化监听
+ */
+class Framework extends Component{
+	
+	constructor(options){
+		super(options);
+		//初始化多选数据
+		this.reset();
+		//回传子组件
+		this.props.onRef(this);
+	}
+	
+	reset(){
+		let selected = this.props.prop.selected;
+		this.value(this.props.initValue ? this.props.initValue : this.props.data.filter(item => item[selected]), false);
+	}
+	
+	value(sels, show){
+		let data = this.props.data;
+		let value = this.props.prop.value;
+		this.setState({ 
+			sels: sels.map(sel => typeof sel === 'object' ? sel[value] : sel).map(val => data.find(item => item[value] == val)).filter(a => a),
+			//下拉框是否展开
+			show
+		})
+	}
+	
+	onClick(e){
+		let show = !this.state.show;
+		
+		if(show){
+			if(this.props.show && this.props.show() == false){
+				return;
+			}
+			//事件互斥原则, 打开一个多选, 关闭其他所有多选
+			this.props.onClose(this.props.el);
+		}else{
+			if(this.props.hidn && this.props.hidn() == false){
+				return;
+			}
+		}
+		
+		this.setState({ show })
+		//阻止其他绑定事件的冒泡
+		e && e.stopPropagation();
+	}
+	
+	componentWillReceiveProps(props){
+		
+	}
+	
+	render({ tips, theme, data, prop, template, model, empty }, { sels, show }) {
+		const borderStyle = { borderColor: theme.color };
+		//最外层边框的属性
+		const xmSelectProps = {
+			style: show ? borderStyle : '',
+			onClick: this.onClick.bind(this)
+		}
+		//右边下拉箭头的变化class
+		const iconClass = show ? 'xm-icon xm-icon-expand' : 'xm-icon';
+		//提示信息的属性
+		const tipsProps = {
+			tips,
+			//没有已选择数据, 则显示提示
+			show: !sels.length
+		}
+		//普通多选数据
+		const valueProp = prop.value;
+		
+		const ck = (item, selected, disabled) => {
+			//如果是禁用状态, 不能进行操作
+			if(disabled) return;
+			
+			//如果现在是选中状态
+			if(selected){
+				let index = sels.findIndex(sel => sel[valueProp] == item[valueProp])
+				if(index != -1){
+					sels.splice(index, 1);
+					this.setState(sels);
+				}
+			}else{
+				this.setState({
+					sels: [...sels, item]
+				})
+			}
+		};
+		
+		const labelProps = {  data, prop, model, theme, sels, ck, title: sels.map(sel => sel[prop.name]).join(',') }
+		const bodyProps = {  data, prop, template, theme, sels, ck, empty }
+		//控制下拉框的显示于隐藏
+		const bodyClass = show ? 'xm-body' : 'xm-body dis';
+		
+		return (
+			<xm-select { ...xmSelectProps }>
+				<i class={ iconClass } />
+				<Tips { ...tipsProps } />
+				<Label { ...labelProps } />
+				<div class={ bodyClass }>
+					<General { ...bodyProps } />
+				</div>
+			</xm-select>
+		);
+	}
+}
+
+export default Framework;
--- a/src/components/element/header.js
+++ b/src/components/element/header.js
--- a/src/components/element/label.js
+++ b/src/components/element/label.js
@ -0,0 +1,76 @@
+import { h, Component, render } from '@/components/preact'
+
+/**
+ * 标签的渲染
+ */
+class Label extends Component{
+	
+	constructor(options){
+		super(options);
+	}
+	
+	iconClick(item, selected, disabled, e){
+		this.props.ck(item, selected, disabled);
+		//阻止父组件上的事件冒泡
+		e.stopPropagation();
+	}
+	
+	render({ data, prop, theme, model, sels }) {
+		//获取变换属性
+		const { name, disabled } = prop;
+		
+		//获取配置项
+		const label = model.label;
+		const type = label.type;
+		const conf = label[type];
+		
+		//渲染结果
+		let html = '';
+		
+		if(type === 'text'){
+			html = sels.map(sel => `${conf.left}${sel[name]}${conf.right}`).join(conf.separator)
+		}else if(type === 'block'){
+			//已选择的数据
+			let arr = [...sels];
+			
+			const style = { backgroundColor: theme.color }
+			//显示的个数
+			const count = conf.showCount <= 0 ? arr.length : conf.showCount;
+
+			html = arr.splice(0, count).map(sel => {
+				const styleProps = { width: conf.showIcon ? 'calc(100% - 20px)' : '100%', }
+				const className = ['xm-label-block', sel[disabled] ? 'disabled':''].join(' ');
+				return (
+					<div class={className} style={ style }>
+						<span style={ styleProps }>{ sel[name] }</span>
+						{ conf.showIcon && <i class="xm-iconfont icon-close" onClick={ this.iconClick.bind(this, sel, true, sel[disabled]) }></i> }
+					</div>
+				)
+			})
+			
+			//剩余没显示的数据
+			if(arr.length){
+				html.push(
+					<div class="xm-label-block" style={ style }>
+						+ { arr.length }
+					</div>
+				)
+			}
+		}else{
+			if(sels.length && conf && conf.template){
+				html = conf.template(data, sels);
+			}else{
+				html = sels.map(sel => sel[name]).join(',')
+			}
+		}
+		
+		
+		return (
+			<div class="xm-label">
+				{ html }
+			</div>
+		)
+	}
+}
+
+export default Label;
--- a/src/components/element/model/general.js
+++ b/src/components/element/model/general.js
@ -0,0 +1,51 @@
+import { h, Component, render } from '@/components/preact'
+
+/**
+ * 普通的多选渲染
+ */
+class General extends Component{
+	
+	constructor(options){
+		super(options);
+	}
+	
+	optionClick(item, selected, disabled, e){
+		this.props.ck(item, selected, disabled);
+		//阻止父组件上的事件冒泡
+		e.stopPropagation();
+	}
+	
+	render({ data, prop, template, theme, sels, empty }) {
+		
+		const { name, value, disabled } = prop;
+		
+		const arr = data.map(item => {
+			
+			const selected = !!sels.find(sel => sel[value] == item[value])
+			const iconStyle = { color: selected ? theme.color : '' }
+			// const className = 'xm-option' + (item.disabled ? ' disabled' : '');
+			const className = ['xm-option', (item[disabled] ? ' disabled' : ''), (selected ? ' selected' : '')].join(' ');
+			
+			return (
+				<div class={className} value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled]) }>
+					<div class="xm-option-icon" style={ { borderColor: theme.color, } }>
+						<i class="xm-iconfont icon-duox" style={ iconStyle }></i>
+					</div>
+					<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template(item, sels, item[name], item[value]) }}></div>
+				</div>
+			)
+		}) 
+		
+		if(!data.length){
+			arr.push(
+				<div class="xm-select-empty">{ empty }</div>
+			)
+		}
+		
+		return (
+			<div> { arr } </div>
+		)
+	}
+}
+
+export default General;
--- a/src/components/element/tips.js
+++ b/src/components/element/tips.js
@ -0,0 +1,20 @@
+import { h, Component, render } from '@/components/preact'
+
+/**
+ * 默认提示
+ */
+class Tips extends Component{
+	
+	constructor(options){
+		super(options);
+	}
+	
+	render({ tips, show }) {
+		const tipsClass = show ? 'xm-tips' : 'xm-tips dis';
+		return (
+			<div class={ tipsClass }>{ tips }</div>
+		)
+	}
+}
+
+export default Tips;
--- a/src/components/preact/index.js
+++ b/src/components/preact/index.js
@ -0,0 +1,311 @@
+var e = function() {},
+	t = {},
+	n = [],
+	o = [];
+
+function r(t, r) {
+	var i, l, a, s, p = arguments,
+		u = o;
+	for (s = arguments.length; s-- > 2;) n.push(p[s]);
+	for (r && null != r.children && (n.length || n.push(r.children), delete r.children); n.length;)
+		if ((l = n.pop()) && void 0 !== l.pop)
+			for (s = l.length; s--;) n.push(l[s]);
+		else "boolean" == typeof l && (l = null), (a = "function" != typeof t) && (null == l ? l = "" : "number" == typeof l ?
+				l = String(l) : "string" != typeof l && (a = !1)), a && i ? u[u.length - 1] += l : u === o ? u = [l] : u.push(l), i =
+			a;
+	var c = new e;
+	return c.nodeName = t, c.children = u, c.attributes = null == r ? void 0 : r, c.key = null == r ? void 0 : r.key, c
+}
+
+function i(e, t) {
+	for (var n in t) e[n] = t[n];
+	return e
+}
+
+function l(e, t) {
+	null != e && ("function" == typeof e ? e(t) : e.current = t)
+}
+var a = "function" == typeof Promise ? Promise.resolve().then.bind(Promise.resolve()) : setTimeout,
+	s = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,
+	p = [];
+
+function u(e) {
+	!e._dirty && (e._dirty = !0) && 1 == p.push(e) && a(c)
+}
+
+function c() {
+	for (var e; e = p.pop();) e._dirty && U(e)
+}
+
+function f(e, t) {
+	return e.normalizedNodeName === t || e.nodeName.toLowerCase() === t.toLowerCase()
+}
+
+function d(e) {
+	var t = i({}, e.attributes);
+	t.children = e.children;
+	var n = e.nodeName.defaultProps;
+	if (void 0 !== n)
+		for (var o in n) void 0 === t[o] && (t[o] = n[o]);
+	return t
+}
+
+function v(e) {
+	var t = e.parentNode;
+	t && t.removeChild(e)
+}
+
+function h(e, t, n, o, r) {
+	if ("className" === t && (t = "class"), "key" === t);
+	else if ("ref" === t) l(n, null), l(o, e);
+	else if ("class" !== t || r)
+		if ("style" === t) {
+			if (o && "string" != typeof o && "string" != typeof n || (e.style.cssText = o || ""), o && "object" == typeof o) {
+				if ("string" != typeof n)
+					for (var i in n) i in o || (e.style[i] = "");
+				for (var i in o) e.style[i] = "number" == typeof o[i] && !1 === s.test(i) ? o[i] + "px" : o[i]
+			}
+		} else if ("dangerouslySetInnerHTML" === t) o && (e.innerHTML = o.__html || "");
+	else if ("o" == t[0] && "n" == t[1]) {
+		var a = t !== (t = t.replace(/Capture$/, ""));
+		t = t.toLowerCase().substring(2), o ? n || e.addEventListener(t, m, a) : e.removeEventListener(t, m, a), (e._listeners ||
+			(e._listeners = {}))[t] = o
+	} else if ("list" !== t && "type" !== t && !r && t in e) {
+		try {
+			e[t] = null == o ? "" : o
+		} catch (e) {}
+		null != o && !1 !== o || "spellcheck" == t || e.removeAttribute(t)
+	} else {
+		var p = r && t !== (t = t.replace(/^xlink:?/, ""));
+		null == o || !1 === o ? p ? e.removeAttributeNS("http://www.w3.org/1999/xlink", t.toLowerCase()) : e.removeAttribute(
+			t) : "function" != typeof o && (p ? e.setAttributeNS("http://www.w3.org/1999/xlink", t.toLowerCase(), o) : e.setAttribute(
+			t, o))
+	} else e.className = o || ""
+}
+
+function m(e) {
+	return this._listeners[e.type](e)
+}
+var _ = [],
+	y = 0,
+	g = !1,
+	b = !1;
+
+function C() {
+	for (var e; e = _.shift();) e.componentDidMount && e.componentDidMount()
+}
+
+function x(e, t, n, o, r, i) {
+	y++ || (g = null != r && void 0 !== r.ownerSVGElement, b = null != e && !("__preactattr_" in e));
+	var l = function e(t, n, o, r, i) {
+		var l = t,
+			a = g;
+		if (null != n && "boolean" != typeof n || (n = ""), "string" == typeof n || "number" == typeof n) return t && void 0 !==
+			t.splitText && t.parentNode && (!t._component || i) ? t.nodeValue != n && (t.nodeValue = n) : (l = document.createTextNode(
+				n), t && (t.parentNode && t.parentNode.replaceChild(l, t), N(t, !0))), l.__preactattr_ = !0, l;
+		var s, p, u = n.nodeName;
+		if ("function" == typeof u) return function(e, t, n, o) {
+			for (var r = e && e._component, i = r, l = e, a = r && e._componentConstructor === t.nodeName, s = a, p = d(t); r &&
+				!s && (r = r._parentComponent);) s = r.constructor === t.nodeName;
+			return r && s && (!o || r._component) ? (B(r, p, 3, n, o), e = r.base) : (i && !a && (L(i), e = l = null), r = S(
+					t.nodeName, p, n), e && !r.nextBase && (r.nextBase = e, l = null), B(r, p, 1, n, o), e = r.base, l && e !== l &&
+				(l._component = null, N(l, !1))), e
+		}(t, n, o, r);
+		if (g = "svg" === u || "foreignObject" !== u && g, u = String(u), (!t || !f(t, u)) && (s = u, (p = g ? document.createElementNS(
+				"http://www.w3.org/2000/svg", s) : document.createElement(s)).normalizedNodeName = s, l = p, t)) {
+			for (; t.firstChild;) l.appendChild(t.firstChild);
+			t.parentNode && t.parentNode.replaceChild(l, t), N(t, !0)
+		}
+		var c = l.firstChild,
+			m = l.__preactattr_,
+			_ = n.children;
+		if (null == m) {
+			m = l.__preactattr_ = {};
+			for (var y = l.attributes, C = y.length; C--;) m[y[C].name] = y[C].value
+		}
+		return !b && _ && 1 === _.length && "string" == typeof _[0] && null != c && void 0 !== c.splitText && null == c.nextSibling ?
+			c.nodeValue != _[0] && (c.nodeValue = _[0]) : (_ && _.length || null != c) && function(t, n, o, r, i) {
+				var l, a, s, p, u, c, d, h, m = t.childNodes,
+					_ = [],
+					y = {},
+					g = 0,
+					b = 0,
+					C = m.length,
+					x = 0,
+					w = n ? n.length : 0;
+				if (0 !== C)
+					for (var k = 0; k < C; k++) {
+						var S = m[k],
+							P = S.__preactattr_;
+						null != (B = w && P ? S._component ? S._component.__key : P.key : null) ? (g++, y[B] = S) : (P || (void 0 !== S.splitText ?
+							!i || S.nodeValue.trim() : i)) && (_[x++] = S)
+					}
+				if (0 !== w)
+					for (k = 0; k < w; k++) {
+						var B;
+						if (u = null, null != (B = (p = n[k]).key)) g && void 0 !== y[B] && (u = y[B], y[B] = void 0, g--);
+						else if (b < x)
+							for (l = b; l < x; l++)
+								if (void 0 !== _[l] && (c = a = _[l], h = i, "string" == typeof(d = p) || "number" == typeof d ? void 0 !== c.splitText :
+										"string" == typeof d.nodeName ? !c._componentConstructor && f(c, d.nodeName) : h || c._componentConstructor ===
+										d.nodeName)) {
+									u = a, _[l] = void 0, l === x - 1 && x--, l === b && b++;
+									break
+								} u = e(u, p, o, r), s = m[k], u && u !== t && u !== s && (null == s ? t.appendChild(u) : u === s.nextSibling ?
+							v(s) : t.insertBefore(u, s))
+					}
+				if (g)
+					for (var k in y) void 0 !== y[k] && N(y[k], !1);
+				for (; b <= x;) void 0 !== (u = _[x--]) && N(u, !1)
+			}(l, _, o, r, b || null != m.dangerouslySetInnerHTML),
+			function(e, t, n) {
+				var o;
+				for (o in n) t && null != t[o] || null == n[o] || h(e, o, n[o], n[o] = void 0, g);
+				for (o in t) "children" === o || "innerHTML" === o || o in n && t[o] === ("value" === o || "checked" === o ? e[o] :
+					n[o]) || h(e, o, n[o], n[o] = t[o], g)
+			}(l, n.attributes, m), g = a, l
+	}(e, t, n, o, i);
+	return r && l.parentNode !== r && r.appendChild(l), --y || (b = !1, i || C()), l
+}
+
+function N(e, t) {
+	var n = e._component;
+	n ? L(n) : (null != e.__preactattr_ && l(e.__preactattr_.ref, null), !1 !== t && null != e.__preactattr_ || v(e), w(e))
+}
+
+function w(e) {
+	for (e = e.lastChild; e;) {
+		var t = e.previousSibling;
+		N(e, !0), e = t
+	}
+}
+var k = [];
+
+function S(e, t, n) {
+	var o, r = k.length;
+	for (e.prototype && e.prototype.render ? (o = new e(t, n), T.call(o, t, n)) : ((o = new T(t, n)).constructor = e, o.render =
+			P); r--;)
+		if (k[r].constructor === e) return o.nextBase = k[r].nextBase, k.splice(r, 1), o;
+	return o
+}
+
+function P(e, t, n) {
+	return this.constructor(e, n)
+}
+
+function B(e, n, o, r, i) {
+	e._disable || (e._disable = !0, e.__ref = n.ref, e.__key = n.key, delete n.ref, delete n.key, void 0 === e.constructor
+		.getDerivedStateFromProps && (!e.base || i ? e.componentWillMount && e.componentWillMount() : e.componentWillReceiveProps &&
+			e.componentWillReceiveProps(n, r)), r && r !== e.context && (e.prevContext || (e.prevContext = e.context), e.context =
+			r), e.prevProps || (e.prevProps = e.props), e.props = n, e._disable = !1, 0 !== o && (1 !== o && !1 === t.syncComponentUpdates &&
+			e.base ? u(e) : U(e, 1, i)), l(e.__ref, e))
+}
+
+function U(e, t, n, o) {
+	if (!e._disable) {
+		var r, l, a, s = e.props,
+			p = e.state,
+			u = e.context,
+			c = e.prevProps || s,
+			f = e.prevState || p,
+			v = e.prevContext || u,
+			h = e.base,
+			m = e.nextBase,
+			g = h || m,
+			b = e._component,
+			w = !1,
+			k = v;
+		if (e.constructor.getDerivedStateFromProps && (p = i(i({}, p), e.constructor.getDerivedStateFromProps(s, p)), e.state =
+				p), h && (e.props = c, e.state = f, e.context = v, 2 !== t && e.shouldComponentUpdate && !1 === e.shouldComponentUpdate(
+					s, p, u) ? w = !0 : e.componentWillUpdate && e.componentWillUpdate(s, p, u), e.props = s, e.state = p, e.context =
+				u), e.prevProps = e.prevState = e.prevContext = e.nextBase = null, e._dirty = !1, !w) {
+			r = e.render(s, p, u), e.getChildContext && (u = i(i({}, u), e.getChildContext())), h && e.getSnapshotBeforeUpdate &&
+				(k = e.getSnapshotBeforeUpdate(c, f));
+			var P, T, M = r && r.nodeName;
+			if ("function" == typeof M) {
+				var W = d(r);
+				(l = b) && l.constructor === M && W.key == l.__key ? B(l, W, 1, u, !1) : (P = l, e._component = l = S(M, W, u), l.nextBase =
+					l.nextBase || m, l._parentComponent = e, B(l, W, 0, u, !1), U(l, 1, n, !0)), T = l.base
+			} else a = g, (P = b) && (a = e._component = null), (g || 1 === t) && (a && (a._component = null), T = x(a, r, u, n ||
+				!h, g && g.parentNode, !0));
+			if (g && T !== g && l !== b) {
+				var D = g.parentNode;
+				D && T !== D && (D.replaceChild(T, g), P || (g._component = null, N(g, !1)))
+			}
+			if (P && L(P), e.base = T, T && !o) {
+				for (var E = e, V = e; V = V._parentComponent;)(E = V).base = T;
+				T._component = E, T._componentConstructor = E.constructor
+			}
+		}
+		for (!h || n ? _.push(e) : w || e.componentDidUpdate && e.componentDidUpdate(c, f, k); e._renderCallbacks.length;) e._renderCallbacks
+			.pop().call(e);
+		y || o || C()
+	}
+}
+
+function L(e) {
+	var t = e.base;
+	e._disable = !0, e.componentWillUnmount && e.componentWillUnmount(), e.base = null;
+	var n = e._component;
+	n ? L(n) : t && (null != t.__preactattr_ && l(t.__preactattr_.ref, null), e.nextBase = t, v(t), k.push(e), w(t)), l(e.__ref,
+		null)
+}
+
+function T(e, t) {
+	this._dirty = !0, this.context = t, this.props = e, this.state = this.state || {}, this._renderCallbacks = []
+}
+i(T.prototype, {
+	setState: function(e, t) {
+		this.prevState || (this.prevState = this.state), this.state = i(i({}, this.state), "function" == typeof e ? e(this
+			.state, this.props) : e), t && this._renderCallbacks.push(t), u(this)
+	},
+	forceUpdate: function(e) {
+		e && this._renderCallbacks.push(e), U(this, 2)
+	},
+	render: function() {}
+});
+var M = function(e, t, n, o) {
+		for (var r = 1; r < t.length; r++) {
+			var i = t[r++],
+				l = "number" == typeof i ? n[i] : i;
+			1 === t[r] ? o[0] = l : 2 === t[r] ? (o[1] = o[1] || {})[t[++r]] = l : 3 === t[r] ? o[1] = Object.assign(o[1] || {},
+				l) : o.push(t[r] ? e.apply(null, M(e, l, n, ["", null])) : l)
+		}
+		return o
+	},
+	W = function(e) {
+		for (var t, n, o = 1, r = "", i = "", l = [0], a = function(e) {
+				1 === o && (e || (r = r.replace(/^\s*\n\s*|\s*\n\s*$/g, ""))) ? l.push(e || r, 0) : 3 === o && (e || r) ? (l.push(
+						e || r, 1), o = 2) : 2 === o && "..." === r && e ? l.push(e, 3) : 2 === o && r && !e ? l.push(!0, 2, r) : 4 ===
+					o && n && (l.push(e || r, 2, n), n = ""), r = ""
+			}, s = 0; s < e.length; s++) {
+			s && (1 === o && a(), a(s));
+			for (var p = 0; p < e[s].length; p++) t = e[s][p], 1 === o ? "<" === t ? (a(), l = [l], o = 3) : r += t : i ? t ===
+				i ? i = "" : r += t : '"' === t || "'" === t ? i = t : ">" === t ? (a(), o = 1) : o && ("=" === t ? (o = 4, n = r,
+						r = "") : "/" === t ? (a(), 3 === o && (l = l[0]), o = l, (l = l[0]).push(o, 4), o = 0) : " " === t || "\t" ===
+					t || "\n" === t || "\r" === t ? (a(), o = 2) : r += t)
+		}
+		return a(), l
+	},
+	D = "function" == typeof Map,
+	E = D ? new Map : {},
+	V = D ? function(e) {
+		var t = E.get(e);
+		return t || E.set(e, t = W(e)), t
+	} : function(e) {
+		for (var t = "", n = 0; n < e.length; n++) t += e[n].length + "-" + e[n];
+		return E[t] || (E[t] = W(e))
+	};
+
+function A(e, t) {
+	! function(t, n, o) {
+		x(o, e, {}, !1, n, !1)
+	}(0, t, t.firstElementChild)
+}
+var H = function(e) {
+	var t = M(this, V(e), arguments, []);
+	return t.length > 1 ? t : t[0]
+}.bind(r);
+export {
+	r as h, H as html, A as render, T as Component
+};
--- a/src/index.ejs
+++ b/src/index.ejs
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<% for (var chunk in htmlWebpackPlugin.files.css) { %>
+		<link rel="preload" href="<%= htmlWebpackPlugin.files.css[chunk] %>"  as="style">
+	<% } %>
+	<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
+		<link rel="preload" href="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>" as="script">
+	<% } %>
+	<meta charset="utf-8">
+	<title>xm-select</title>
+</head>
+<body>
+	
+	<div id="demo1"></div>
+	
+	
+</body>
+</html>
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,26 @@
+import { name, version } from '../package.json'
+import Core from '@/components/core'
+import '@/style/index.less'
+import '@/style/iconfont.less'
+
+
+const xmSelect = {
+	name,
+	version,
+	render(options) {
+		return new Core(options);
+	}
+}
+
+
+if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {
+	module.exports = xmSelect;
+} else if (typeof define === 'function' && define.amd) {
+	define(xmSelect);
+} else if (window.layui && layui.define) {
+	layui.define(function(exports) {
+		exports('xmSelect', xmSelect);
+	});
+} else {
+	window.xmSelect = xmSelect;
+}
--- a/src/style/iconfont.less
+++ b/src/style/iconfont.less
@ -0,0 +1,61 @@
+/* 阿里巴巴矢量图标库 */
+@font-face {
+	font-family: "xm-iconfont";
+	src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831');
+	/* IE9*/
+	src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831#iefix') format('embedded-opentype'),
+		/* IE6-IE8 */
+		url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
+		url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.ttf?t=1534240067831') format('truetype'),
+		/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+		url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.svg?t=1534240067831#iconfont') format('svg');
+	/* iOS 4.1- */
+}
+
+.xm-iconfont {
+	font-family: "xm-iconfont" !important;
+	font-size: 16px;
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.icon-quanxuan:before {
+	content: "\e62c";
+}
+
+.icon-caidan:before {
+	content: "\e610";
+}
+
+.icon-fanxuan:before {
+	content: "\e837";
+}
+
+.icon-pifu:before {
+	content: "\e668";
+}
+
+.icon-qingkong:before {
+	content: "\e63e";
+}
+
+.icon-sousuo:before {
+	content: "\e600";
+}
+
+.icon-danx:before {
+	content: "\e62b";
+}
+
+.icon-duox:before {
+	content: "\e613";
+}
+
+.icon-close:before {
+	content: "\e601";
+}
+
+.icon-expand:before {
+	content: "\e641";
+}
--- a/src/style/index.less
+++ b/src/style/index.less
@ -0,0 +1,209 @@
+@fontColor: #666;
+@defaultBorderColor: #E6E6E6;
+@disabledColor: #C2C2C2;
+@border: 1px solid @defaultBorderColor;
+@height: 36px;
+
+@-webkit-keyframes xm-upbit {
+	from {-webkit-transform: translate3d(0, 30px, 0);opacity: .3}
+	to {-webkit-transform: translate3d(0, 0, 0);opacity: 1}
+}
+@keyframes xm-upbit {
+	from {transform: translate3d(0, 30px, 0);opacity: .3}
+	to {transform: translate3d(0, 0, 0);opacity: 1}
+}
+
+xm-select{
+	*{
+		margin: 0; 
+		padding: 0; 
+		box-sizing: border-box; 
+		font-size: 14px;
+		font-weight: 400;
+		color: @fontColor;
+		text-overflow: ellipsis;
+		user-select: none;
+	}
+	
+	position: relative;
+	border: @border;
+	border-radius: 2px;
+	height: @height;
+	line-height: @height;
+	display: block;
+	width: 100%;
+	cursor: pointer;
+	
+	&:hover{
+		border-color: #C0C4CC;
+	}
+	
+	
+	& > .xm-tips{
+		color: #999999;
+		padding: 0 10px;
+		height: 100%;
+	} 
+	
+	& > .xm-icon{
+		display: inline-block;
+		overflow: hidden;
+		position: absolute;
+		width: 0;
+		height: 0;
+		right: 10px;
+		top: 50%;
+		margin-top: -3px;
+		cursor: pointer;
+		border: 6px dashed transparent;
+		border-top-color: #C2C2C2;
+		border-top-style: solid;
+		transition: all .3s;
+		-webkit-transition: all .3s
+	}
+	
+	& > .xm-icon-expand{
+		margin-top: -9px;
+		transform: rotate(180deg);
+	}
+	
+	& > .xm-label{
+		padding: 0 10px;
+		height: 100%;
+		overflow-y: hidden;
+		
+		.xm-label-block{
+			display: inline-block;
+			position: relative;
+			padding: 0px 5px;
+			margin: 2px 5px 2px 0;
+			height: 22px;
+			line-height: 22px;
+			border-radius: 3px;
+			vertical-align: middle;
+			color: #FFF;
+			max-width: calc(100% - 20px);
+			
+			& > span{
+				display: inline-block;
+				color: #FFF;
+				text-overflow: ellipsis;
+				overflow: hidden;
+			}
+			
+			& > i{
+				color: #FFF;
+				margin-left: 8px;
+				font-size: 12px;
+				cursor: pointer;
+				line-height: 20px;
+				position: relative;
+				top: -6px;
+			}
+			
+			&.disabled{
+				background-color: @disabledColor !important;
+				cursor: no-drop !important;
+				&>i{
+					cursor: no-drop !important;
+				}
+			}
+		}
+	}
+	
+	& > .xm-body {
+		position: absolute;
+		left: 0;
+		top: 42px;
+		padding: 5px 0;
+		z-index: 999;
+		width: 100%;
+		border: @border;
+		max-height: 300px;
+		overflow-y: auto;
+		background-color: #fff;
+		border-radius: 2px;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
+		animation-fill-mode: both;
+		animation-name: xm-upbit;
+		animation-duration: .3s;
+		animation-fill-mode: both;
+		
+		.xm-option{
+			position: relative;
+			padding: 0 10px;
+			cursor: pointer;
+			
+			&:hover{
+				background-color: #f2f2f2;
+				
+				&>.xm-option-icon>i{
+					color: #f2f2f2;
+				}
+			}
+			
+			&-icon{
+				color: #FFF;
+				font-size: 16px;
+				width: 18px;
+				height: 18px;
+				position: absolute;
+				top: 9px;
+				border: @border;
+				border-radius: 5px;
+				z-index: 2;
+				
+				& > i {
+					position: absolute; 
+					right: 0px; 
+					top: -10px; 
+					color: #FFF;
+				}
+			}
+			
+			&-content{
+				display: inline-block;
+				position: relative;
+				padding: 0 15px 0 30px;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				color: #666;
+				line-height: 36px;
+				vertical-align: top;
+				width: 100%;
+			}
+		}
+		
+		.xm-select-empty{
+			text-align: center;
+			color: #999;
+		}
+		
+		.disabled{
+			cursor: no-drop;
+			&:hover{
+				background-color: #FFF;
+				&>.xm-option-icon>i{
+					color: #FFF !important;
+				}
+			}
+			.xm-option-icon{
+				border-color: @disabledColor !important;
+			}
+			.xm-option-content{
+				color: @disabledColor !important;
+			}
+			
+			&.selected>.xm-option-icon>i{
+				color: @disabledColor !important;
+			}
+		}
+	}
+	
+	
+	.dis{
+		display: none;
+	}
+	
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,52 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+	entry: "./src/index.js",
+	output: {
+		path: path.resolve(__dirname, 'dist'),
+		filename: "xm-select.js"
+	},
+	module: {
+		rules: [{
+			test: /\.css$/,
+			use: 'css-loader'
+		}, {
+			test: /\.less$/,
+			exclude: /node_modules/,
+			loader: 'style-loader!css-loader!less-loader'
+		}, {
+			test: /\.m?js$/,
+			exclude: /(node_modules|bower_components)/,
+			use: {
+				loader: 'babel-loader',
+				options: {
+					presets: ['@babel/preset-env']
+				}
+			}
+		}]
+	},
+	resolve: {
+		alias: {
+			'@': path.resolve(__dirname, "src"),
+			'components': path.resolve(__dirname, "src/components"),
+			'style': path.resolve(__dirname, "src/style"),
+		}
+	},
+	plugins: [
+		new HtmlWebpackPlugin({
+			template: './src/index.ejs',
+			minify: {
+				collapseWhitespace: true
+			}
+		}),
+	],
+	devServer: {
+		contentBase: path.join(__dirname, "./dist"),
+		compress: true,
+		host: '0.0.0.0',
+		port: 9000,
+		open: true,
+		hot: true,
+	}
+};
				`@ -0,0 +1 @@`
				`<!DOCTYPE html><html><head><link rel="preload" href="xm-select.js" as="script"><meta charset="utf-8"><title>xm-select</title></head><body><div id="demo1"></div><script type="text/javascript" src="xm-select.js"></script></body></html>`