From 245812df9bc10a8250e94992375f95de87cf32a8 Mon Sep 17 00:00:00 2001
From: lin-xin <2981207131@qq.com>
Date: Wed, 1 Mar 2017 19:38:17 +0800
Subject: [PATCH] Update README.md

---
 README.md | 245 +++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 161 insertions(+), 84 deletions(-)

diff --git a/README.md b/README.md
index 97a09b6..5eafd5d 100644
--- a/README.md
+++ b/README.md
@@ -66,110 +66,187 @@
 	npm run build
 
 ## 组件使用说明与演示 ##
+
+### element-ui ###
+一套基于vue.js2.0的桌面组件库。访问地址：[element](http://element.eleme.io/#/zh-CN/component/layout)
+
+### vue-datasource ###
+一个用于动态创建表格的vue.js服务端组件。访问地址：[vue-datasource](https://github.com/coderdiaz/vue-datasource)
+
+```JavaScript
+<template>
+	<div>
+		<datasource language="en" :table-data="information.data"
+	        :columns="columns"
+	        :pagination="information.pagination"
+	        :actions="actions"
+	        v-on:change="changePage"
+	        v-on:searching="onSearch"></datasource>
+	</div>
+</template>
+
+<script>
+	import Datasource from 'vue-datasource';					// 导入quillEditor组件
+    export default {
+        data: function(){
+            return {
+                information: {
+	                pagination: {...},						// 页码配置
+	                data: [...]
+	            },
+	            columns: [...],								// 列名配置
+	            actions: [...]								// 功能配置
+            }
+        },
+        components: {
+            Datasource										// 声明组件Datasource
+        },
+	    methods: {
+	        changePage(values) {...},
+	        onSearch(searchQuery) {...}
+	    }
+	}
+</script>
+```
+
+
 ### Vue-Quill-Editor ###
 基于Quill、适用于Vue2的富文本编辑器。访问地址：[vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
 
-	<template>
-		<div>
-			<quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
-		</div>
-	</template>
+```JavaScript
+<template>
+	<div>
+		<quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
+	</div>
+</template>
 
-	<script>
-		import { quillEditor } from 'vue-quill-editor';			// 导入quillEditor组件
-	    export default {
-	        data: function(){
-	            return {
-	                content: '',								// 编辑器的内容
-	                editorOption: {								// 编辑器的配置
-	                    // something config
-	                }
-	            }
-	        },
-	        components: {
-	            quillEditor										// 声明组件quillEditor
-	        }
-		}
-	</script>
+<script>
+	import { quillEditor } from 'vue-quill-editor';			// 导入quillEditor组件
+    export default {
+        data: function(){
+            return {
+                content: '',								// 编辑器的内容
+                editorOption: {								// 编辑器的配置
+                    // something config
+                }
+            }
+        },
+        components: {
+            quillEditor										// 声明组件quillEditor
+        }
+	}
+</script>
+```
 
 ### Vue-SimpleMDE ###
 Vue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.com/F-loat/vue-simplemde)
 
-	<template>
-	    <div>
-	        <markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor>
-	    </div>
-	</template>
+```JavaScript
+<template>
+    <div>
+        <markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor>
+    </div>
+</template>
 
-	<script>
-	    import { markdownEditor } from 'vue-simplemde';			// 导入markdownEditor组件
-	    export default {
-	        data: function(){
-	            return {
-	                content:'',									// markdown编辑器内容
-	                configs: {									// markdown编辑器配置参数
-	                    status: false,							// 禁用底部状态栏
-	                    initialValue: 'Hello BBK',				// 设置初始值
-	                    renderingConfig: {
-	                        codeSyntaxHighlighting: true,		// 开启代码高亮
-	                        highlightingTheme: 'atom-one-light' // 自定义代码高亮主题
-	                    }
-	                }
-	            }
-	        },
-	        components: {
-	            markdownEditor									// 声明组件markdownEditor
-	        }
-	    }
-	</script>
+<script>
+    import { markdownEditor } from 'vue-simplemde';			// 导入markdownEditor组件
+    export default {
+        data: function(){
+            return {
+                content:'',									// markdown编辑器内容
+                configs: {									// markdown编辑器配置参数
+                    status: false,							// 禁用底部状态栏
+                    initialValue: 'Hello BBK',				// 设置初始值
+                    renderingConfig: {
+                        codeSyntaxHighlighting: true,		// 开启代码高亮
+                        highlightingTheme: 'atom-one-light' // 自定义代码高亮主题
+                    }
+                }
+            }
+        },
+        components: {
+            markdownEditor									// 声明组件markdownEditor
+        }
+    }
+</script>
+```
 
 ### Vue-Core-Image-Upload ###
 一款轻量级的vue上传插件，支持裁剪。访问地址：[Vue-Core-Image-Upload](https://github.com/Vanthink-UED/vue-core-image-upload)
 
 ```JavaScript
 
-	<template>
-	    <div>
-			<img :src="src">									// 用于显示上传的图片
-	        <vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
-	           :crop="true"										// 是否裁剪
-	           text="上传图片"
-	           url=""											// 上传路径
-	           extensions="png,gif,jpeg,jpg"					// 限制文件类型
-	           @:imageuploaded="imageuploaded">					// 监听图片上传完成事件
-			</vue-core-image-upload>
-	    </div>
-	</template>
-	
-	<script>
-	    import VueCoreImageUpload  from 'vue-core-image-upload';	// 导入VueCoreImageUpload组件
-	    export default {
-	        data: function(){
-	            return {
-	                src:'../img/1.jpg'							// 默认显示图片地址
-	            }
-	        },
-	        components: {
-	            VueCoreImageUpload								// 声明组件VueCoreImageUpload
-	        },
-	        methods:{
-	            imageuploaded(res) {							// 定义上传完成执行的方法
-	                console.log(res)
-	            }
-	        }
-	    }
-	</script>
+<template>
+    <div>
+		<img :src="src">									// 用于显示上传的图片
+        <vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
+           :crop="true"										// 是否裁剪
+           text="上传图片"
+           url=""											// 上传路径
+           extensions="png,gif,jpeg,jpg"					// 限制文件类型
+           @:imageuploaded="imageuploaded">					// 监听图片上传完成事件
+		</vue-core-image-upload>
+    </div>
+</template>
+
+<script>
+    import VueCoreImageUpload  from 'vue-core-image-upload';	// 导入VueCoreImageUpload组件
+    export default {
+        data: function(){
+            return {
+                src:'../img/1.jpg'							// 默认显示图片地址
+            }
+        },
+        components: {
+            VueCoreImageUpload								// 声明组件VueCoreImageUpload
+        },
+        methods:{
+            imageuploaded(res) {							// 定义上传完成执行的方法
+                console.log(res)
+            }
+        }
+    }
+</script>
 
 ```
 
 ### vue-echarts-v3 ###
 基于vue2和eCharts.js3的图表组件。访问地址：[vue-echarts-v3](https://github.com/xlsdg/vue-echarts-v3)
 
-	<template>
-	    <div>
-	        <markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor>
-	    </div>
-	</template>
-
+```JavaScript
+<template>
+    <div>
+        <IEcharts :option="bar"></IEcharts>
+    </div>
+</template>
+	
+<script>
+    import IEcharts from 'vue-echarts-v3';					// 导入IEcharts组件
+    export default {
+        data: function(){
+            return {
+                bar: {
+			        title: {
+			          text: '柱状图'							// 图标标题文本
+			        },
+			        tooltip: {},	
+			        xAxis: {								// 横坐标
+			          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+			        },
+			        yAxis: {},								// 纵坐标
+			        series: [{
+			          name: '销量',
+			          type: 'bar',							// 图标类型
+			          data: [5, 20, 36, 10, 10, 20]
+			        }]
+			   	}
+            }
+        },
+        components: {
+            IEcharts								// 声明组件VueCoreImageUpload
+        }
+    }
+</script>
+```
 
 ## 其他注意事项 ##