Initial commit

.babelrc

+{
+  "presets": ["es2015"],
+  "comments": false
+}

.eslintignore

+popper.js
+fecha.js

.eslintrc

+{
+  "plugins": ['vue'],
+  "extends": 'elemefe',
+  "parserOptions": {
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true
+    }
+  }
+}

.gitignore

+node_modules
+.DS_Store
+npm-debug.log
+lerna-debug.log
+npm-debug.log.*
+lerna-debug.log.*
+lib
+.idea
+examples/element-ui
+fe.element/element-ui

CHANGELOG.md

+## 更新日志
+
+### 0.2.0
+
+`2016-07-29`
+
+- 增加 grid 相关组件
+- form-item 增加 required 属性
+
+*非兼容性更新*
+
+- progress 的 percentage 属性值范围从 0～1 改变为 1~100.
+
+### 0.1.9
+
+`2016-07-12`
+
+- 增加 menu 组件
+
+*非兼容性更新*
+
+- 使用了新的图标集，原有的某些图标可能不存在了
+
+### 0.1.8
+
+`2016-07-07`
+
+- dropdown 和 tooltip 首次出现闪动问题
+
+### 0.1.7
+
+`2016-07-06`
+
+- dropdown 增加触发下拉菜单方式的参数
+- 修正若干组件的样式问题和浏览器兼容问题
+- 修复 popper.js 产生的过多 scroll 事件绑定
+- 在 radio-group 里增加 radio-button 类型
+- 为 select 添加 singleCancelable 选项
+
+### 0.1.6
+
+`2016-06-30`
+- dropdown-menu 改为动态创建
+- 修复 textarea 缺失 model 参数的 bug
+- 修复 pagination 和 input-group 在 safari 下的样式问题
+
+### 0.1.5
+
+`2016-06-29`
+- 为 MessageBox 和 Notification 注册全局方法
+- button 的 loading 状态时改为不触发 hover 和点击等操作
+- input组件 增加 maxlength 和 minlength 属性支持
+
+### 0.1.4
+
+`2016-06-29`
+
+- 增加 Tabs、Form、MessageBox、Alert、Notification、Slider 组件
+- dropdown menu 现在是直接插入到 body 节点下，并且修正了自适应宽度的 bug
+- dropdown item 点击后关闭 dropdown menu
+- radio 绑定值增加 Number 类型支持
+- 增加 radio-group 组件
+- 增加 checkbox-group 组件
+- Select 组件 API 更新，现在的用法和原生 select 标签更加相似
+

Makefile

+.PHONY: dist
+default: help
+
+# build all theme
+build-theme: build-theme-default
+
+build-theme-default:
+	packages/theme-default/node_modules/.bin/gulp build --gulpfile packages/theme-default/gulpfile.js
+	cp -rf packages/theme-default/lib lib/theme-default
+
+install:
+	npm i --registry=http://registry.npm.taobao.org --ignore-scripts --loglevel=error
+	./node_modules/.bin/lerna bootstrap
+
+dev: install
+	node bin/iconInit.js
+	npm run dev
+
+new:
+	node bin/new.js $(filter-out $@,$(MAKECMDGOALS))
+
+dist:
+	npm run dist
+	make build-theme
+
+dist-all:
+	node bin/build-all.js
+	make build-theme
+
+deploy: install
+	@npm run deploy
+	@rm -rf fe.element/element-ui
+	@cp -r examples/element-ui fe.element
+
+gh-docs:
+	@npm run gh-docs
+
+pub:
+	./node_modules/.bin/kp $(filter-out $@,$(MAKECMDGOALS))
+
+pub-all: dist-all
+	./node_modules/.bin/lerna publish
+
+help:
+	@echo "   \033[35mmake\033[0m \033[1m命令使用说明\033[0m"
+	@echo "   \033[35mmake install\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  安装依赖"
+	@echo "   \033[35mmake new <component-name> [中文名]\033[0m\t---  创建新组件 package. 例如 'make new button 按钮'"
+	@echo "   \033[35mmake dev\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  开发模式"
+	@echo "   \033[35mmake dist\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  编译项目，生成目标文件"
+	@echo "   \033[35mmake dist-all\033[0m\t\033[0m\t\033[0m\t---  分别编译每个组件项目"
+	@echo "   \033[35mmake deploy\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  部署 demo"
+	@echo "   \033[35mmake pub\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  发布到 npm 上"
+	@echo "   \033[35mmake pub-all\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  发布各组件到 npm 上"

README.md

+# Element
+> UI Elements for admin page.
+
+## Demo/Docs
+https://element-component.github.io/element
+
+## Usages
+```shell
+npm i element-ui -S
+```
+
+## Quick Start
+use [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)
+
+``` javascript
+import Vue from 'vue'
+import Element from 'element-ui'
+
+Vue.use(Element)
+
+// or
+import {
+  Select,
+  Button
+  // ...
+} from 'element-ui'
+
+Vue.component(Select.name, ElSelect)
+Vue.component(Button.name, Button)
+```
+
+(roughly) to
+
+``` javascript
+import Vue from 'vue'
+import Element from 'element-ui'
+import 'element-ui/lib/theme-default/index.css';
+
+Vue.use(Element)
+
+// or
+import Select from 'element-ui/lib/select';
+import Select from 'element-ui/lib/theme-default/select.css';
+import Button from 'element-ui/lib/button';
+import Button from 'element-ui/lib/theme-default/button.css';
+
+Vue.component(Select.name, ElSelect)
+Vue.component(Button.name, Button)
+```
+
+## babel-plugin-component
+.babelrc
+```json
+{
+  "plugins": ["xxx", ["component", [
+    {
+      "libraryName": "element-ui",
+      "styleLibraryName": "theme-default"
+    }
+  ]]]
+}
+```
+
+## LICENSE
+MIT
+

bin/build-all.js

+'use strict';
+
+const components = require('../components.json');
+const execSync = require('child_process').execSync;
+const existsSync = require('fs').existsSync;
+const path = require('path');
+
+let componentPaths = [];
+
+delete components.index;
+delete components.font;
+
+Object.keys(components).forEach(key => {
+  const filePath = path.join(__dirname, `../packages/${key}/cooking.conf.js`);
+
+  if (existsSync(filePath)) {
+    componentPaths.push(`packages/${key}/cooking.conf.js`)
+  }
+});
+
+const paths = componentPaths.join(',');
+const cli = `cooking build -c ${paths} -p`;
+
+execSync(cli, {
+  stdio: 'inherit'
+});

bin/build-entry.js

+var Components = require('../components.json')
+var fs = require('fs')
+var render = require('json-templater/string')
+var uppercamelcase = require('uppercamelcase')
+var path = require('path')
+
+var OUTPUT_PATH = path.join(__dirname, '../src/index.js')
+var IMPORT_TEMPLATE = `import {{name}} from '../packages/{{package}}/index.js';`
+var ISNTALL_COMPONENT_TEMPLATE = `  Vue.component({{name}}.name, {{name}});`
+var MAIN_TEMPLATE = `{{include}}
+
+const install = function(Vue) {
+{{install}}
+
+  Vue.use(Loading);
+
+  Vue.prototype.$msgbox = MessageBox;
+  Vue.prototype.$alert = MessageBox.alert;
+  Vue.prototype.$confirm = MessageBox.confirm;
+  Vue.prototype.$prompt = MessageBox.prompt;
+  Vue.prototype.$notify = Notification;
+};
+
+// auto install
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+};
+
+module.exports = {
+  install,
+{{list}}
+};
+`
+
+delete Components.font
+
+var ComponentNames = Object.keys(Components)
+
+var includeComponentTemplate = []
+var installTemplate = []
+var listTemplate = []
+
+ComponentNames.forEach(name => {
+  var componentName = uppercamelcase(name)
+
+  includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
+    name: componentName,
+    package: name
+  }))
+
+
+  if (['Loading', 'MessageBox', 'Notification'].indexOf(componentName) === -1) {
+    installTemplate.push(render(ISNTALL_COMPONENT_TEMPLATE, {
+      name: componentName,
+      component: name
+    }))
+  }
+
+  listTemplate.push(`  ${componentName}`)
+})
+
+var template = render(MAIN_TEMPLATE, {
+  include: includeComponentTemplate.join('\n'),
+  install: installTemplate.join('\n'),
+  list: listTemplate.join(',\n')
+})
+
+fs.writeFileSync(OUTPUT_PATH, template)
+console.log('[build entry] DONE:', OUTPUT_PATH)
+

bin/iconInit.js

+'use strict';
+
+var postcss = require('postcss');
+var fs = require('fs');
+var path = require('path');
+var fontFile = fs.readFileSync(path.resolve(__dirname, '../packages/theme-default/src/icon.css'), 'utf8');
+var nodes = postcss.parse(fontFile).nodes;
+var classList = [];
+
+nodes.forEach((node) => {
+  var selector = node.selector || '';
+  var reg = new RegExp(/\.el-icon-([^:]+):before/);
+  var arr = selector.match(reg);
+
+  if (arr && arr[1]) {
+    classList.push(arr[1]);
+  }
+})
+
+fs.writeFile(path.resolve(__dirname, '../examples/icon.json'), JSON.stringify(classList));

bin/new.js

+'use strict';
+
+console.log();
+process.on('exit', () => {
+  console.log();
+});
+
+if (!process.argv[2]) {
+  console.error('[组件名]必填.');
+  process.exit(1);
+}
+
+const path = require('path');
+const fileSave = require('file-save');
+const uppercamelcase = require('uppercamelcase');
+const componentname = process.argv[2];
+const chineseName = process.argv[3] || componentname;
+const ComponentName = uppercamelcase(componentname);
+const PackagePath = path.resolve(__dirname, '../packages', componentname);
+const Files = [
+  {
+    filename: 'index.js',
+    content: `const ${ComponentName} = require('./src/main');
+
+${ComponentName}.install = function(Vue) {
+  Vue.component(${ComponentName}.name, ${ComponentName});
+};
+
+module.exports = ${ComponentName};`
+  },
+  {
+    filename: 'cooking.conf.js',
+    content: `var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'El${ComponentName}',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();`
+  },
+  {
+    filename: 'package.json',
+    content: `{
+  "name": "el-${componentname}",
+  "version": "0.0.0",
+  "description": "A ${componentname} component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/${componentname}",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {}
+}`
+  },
+  {
+    filename: 'src/main.vue',
+    content: `<template>
+  <div class="el-${componentname}"></div>
+</template>
+
+<script>
+export default {
+  name: 'el-${componentname}'
+};
+</script>`
+  },
+  {
+    filename: path.join('../../examples/docs/', `${componentname}.md`),
+    content:`## ${chineseName}`
+  }
+]
+
+// 添加到 components.json
+const componentsFile = require('../components.json');
+if (componentsFile[componentname]) {
+  console.error(`${componentname} 已存在.`);
+  process.exit(1);
+}
+componentsFile[componentname] = [`./packages/${componentname}/index.js`];
+fileSave(path.join(__dirname, '../components.json'))
+  .write(JSON.stringify(componentsFile, null, '  '), 'utf8')
+  .end('\n')
+
+// 创建 package
+Files.forEach(file => {
+  fileSave(path.join(PackagePath, file.filename))
+  .write(file.content, 'utf8')
+  .end('\n')
+})
+
+// 添加到 nav.config.json
+const navConfigFile = require('../examples/nav.config.json');
+navConfigFile[navConfigFile.length - 1].list.push({
+  path: `/${componentname}`,
+  name: `${chineseName} (${componentname})`,
+  title: componentname === chineseName ?
+         componentname :
+         `${componentname} ${chineseName}`
+});
+
+fileSave(path.join(__dirname, '../examples/nav.config.json'))
+  .write(JSON.stringify(navConfigFile, null, '  '), 'utf8')
+  .end('\n')
+
+console.log('DONE!');

components.json

+{
+  "group": [
+    "./packages/group/index.js"
+  ],
+  "select-dropdown": [
+    "./packages/select-dropdown/index.js"
+  ],
+  "pagination": [
+    "./packages/pagination/index.js"
+  ],
+  "dialog": [
+    "./packages/dialog/index.js"
+  ],
+  "cascader": [
+    "./packages/cascader/index.js"
+  ],
+  "autocomplete": [
+    "./packages/autocomplete/index.js"
+  ],
+  "dropdown": [
+    "./packages/dropdown/index.js"
+  ],
+  "dropdown-item": [
+    "./packages/dropdown-item/index.js"
+  ],
+  "menu": [
+    "./packages/menu/index.js"
+  ],
+  "submenu": [
+    "./packages/submenu/index.js"
+  ],
+  "menu-item": [
+    "./packages/menu-item/index.js"
+  ],
+  "input": [
+    "./packages/input/index.js"
+  ],
+  "input-number": [
+    "./packages/input-number/index.js"
+  ],
+  "input-group": [
+    "./packages/input-group/index.js"
+  ],
+  "radio": [
+    "./packages/radio/index.js"
+  ],
+  "radio-group": [
+    "./packages/radio-group/index.js"
+  ],
+  "radio-button": [
+    "./packages/radio-button/index.js"
+  ],
+  "checkbox": [
+    "./packages/checkbox/index.js"
+  ],
+  "checkbox-group": [
+    "./packages/checkbox-group/index.js"
+  ],
+  "switch": [
+    "./packages/switch/index.js"
+  ],
+  "select": [
+    "./packages/select/index.js"
+  ],
+  "option": [
+    "./packages/option/index.js"
+  ],
+  "option-group": [
+    "./packages/option-group/index.js"
+  ],
+  "button": [
+    "./packages/button/index.js"
+  ],
+  "button-group": [
+    "./packages/button-group/index.js"
+  ],
+  "table": [
+    "./packages/table/index.js"
+  ],
+  "table-column": [
+    "./packages/table-column/index.js"
+  ],
+  "date-picker": [
+    "./packages/date-picker/index.js"
+  ],
+  "time-select": [
+    "./packages/time-select/index.js"
+  ],
+  "time-picker": [
+    "./packages/time-picker/index.js"
+  ],
+  "popover": [
+    "./packages/popover/index.js"
+  ],
+  "tooltip": [
+    "./packages/tooltip/index.js"
+  ],
+  "message-box": [
+    "./packages/message-box/index.js"
+  ],
+  "breadcrumb": [
+    "./packages/breadcrumb/index.js"
+  ],
+  "breadcrumb-item": [
+    "./packages/breadcrumb-item/index.js"
+  ],
+  "form": [
+    "./packages/form/index.js"
+  ],
+  "form-item": [
+    "./packages/form-item/index.js"
+  ],
+  "tabs": [
+    "./packages/tabs/index.js"
+  ],
+  "tab-pane": [
+    "./packages/tab-pane/index.js"
+  ],
+  "tag": [
+    "./packages/tag/index.js"
+  ],
+  "tree": [
+    "./packages/tree/index.js"
+  ],
+  "alert": [
+    "./packages/alert/index.js"
+  ],
+  "notification": [
+    "./packages/notification/index.js"
+  ],
+  "slider": [
+    "./packages/slider/index.js"
+  ],
+  "loading": [
+    "./packages/loading/index.js"
+  ],
+  "icon": [
+    "./packages/icon/index.js"
+  ],
+  "row": [
+    "./packages/row/index.js"
+  ],
+  "col": [
+    "./packages/col/index.js"
+  ],
+  "upload": [
+    "./packages/upload/index.js"
+  ],
+  "progress": [
+    "./packages/progress/index.js"
+  ],
+  "spinner": [
+    "./packages/spinner/index.js"
+  ]
+}

examples/app.vue

+<style lang="css">
+  @import '../node_modules/purecss/build/grids-core.css';
+  @import '../node_modules/purecss/build/grids-units.css';
+  @import '../node_modules/purecss/build/menus.css';
+  @import '../node_modules/highlight.js/styles/color-brewer.css';
+  @import 'assets/styles/common.css';
+
+  html, body {
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    overflow: auto;
+  }
+
+  .pure-g [class *= "pure-u"] {
+    font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
+  }
+
+  .app__sidebar {
+    width: 230px;
+    display: block;
+  }
+
+  .app__content {
+    margin-left: 230px;
+    display: block;
+  }
+
+  .app__menu {
+    bottom: 0;
+    position: fixed;
+    top: 0;
+    z-index: 10;
+    background-color: #f8f8f9;
+    color: #20293b;
+
+    .app__brand {
+      color: #20293b;
+      font-size: 24px;
+      margin: 10px 0 40px;
+      text-align: center;
+
+      .app__eleme {
+        font-weight: 900;
+      }
+    }
+
+    .app__menu__label {
+      color: #20293b;
+      font-weight: bold;
+      font-size: 14px;
+      padding: 10px 0 10px 36px;
+      position: relative;
+
+      &::after {
+        border-color: transparent transparent transparent rgba(170, 170, 170, .5);
+        border-style: solid;
+        border-width: 5px 0 5px 7px;
+        content: " ";
+        display: block;
+        height: 0;
+        position: absolute;
+        right: 22px;
+        top: 14px;
+        transition-delay: .1s;
+        transition: transform .3s;
+        width: 0;
+      }
+
+      &.unfold::after {
+        transform: rotate(90deg);
+      }
+    }
+
+    .app__menu__link {
+      padding: 12px 0 12px 50px;
+      font-size: 14px;
+      color: #20293b;
+      transition: color, background-color .3s;
+
+      &:focus {
+        background-color: transparent;
+      }
+
+      &.active {
+        border-left: 3px solid #2675c3;
+        color: #2675c3;
+        padding-left: 47px;
+      }
+    }
+
+  }
+
+  .app__main {
+    .app__description {
+      font-size: 14px;
+      margin: 0;
+      color: #666;
+      padding-bottom: 36px;
+      margin-bottom: 36px;
+      border-bottom: 1px solid #e4e4e4;
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    a {
+      color: #216fc1;
+    }
+
+    h2 {
+      color: #333;
+      font-size: 20px;
+      font-weight: bold;
+      margin: 60px 0 16px;
+      line-height: 1;
+
+      &:first-of-type {
+        margin-top: 36px;
+      }
+    }
+
+    h3 {
+      color: #333;
+      font-size: 16px;
+      font-weight: normal;
+      line-height: 1;
+      margin: 36px 0 16px;
+    }
+
+    p, h2, h3 {
+      +div, +span {
+        margin: 10px 0 24px;
+      }
+
+      +span {
+        margin-right: 8px;
+      }
+    }
+
+    p {
+      color: #666;
+      font-size: 14px;
+      margin: 0 0 16px;
+      line-height: 1.5;
+    }
+
+    section > table {
+      border-collapse: collapse;
+      border-style: hidden;
+      box-shadow: 0 0 0 1px #e1e1e1;
+      border-radius: 5px;
+      overflow: hidden;
+      width: 100%;
+
+      thead {
+        background-color: #f8f8f8;
+        font-size: 14px;
+
+        th {
+          color: #666;
+        }
+      }
+
+      th, td {
+        border: 1px solid #e1e1e1;
+        padding: 10px 16px;
+        text-align: left;
+        font-size: 14px;
+        color: #999;
+      }
+    }
+
+    .hljs {
+      border-radius: 5px;
+      border: 1px solid #e1e1e1;
+      font-size: 14px;
+      max-height: 90px;
+      overflow-y: hidden;
+      position: relative;
+      margin-bottom: 40px;
+      margin-top: 0;
+
+      &::before {
+        background: linear-gradient(0deg, #fff 0, rgba(255, 255, 255, 0) 80%);
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        content: "";
+      }
+
+      &.open {
+        max-height: 100%;
+
+        &::before {
+          content: none;
+        }
+
+        .hljs__button::before {
+          margin-bottom: 0;
+          margin-top: 9px;
+          transform: rotate(45deg);
+        }
+      }
+    }
+
+    .hljs__button {
+      background-color: #fff;
+      border-radius: 4px;
+      border: 1px solid #ccc;
+      outline: 0;
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      height: 28px;
+      width: 28px;
+
+      &::before {
+        margin-bottom: 2px;
+        margin-top: 0;
+        transform: rotate(-135deg);
+        border-left: 1px solid #ccc;
+        border-top: 1px solid #ccc;
+        content: "";
+        display: inline-block;
+        height: 10px;
+        width: 10px;
+      }
+    }
+  }
+
+  .app__header {
+    background-color: #2c7dc7;
+    color: #fff;
+    padding: 42px;
+    height: 120px;
+    box-sizing: border-box;
+
+    .app__headline {
+      font-size: 36px;
+      font-weight: normal;
+      line-height: 1;
+      margin: 0 0 10px 0;
+    }
+  }
+
+  .slidedown-transition {
+    transition: all .3s ease-in-out;
+    overflow: hidden;
+  }
+
+  .slidedown-enter, .slidedown-leave {
+    max-height: 0 !important;
+  }
+  .demo {
+    margin: 20px 0;
+  }
+</style>
+
+<template>
+  <div class="pure-g">
+    <div class="pure-u-1-6 app__sidebar pure-menu pure-menu-scrollable app__menu">
+      <a class="pure-menu-heading app__brand" v-link="'/'">
+        <span class="app__eleme">ELEME</span>NT
+      </a>
+
+      <template v-for="nav in navs">
+        <a
+          href="#"
+          @click.prevent="navState.$set($index, !navState[$index] || false)"
+          class="pure-menu-heading app__menu__label"
+          :class="{ 'unfold': !navState[$index] }"
+          v-text="nav.group"></a>
+        <ul
+          class="pure-menu-list"
+          transition="slidedown"
+          v-show="!navState[$index]"
+          :style="{
+            maxHeight: nav.list.length * 44 + 'px'
+          }">
+          <li
+            class="pure-menu-item app__menu__item"
+            v-for="item in nav.list"
+            v-if="!item.disabled">
+            <a
+              class="pure-menu-link app__menu__link"
+              v-link="{ path: item.path, activeClass: 'active' }"
+              v-text="item.name"></a>
+          </li>
+        </ul>
+      </template>
+
+    </div>
+    <div class="pure-u-5-6 app__content">
+      <header class="app__header">
+        <h1 class="app__headline">{{ $route.title || 'element 后台组件' }}</h1>
+      </header>
+      <section class="app__main" v-el:main>
+        <p class="app__description">{{ $route.description }}</p>
+        <router-view></router-view>
+      </section>
+      <toc main=".app__main"></toc>
+    </div>
+  </div>
+
+  <button class="hljs__button" v-el:button></button>
+</template>
+
+<script>
+  import { navs } from './route.config';
+  import toc from './components/toc';
+  import E from 'oui-dom-events';
+  import { toggleClass, addClass, removeClass } from './dom/class';
+
+  export default {
+    name: 'app',
+
+    components: {
+      toc
+    },
+
+    data() {
+      return {
+        highlights: [],
+        navState: []
+      };
+    },
+
+    methods: {
+      findAllHighlight() {
+        return Array.prototype.slice.call(document.querySelectorAll('.hljs'));
+      }
+    },
+
+    created() {
+      this.navs = navs;
+    },
+
+    ready() {
+      this.mainContent = document.querySelector('.app__content');
+
+      E.delegate(this.$els.main, '.hljs__button', 'click.highlight', e => {
+        const parent = e.target.parentNode;
+
+        toggleClass(parent, 'open');
+      });
+    },
+
+    beforeDestroy() {
+      E.undelegate(this.$els.main, '.hljs', 'click.highlight');
+    },
+
+    watch: {
+      highlights(list) {
+        list.map(item => {
+          if (item.offsetHeight <= 100) {
+            toggleClass(item, 'open');
+          } else {
+            item.appendChild(this.$els.button.cloneNode(true));
+          }
+        });
+      }
+    },
+
+    events: {
+      ['element.example.reload']() {
+        this.$nextTick(() => {
+          if (this.mainContent.querySelector('.no-toc')) {
+            addClass(this.mainContent, 'no-toc');
+          } else {
+            removeClass(this.mainContent, 'no-toc');
+          }
+
+          this.highlights = this.findAllHighlight();
+        });
+        this.mainContent.scrollTop = 0;
+        return true;
+      }
+    }
+  };
+</script>

examples/assets/styles/common.css

+.app__content {
+  min-width: 740px;
+
+  &.no-toc {
+    min-width: 660px;
+
+    .app__main {
+      max-width: 906px;
+      margin: 36px 42px;
+    }
+  }
+
+  .app__main {
+    margin: 36px 242px 36px 42px;
+  }
+}
+
+.app__main.commonpage {
+  p {
+    color: #333;
+    font-size: 14px;
+    line-height: 22px;
+    margin-bottom: 0;
+  }
+
+  small {
+    color: #ccc;
+    font-size: 12px;
+    font-weight: normal;
+    padding-left: 20px;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+  }
+
+  li {
+    color: #333;
+    font-size: 14px;
+    line-height: 22px;
+
+    &::before {
+      content: "-";
+      margin: 0 4px;
+    }
+  }
+
+  hr {
+    border-color: #e4e4e4;
+    border-style: solid;
+    margin: 36px 0;
+    border-top: 0;
+  }
+
+  a {
+    color: #2270c1;
+  }
+
+  code {
+    background-color: #f8f8f8;
+    padding: 4px;
+    color: #666;
+  }
+
+  .hljs {
+    max-height: 100%;
+    min-height: 100%;
+    background-color: #f8f8f8;
+    border: none;
+    color: #666;
+    padding: 20px 36px;
+    margin: 16px 0;
+
+    &::before {
+      content: none;
+    }
+
+    .hljs-comment, .hljs-quote {
+      color: #aaa;
+    }
+
+    .hljs__button {
+      display: none;
+    }
+  }
+}
\ No newline at end of file

examples/components/lightbox.vue

+<template>
+  <div class="dialog d-popup-center"
+    v-if="rendered"
+    v-show="visible"
+    :transition="transition">
+    <div class="dialog-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Popup from 'vue-popup';
+  import 'vue-popup/lib/popup.css';
+
+  export default {
+    mixins: [Popup],
+
+    props: {
+      showClose: {
+        type: Boolean,
+        default: true
+      },
+      showModal: {
+        type: Boolean,
+        default: true
+      },
+      modal: {
+        default: true
+      },
+      closeOnClickModal: {
+        default: true
+      }
+    },
+
+    methods: {
+      willClose() {
+        this.visible = false;
+      }
+    }
+  };
+</script>
+
+<style lang="css">
+  .dialog {
+    position: fixed;
+
+    img {
+      width: 60vw;
+    }
+  }
+  .app__main .d-modal {
+    margin: 0;
+  }
+</style>
\ No newline at end of file

examples/components/table-filter.vue

+<template>
+  <div class="table-filter" v-show="visible">haha</div>
+</template>
+
+<style scoped>
+  .table-filter {
+    position: absolute 0 100px * *;
+    background-color: #fff;
+  }
+</style>
+
+<script type="text/babel">
+  export default {
+    data() {
+      return {
+        visible: true
+      };
+    },
+
+    events: {
+      toggleFilterPopup(visibleFilter) {
+        this.visible = visibleFilter === 'tag';
+      }
+    },
+
+    ready() {
+      console.log('popup ready');
+    }
+  };
+</script>
\ No newline at end of file

examples/components/toc-item.vue

+<template>
+  <li class="item">
+    <a
+      class="toc__link"
+      :class="{ 'active': active === item.id }"
+      :href="'#' + encodeURIComponent(item.heading)"
+      v-text="item.heading">
+    </a>
+    <ol
+      class="group"
+      v-if="item.children"
+      v-show="active >= item.id && active <= (item.id + item.children.length || 0)">
+      <el-toc-item
+        :item="sub"
+        class="item"
+        :active="active"
+        v-for="sub in item.children">
+      </el-toc-item>
+    </ol>
+  </li>
+</template>
+
+<script>
+  /**
+   * 浮动在右边的目录子项
+   */
+  export default {
+    name: 'el-toc-item',
+
+    props: {
+      item: Object,
+      active: Number
+    },
+
+    methods: {
+      encodeURIComponent(source) {
+        return encodeURIComponent(source);
+      }
+    }
+  };
+</script>
+
+<style lang="css">
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+</style>

examples/components/toc.vue

+<template>
+  <nav
+    class="toc"
+    :class="{ 'toc--fixed': fixed }"
+    :style="{ 'top': offset + 'px' }">
+    <ol class="group">
+      <el-toc-item
+        v-for="item in toc"
+        class="title"
+        :active="active"
+        :item="item">
+      </el-toc-item>
+    </ol>
+  </nav>
+</template>
+
+<script>
+  import ElTocItem from './toc-item';
+  import E from 'oui-dom-events';
+
+  /**
+   * 浮动在右边的目录
+   */
+  export default {
+    name: 'toc',
+
+    components: {
+      ElTocItem
+    },
+
+    props: {
+      main: {
+        type: String,
+        required: true
+      }
+    },
+
+    data() {
+      return {
+        toc: [],
+        offset: 0,
+        fixed: false,
+        active: 0
+      };
+    },
+
+    events: {
+      ['element.example.reload']() {
+        this.$nextTick(() => {
+          this.toc = [];
+          this.anchors = this.findAllAnchors();
+          this.scrollWrap = document.querySelector('body');
+          this.currentHeaderHeight = document.querySelector('.app__main:first-of-type').offsetTop;
+          this.fixedOffsetTop = document.querySelector('.app__menu__label').offsetTop;
+          this.updateFixed();
+
+          this.generateTOC(this.anchors, this.toc);
+          E.off(this.scrollWrap, 'mousewheel.toc.activecurrent');
+          this.scrollActiveCurrent();
+        });
+      }
+    },
+
+    ready() {
+      this.scrollAutoFixed();
+    },
+
+    methods: {
+      /**
+       * @see https://github.com/chjj/marked/issues/334
+       */
+      generateTOC(anchors, toc) {
+        if (document.querySelector('.no-toc')) {
+          return;
+        }
+
+        let cache = {};
+
+        for (let key in anchors) {
+          const current = this.fetchAnchorData(anchors[key]);
+          const level = current.level || 1;
+          const last = cache[level - 1];
+
+          current.id = Number(key);
+
+          if (last) {
+            last.children = (last.children || []).concat(current);
+          } else {
+            cache[level] = current;
+            toc.push(current);
+          }
+        }
+      },
+
+      fetchAnchorData(anchor) {
+        const head = anchor.parentNode;
+        const level = head.tagName.match(/\d/g)[0];
+        const heading = head.getAttribute('id');
+
+        return { level, heading };
+      },
+
+      updateFixed() {
+        if (this.scrollWrap.scrollTop <= this.fixedOffsetTop / 2) {
+          this.offset = this.currentHeaderHeight;
+          this.fixed = false;
+          return;
+        }
+
+        if (this.fixed) return;
+
+        this.offset = this.fixedOffsetTop;
+        this.fixed = true;
+      },
+
+      scrollAutoFixed() {
+        E.on(document, 'mousewheel.toc.autofixed', this.updateFixed);
+      },
+
+      findAllAnchors() {
+        return Array.prototype.slice.call(document.querySelectorAll('.anchor'));
+      },
+
+      scrollActiveCurrent() {
+        const anchors = this.findAllAnchors();
+        const body = this.scrollWrap;
+        const distances = [];
+        let current;
+        let index = 0;
+        let max;
+
+        for (let anchor of anchors) {
+          distances.push(anchor.offsetTop);
+        }
+
+        current = distances[index];
+        max = distances.length - 1;
+        this.active = index;
+
+        // 记录当前滚动档位
+        // 判断当前滚动和下个档位
+        E.on(this.scrollWrap, 'mousewheel.toc.activecurrent', e => {
+          const scrollTop = body.scrollTop;
+
+          while (index < max && scrollTop > current) {
+            current = distances[++index];
+            this.active = index;
+          }
+
+          while (index && scrollTop < current) {
+            current = distances[--index];
+            this.active = index;
+          }
+        });
+      }
+    },
+
+    beforeDestroy() {
+      E.off(this.scrollWrap, 'mousewheel.toc.autofixed');
+      E.off(this.scrollWrap, 'mousewheel.toc.activecurrent');
+    }
+  };
+</script>
+
+<style lang="css">
+  .toc {
+    color: #999;
+    margin-right: 40px;
+    margin-top: -14px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 160px;
+
+    &.toc--fixed {
+      position: fixed;
+    }
+
+    .group {
+      font-size: 13px;
+      list-style-type: none;
+      margin: 0;
+      padding-left: 12px;
+    }
+
+    .item {
+      margin: 14px 0;
+
+      .toc__link:hover,
+      .toc__link.active {
+        color: #216fc1;
+      }
+
+      .group {
+        border-left: 1px solid rgba(31, 109, 191, .5);
+      }
+    }
+
+    .title {
+      margin-bottom: 18px;
+    }
+  }
+</style>

examples/data/cascader.json

+[
+  {
+    "label": "普通业务",
+    "value": "普通业务",
+    "children": [
+      {
+        "label": "业务1",
+        "value": "业务1",
+        "children": [
+          {
+            "label": "业务5",
+            "value": "业务5",
+            "children": []
+          }
+        ]
+      },
+      {
+        "label": "业务2",
+        "value": "业务2",
+        "children": []
+      }
+    ]
+  },
+  {
+    "label": "会员业务",
+    "value": "会员业务",
+    "children": []
+  }
+]

examples/data/select-disabled.json

+[
+  {
+    "label": "选项1",
+    "value": "结果1"
+  },
+  {
+    "label": "选项2",
+    "value": "结果2",
+    "disabled": true
+  },
+  {
+    "label": "选项3",
+    "value": "结果3"
+  },
+  {
+    "label": "选项4",
+    "value": "结果4"
+  }
+]

examples/data/select-group.json

+{
+  "gourp1": [
+    {
+      "label": "选项1",
+      "value": "结果1"
+    },
+    {
+      "label": "选项2",
+      "value": "结果2"
+    },
+    {
+      "label": "选项3",
+      "value": "结果3"
+    },
+    {
+      "label": "选项4",
+      "value": "结果4"
+    },
+    {
+      "label": "选项5",
+      "value": "结果5"
+    },
+    {
+      "label": "选项6",
+      "value": "结果6"
+    }
+  ],
+  "gourp2": [
+    {
+      "label": "选项7",
+      "value": "结果7"
+    },
+    {
+      "label": "选项8",
+      "value": "结果8"
+    },
+    {
+      "label": "选项9",
+      "value": "结果9"
+    },
+    {
+      "label": "选项10",
+      "value": "结果10"
+    },
+    {
+      "label": "选项11",
+      "value": "结果11"
+    },
+    {
+      "label": "选项12",
+      "value": "结果12"
+    }
+  ]
+}
\ No newline at end of file

examples/data/select-normal.json

+[
+  {
+    "label": "选项1",
+    "value": "结果1",
+    "remark": "remark1"
+  },
+  {
+    "label": "选项2",
+    "value": "结果2",
+    "remark": "remark2"
+  },
+  {
+    "label": "选项3",
+    "value": "结果3",
+    "remark": "remark3"
+  },
+  {
+    "label": "选项4",
+    "value": "结果4",
+    "remark": "remark4"
+  },
+  {
+    "label": "选项5",
+    "value": "结果5",
+    "remark": "remark5"
+  },
+  {
+    "label": "选项6",
+    "value": "结果6",
+    "remark": "remark6"
+  }
+]

examples/docs/alert.md

+<style>
+  .demo-box.demo-alert .el-alert {
+    margin: 20px 0 0;
+  }
+</style>
+
+## 基本用法
+
+<div class="demo-box demo-alert">
+  <el-alert title="成功提示的文案" type="success"></el-alert>
+  <el-alert title="消息提示的文案" type="info"></el-alert>
+  <el-alert title="警告提示的文案" type="warning"></el-alert>
+  <el-alert title="错误提示的文案" type="error"></el-alert>
+</div>
+
+```html
+<el-alert title="成功提示的文案" type="success"></el-alert>
+<el-alert title="消息提示的文案" type="info"></el-alert>
+<el-alert title="警告提示的文案" type="warning"></el-alert>
+<el-alert title="错误提示的文案" type="error"></el-alert>
+```
+
+## 自定义关闭按钮
+
+<div class="demo-box demo-alert">
+  <el-alert title="成功提示的文案" type="success" close-text="知道了"></el-alert>
+</div>
+
+```html
+<el-alert title="成功提示的文案" type="success" close-text="知道了"></el-alert>
+```
+
+## 带有 icon
+
+<div class="demo-box demo-alert">
+  <el-alert title="成功提示的文案" type="success" show-icon></el-alert>
+  <el-alert title="消息提示的文案" type="info" show-icon></el-alert>
+  <el-alert title="警告提示的文案" type="warning" show-icon></el-alert>
+  <el-alert title="错误提示的文案" type="error" show-icon></el-alert>
+</div>
+
+```html
+<el-alert title="成功提示的文案" type="success" show-icon></el-alert>
+<el-alert title="消息提示的文案" type="info" show-icon></el-alert>
+<el-alert title="警告提示的文案" type="warning" show-icon></el-alert>
+<el-alert title="错误提示的文案" type="error" show-icon></el-alert>
+```
+
+## 带有辅助性文字介绍
+
+<div class="demo-box demo-alert">
+  <el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明"></el-alert>
+</div>
+
+```html
+<el-alert
+  title="成功提示的文案"
+  type="success"
+  description="文字说明文字说明文字说明文字说明文字说明文字说明">
+</el-alert>
+```
+
+## 带有 icon 和辅助性文字介绍
+
+<div class="demo-box demo-alert">
+  <el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
+  <el-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
+  <el-alert title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
+  <el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
+</div>
+
+```html
+<el-alert
+  title="成功提示的文案"
+  type="success"
+  description="文字说明文字说明文字说明文字说明文字说明文字说明"
+  show-icon>
+</el-alert>
+
+<el-alert
+  title="消息提示的文案"
+  type="info"
+  description="文字说明文字说明文字说明文字说明文字说明文字说明"
+  show-icon>
+</el-alert>
+
+<el-alert
+  title="警告提示的文案"
+  type="warning"
+  description="文字说明文字说明文字说明文字说明文字说明文字说明"
+  show-icon>
+</el-alert>
+
+<el-alert
+  title="错误提示的文案"
+  type="error"
+  description="文字说明文字说明文字说明文字说明文字说明文字说明"
+  show-icon>
+</el-alert>
+```
+
+## API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| title | 标题, 必选参数 | string | | |
+| type | 主题 | string | 'success', 'warning', 'info', 'error' | 'info' |
+| description | 说明文字 | string | | |
+| closable | 是否可关闭 | boolean | | true |
+| closeText | 关闭按钮自定义文本 | string | | |
+| showIcon | 是否显示图标 | boolean | | false |
+| onClose | 关闭时的回调函数 | function | | |

examples/docs/breadcrumb.md

+## 基础使用
+
+<div>
+  <el-breadcrumb>
+    <el-breadcrumb-item>Home</el-breadcrumb-item>
+    <el-breadcrumb-item>Page 1</el-breadcrumb-item>
+    <el-breadcrumb-item>Page 1-2</el-breadcrumb-item>
+    <el-breadcrumb-item>Page 1-2-1</el-breadcrumb-item>
+  </el-breadcrumb>
+</div>
+
+
+```html
+<el-breadcrumb>
+  <el-breadcrumb-item>Home</el-breadcrumb-item>
+  <el-breadcrumb-item>Page 1</el-breadcrumb-item>
+  <el-breadcrumb-item>Page 1-2</el-breadcrumb-item>
+  <el-breadcrumb-item>Page 1-2-1</el-breadcrumb-item>
+</el-breadcrumb>
+```
+
+## API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| separator | 分隔符 | string | | 反斜杠'/' |

examples/docs/button.md

+<script>
+  export default {
+    data() {
+      return {
+        isLoading: false,
+        isLoading2: false
+      };
+    },
+    methods: {
+      handleClick(event) {
+        console.log(event);
+        alert('button clicked!');
+      }
+    }
+  }
+</script>
+<style>
+  .demo-box.demo-button {
+    .el-button + .el-button {
+      margin-left: 10px;
+    }
+    .el-button-group {
+      margin-bottom: 20px;
+
+      .el-button + .el-button {
+        margin-left: 0;
+      }
+    }
+  }
+</style>
+
+## 基础用法
+
+<div class="demo-box demo-button">
+  <el-button>Default</el-button>
+  <el-button type="primary">primary</el-button>
+  <el-button type="success">success</el-button>
+  <el-button type="warning">warning</el-button>
+  <el-button type="danger">danger</el-button>
+  <el-button type="info">info</el-button>
+  <el-button :disabled="true">disabled</el-button>
+  <el-button type="text">text button</el-button>
+</div>
+
+```html
+<el-button>Default</el-button>
+<el-button type="primary">primary</el-button>
+<el-button type="success">success</el-button>
+<el-button type="warning">warning</el-button>
+<el-button type="danger">danger</el-button>
+<el-button type="info">info</el-button>
+<el-button :disabled="true">disabled</el-button>
+<el-button type="text">text button</el-button>
+```
+
+## Plain Button
+
+<div class="demo-box demo-button">
+  <el-button :plain="true">Default</el-button>
+  <el-button :plain="true" type="success">success</el-button>
+  <el-button :plain="true" type="warning">warning</el-button>
+  <el-button :plain="true" type="danger">danger</el-button>
+  <el-button :plain="true" :disabled="true">disabled</el-button>
+</div>
+
+```html
+<el-button :plain="true">Default</el-button>
+<el-button :plain="true" type="success">success</el-button>
+<el-button :plain="true" type="warning">warning</el-button>
+<el-button :plain="true" type="danger">danger</el-button>
+<el-button :plain="true" :disabled="true">disabled</el-button>
+```
+
+## 尺寸
+
+<div class="demo-box demo-button">
+  <el-button type="primary" size="large">large</el-button>
+  <el-button type="primary">Default</el-button>
+  <el-button type="primary" size="small">small</el-button>
+  <el-button type="primary" size="mini">mini</el-button>
+</div>
+
+```html
+<el-button type="primary" size="large">large</el-button>
+<el-button type="primary">Default</el-button>
+<el-button type="primary" size="small">small</el-button>
+<el-button type="primary" size="mini">mini</el-button>
+```
+
+## Loading
+
+<div class="demo-box demo-button">
+  <el-button type="primary" :loading="true">Button</el-button>
+</div>
+<p>点击后变成 loading 状态</p>
+<div class="demo-box demo-button">
+  <el-button type="primary" :loading="isLoading" @click="isLoading = true">Button</el-button>
+  <el-button type="primary" icon="search" :loading="isLoading2" @click="isLoading2 = true">Button</el-button>
+</div>
+
+```html
+<el-button type="primary" :loading="true">Button</el-button>
+
+<el-button type="primary" :loading="isLoading" @click="isLoading = true">Button</el-button>
+<el-button type="primary" icon="search" :loading="isLoading2" @click="isLoading2 = true">Button</el-button>
+```
+
+## 图标按钮
+
+<div class="demo-box demo-button">
+  <el-button type="primary" icon="edit"></el-button>
+  <el-button type="primary" icon="search">Search</el-button>
+  <el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
+</div>
+
+```html
+<el-button type="primary" icon="edit"></el-button>
+<el-button type="primary" icon="search">Search</el-button>
+<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
+```
+
+## 按钮组
+
+<div class="demo-box demo-button">
+  <el-button-group>
+    <el-button>Button</el-button>
+    <el-button>Button</el-button>
+    <el-button>Button</el-button>
+  </el-button-group>
+  <div></div>
+  <el-button-group>
+    <el-button type="primary" icon="edit"></el-button>
+    <el-button type="primary" icon="share"></el-button>
+    <el-button type="primary" icon="delete"></el-button>
+  </el-button-group>
+</div>
+
+```html
+<el-button-group>
+  <el-button>Button</el-button>
+  <el-button>Button</el-button>
+  <el-button>Button</el-button>
+</el-button-group>
+<div></div>
+<el-button-group>
+  <el-button type="primary" icon="edit"></el-button>
+  <el-button type="primary" icon="share"></el-button>
+  <el-button type="primary" icon="delete"></el-button>
+</el-button-group>
+```
+
+## API
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| size     | 尺寸   | string  |   large,small,mini            |         |
+| type     | 类型   | string    |   primary,success,warning,danger,info,text |         |
+| plain     | 是否朴素按钮   | Boolean    | true,false | false   |
+| disabled  | 禁用    | boolean   | true, false   | false   |
+| icon  | 图标，已有的图标库中的图标名 | string   |    |    |

examples/docs/checkbox.md

+<script>
+  module.exports = {
+    data() {
+      return {
+        checkList: ['选中且禁用','复选框 A'],
+        // checkList2: ['复选框 A'],
+        checked: true,
+        name: 'Jonny',
+        a: 'Jonny',
+        b: 'Lara'
+      };
+    }
+  };
+</script>
+
+
+<style>
+  .demo-box.demo-checkbox {
+    .checkbox {
+      margin-right: 5px;
+
+      & + .checkbox {
+        margin-left: 10px;
+      }
+    }
+  }
+</style>
+
+## 基础用法
+
+### 单个勾选框，逻辑值
+
+<div class="demo-box demo-checkbox">
+  <el-checkbox class="checkbox" :value.sync="checked">{{checked | json}}</el-checkbox>
+</div>
+
+```html
+<el-checkbox class="checkbox" :value.sync="checked">{{checked | json}}</el-checkbox>
+```
+
+### 多个勾选框，绑定到同一个数组
+
+<div class="demo-box demo-checkbox">
+  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 A"></el-checkbox>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 B"></el-checkbox>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 C"></el-checkbox>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="禁用" disabled></el-checkbox>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="选中且禁用" disabled></el-checkbox>
+</div>
+
+<p>{{checkList | json}}</p>
+
+```html
+<template>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 A"></el-checkbox>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 B"></el-checkbox>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 C"></el-checkbox>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="禁用" disabled></el-checkbox>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="选中且禁用" disabled></el-checkbox>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        checkList: ['选中且禁用','复选框 A']
+      }
+    }
+  }
+</script>
+```
+
+### 绑定 value：
+
+<div class="demo-box demo-checkbox">
+  <el-checkbox
+    class="checkbox"
+    :value.sync="name"
+    :true-label="a"
+    :false-label="b"
+    >
+  </el-checkbox>{{name}}
+</div>
+
+```html
+<el-checkbox
+  class="checkbox"
+  :value.sync="name"
+  :true-label="a"
+  :false-label="b"
+  >
+</el-checkbox>
+```
+
+```js
+vm.a = 'Jonny';
+vm.b = 'Lara';
+// 当选中时
+vm.name === vm.a
+// 当没有选中时
+vm.name === vm.b
+```
+
+## API
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| model     | 绑定值   | string\|string[]\|boolean  |               |         |
+| value     | 真实值   | string    |               |         |
+| label     | 显示值，不填则显示 value   | string    |               |         |
+| disabled  | 禁用    | boolean   | true, false   | false   |

examples/docs/date-picker.md

+<script>
+  module.exports = {
+    data() {
+      return {
+        pickerOptions1: {
+          shortcuts: [{
+            text: '今天',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: '昨天',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: '一周前',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        },
+        pickerOptions2: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        }
+      };
+    }
+  };
+</script>
+
+## 日期点
+
+###  日
+
+以『日』为基本单位
+
+<el-date-picker
+  type="date"
+  placeholder="选择日期">
+</el-date-picker>
+
+```html
+<el-date-picker
+  type="date"
+  placeholder="选择日期">
+</el-date-picker>
+```
+
+###  周
+
+以『周』为基本单位
+
+<el-date-picker
+  type="week"
+  format="yyyy 第 WW 周"
+  placeholder="选择周">
+</el-date-picker>
+
+```html
+<el-date-picker
+  type="week"
+  format="yyyy 第 WW 周"
+  placeholder="选择周">
+</el-date-picker>
+```
+
+###  月
+
+以『月』为基本单位
+
+<el-date-picker
+  type="month"
+  placeholder="选择月">
+</el-date-picker>
+
+```html
+<el-date-picker
+  type="month"
+  placeholder="选择月">
+</el-date-picker>
+```
+
+###  年
+
+以『年』为基本单位
+
+<el-date-picker
+  type="year"
+  placeholder="选择日期">
+</el-date-picker>
+
+```html
+<el-date-picker
+  type="year"
+  placeholder="选择日期">
+</el-date-picker>
+```
+
+###  含快捷选项
+
+左侧区域可配置快捷选项，例如『今天』、『昨天』等
+
+<el-date-picker
+  type="date"
+  placeholder="选择日期"
+  :picker-options="pickerOptions1">
+</el-date-picker>
+
+```html
+<el-date-picker
+  type="date"
+  placeholder="选择日期"
+  :picker-options="pickerOptions1">
+</el-date-picker>
+
+<script>
+  module.exports = {
+    data() {
+      return {
+        pickerOptions1: {
+          shortcuts: [{
+            text: '今天',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: '昨天',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: '一周前',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        }
+      };
+    }
+  };
+</script>
+```
+
+## 日期范围
+
+###  日期范围
+
+在一个选择器中选择
+
+<el-date-picker
+  type="daterange"
+  placeholder="选择日期范围"
+  style="width: 220px">
+</el-date-picker>
+
+```html
+<el-date-picker
+  type="daterange"
+  placeholder="选择日期范围"
+  style="width: 220px">
+</el-date-picker>
+```
+
+###  含快捷选项
+
+左侧区域可配置快捷选项，例如『最近一周』、『最近一个月』等
+
+<el-date-picker
+  type="daterange"
+  placeholder="选择日期范围"
+  :picker-options="pickerOptions2"
+  style="width: 220px">
+</el-date-picker>
+
+```html
+<el-date-picker
+  type="daterange"
+  placeholder="选择日期范围"
+  :picker-options="pickerOptions2"
+  style="width: 220px">
+</el-date-picker>
+
+<script>
+  module.exports = {
+    data() {
+      return {
+        pickerOptions2: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        }
+      };
+    }
+  };
+</script>
+```
+
+## API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| value | 绑定值，需双向绑定 | String |   |  |
+| readonly | 只读 | Boolean |  | false |
+| placeholder | 占位内容 | String |  |  |
+| type | 显示类型 | String | year, month, date, datetime, week | date |
+| format | 时间日期格式化 | String | 年 `yyyy`, 月 `MM`, 日 `dd`, 小时 `HH`, 分 `mm`, 秒 `ss` | 'yyyy-MM-dd' |
+| shortcuts | 快捷选项列表，配置信息查看下表 | Object[] | | |
+
+### shortcuts
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| text |  标题 | String | | |
+| onClick | 选中后会调用函数，参数是 vm，设置值通过触发 'pick' 事件。例如 vm.$emit('pick', new Date()) | Function | | |

examples/docs/development.md

+待补充
\ No newline at end of file

examples/docs/dialog.md

+<script>
+  module.exports = {
+    data() {
+      return {
+        gridData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }],
+        dialogVisible: false,
+        dialogTinyVisible: false,
+        dialogFullVisible: false,
+        dialogStubbornVisible: false,
+        dialogTableVisible: false,
+        dialogFormVisible: false,
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        formLabelWidth: '80px'
+      };
+    }
+  };
+</script>
+
+<style>
+  .demo-box.demo-dialog {
+    .dialog-footer button:first-child {
+      margin-right: 10px;
+    }
+    .full-image {
+      width: 100%;
+    }
+    .el-dialog__wrapper {
+      margin: 0;
+    } 
+    .el-input {
+      width: 300px;
+    }
+  }
+</style>
+
+## 基本用法
+
+<el-button :plain="true" v-on:click="dialogVisible = true">点击打开 Dialog</el-button>
+
+<div class="demo-box demo-dialog">
+  <el-dialog title="提示" :visible.sync="dialogVisible">
+    <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+    </span>
+  </el-dialog>
+</div>
+
+```html
+<el-button :plain="true" v-on:click="openDialog">点击打开 Dialog</el-button>
+
+<el-dialog title="提示" :visible.sync="dialogVisible">
+  <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+  </span>
+</el-dialog>
+```
+
+## 设置尺寸
+
+<el-button :plain="true" v-on:click="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
+
+<div class="demo-box demo-dialog">
+  <el-dialog title="提示" :visible.sync="dialogTinyVisible" size="tiny">
+    <span>这是一段内容</span>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogTinyVisible = false">取 消</el-button>
+      <el-button type="primary" @click="dialogTinyVisible = false">确 定</el-button>
+    </span>
+  </el-dialog>
+</div>
+
+```html
+<el-button :plain="true" v-on:click="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
+
+<el-dialog title="提示" :visible.sync="dialogTinyVisible" size="tiny">
+  <span>这是一段内容</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogTinyVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogTinyVisible = false">确 定</el-button>
+  </span>
+</el-dialog>
+```
+
+<el-button v-on:click="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
+
+<div class="demo-box demo-dialog">
+  <el-dialog title="提示" :visible.sync="dialogFullVisible" size="full">
+    <img src="http://placekitten.com/1920/1280" class="full-image">
+  </el-dialog>
+</div>
+
+```html
+<el-button v-on:click="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
+
+<el-dialog title="提示" :visible.sync="dialogFullVisible" size="full">
+  <img src="http://placekitten.com/1920/1280">
+</el-dialog>
+```
+
+## 设置能否通过点击modal或按下esc关闭dialog
+
+<el-button v-on:click="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
+
+<div class="demo-box demo-dialog">
+  <el-dialog title="提示" :visible.sync="dialogStubbornVisible" :close-on-click-modal="false" :close-on-press-escape="false">
+    <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
+  </el-dialog>
+</div>
+
+```html
+<el-button v-on:click="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
+
+<el-dialog title="提示" :visible.sync="dialogStubbornVisible" :close-on-click-modal="false" :close-on-press-escape="false">
+  <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
+</el-dialog>
+```
+
+## 自定义内容
+
+<el-button v-on:click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
+
+<div class="demo-box demo-dialog">
+  <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
+    <el-table :data="gridData">
+      <el-table-column property="date" label="日期" width="150"></el-table-column>
+      <el-table-column property="name" label="姓名" width="200"></el-table-column>
+      <el-table-column property="address" label="地址"></el-table-column>
+    </el-table>
+  </el-dialog>
+</div>
+
+<el-button v-on:click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
+
+<div class="demo-box demo-dialog">
+  <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
+    <el-form :models="form" v-ref:form>
+      <el-form-item label="活动名称" :label-width="formLabelWidth">
+        <el-input :model.sync="form.name" auto-complete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="活动区域" :label-width="formLabelWidth">
+        <el-select :value.sync="form.region" :width="300" placeholder="请选择活动区域">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogFormVisible = false">取 消</el-button>
+      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+    </span>
+  </el-dialog>
+</div>
+
+```html
+<el-button v-on:click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
+
+<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
+  <el-table :data="gridData">
+    <el-table-column property="date" label="日期" width="150"></el-table-column>
+    <el-table-column property="name" label="姓名" width="200"></el-table-column>
+    <el-table-column property="address" label="地址"></el-table-column>
+  </el-table>
+</el-dialog>
+
+<el-button v-on:click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
+
+<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
+  <el-form :models="form" v-ref:form>
+    <el-form-item label="活动名称" :label-width="formLabelWidth">
+      <el-input :model.sync="form.name" auto-complete="off"></el-input>
+    </el-form-item>
+    <el-form-item label="活动区域" :label-width="formLabelWidth">
+      <el-select :value.sync="form.region" :width="300" placeholder="请选择活动区域">
+        <el-option label="区域一" value="shanghai"></el-option>
+        <el-option label="区域二" value="beijing"></el-option>
+      </el-select>
+    </el-form-item>
+  </el-form>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogFormVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+  </span>
+</el-dialog>
+```
+
+## API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| title     | dialog 的标题 | string    |                                  |         |
+| size      | dialog 的大小 | string    | 'tiny', 'small', 'large', 'full' | 'small' |
+| customClass      | dialog 的自定义类名 | string    | | |
+| closeOnClickModal | 是否可以通过点击 modal 关闭 dialog | boolean    |  | true |
+| closeOnPressEscape | 是否可以通过按下 esc 关闭 dialog | boolean    |  | true |
+
+## Slot
+| name | 说明 |
+|------|--------|
+| - | dialog 的内容 |
+| footer | dialog 按钮操作区的内容 |

examples/docs/dropdown.md

+<style>
+  .demo-box {
+    .el-dropdown {
+      vertical-align: top;
+
+      & .el-button-group {
+        margin-bottom: 0;
+      }
+      & + .el-dropdown {
+        margin-left: 15px;
+      }
+    }
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      handleMainClick() {
+        alert('click main button');
+      }
+    }
+  }
+</script>
+
+## 基础用法
+
+<p>通过与 button 一致的 type 属性来指定菜单按钮类型。</p>
+
+<div class="demo-box">
+  <el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()">
+    <el-dropdown-item>选项一</el-dropdown-item>
+    <el-dropdown-item>选项二</el-dropdown-item>
+    <el-dropdown-item>选项三</el-dropdown-item>
+    <el-dropdown-item>选项四 哈哈哈哈</el-dropdown-item>
+  </el-dropdown>
+</div>
+
+```html
+<el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()">
+  <el-dropdown-item>选项一</el-dropdown-item>
+  <el-dropdown-item>选项二</el-dropdown-item>
+  <el-dropdown-item>选项三</el-dropdown-item>
+  <el-dropdown-item>选项四</el-dropdown-item>
+</el-dropdown>
+```
+
+## 不带独立按钮的下拉菜单
+
+可以通过将`icon-separate`属性设为`false`来呈现不带独立按钮的下拉菜单。
+
+<el-dropdown text="下拉菜单" type="primary" :icon-separate="false">
+  <el-dropdown-item>选项一</el-dropdown-item>
+  <el-dropdown-item>选项二</el-dropdown-item>
+  <el-dropdown-item>选项三</el-dropdown-item>
+  <el-dropdown-item class="divider">选项四</el-dropdown-item>
+</el-dropdown>
+
+```html
+<el-dropdown text="下拉菜单" type="primary" :icon-separate="false">
+  <el-dropdown-item>选项一</el-dropdown-item>
+  <el-dropdown-item>选项二</el-dropdown-item>
+  <el-dropdown-item>选项三</el-dropdown-item>
+  <el-dropdown-item class="divider">选项四</el-dropdown-item>
+</el-dropdown>
+```
+
+## 通过点击触发下拉
+
+<div class="demo-box">
+  <el-dropdown text="主要按钮" type="primary" trigger="click">
+    <el-dropdown-item>选项一</el-dropdown-item>
+    <el-dropdown-item>选项二</el-dropdown-item>
+    <el-dropdown-item>选项三</el-dropdown-item>
+    <el-dropdown-item>选项四 哈哈哈哈</el-dropdown-item>
+  </el-dropdown>
+  <el-dropdown text="下拉菜单" type="primary" :icon-separate="false" trigger="click">
+    <el-dropdown-item>选项一</el-dropdown-item>
+    <el-dropdown-item>选项二</el-dropdown-item>
+    <el-dropdown-item>选项三</el-dropdown-item>
+    <el-dropdown-item class="divider">选项四</el-dropdown-item>
+  </el-dropdown>
+</div>
+
+```html
+<el-dropdown text="主要按钮" type="primary" trigger="click">
+  <el-dropdown-item>选项一</el-dropdown-item>
+  <el-dropdown-item>选项二</el-dropdown-item>
+  <el-dropdown-item>选项三</el-dropdown-item>
+  <el-dropdown-item>选项四</el-dropdown-item>
+</el-dropdown>
+<el-dropdown text="下拉菜单" type="primary" :icon-separate="false" trigger="click">
+  <el-dropdown-item>选项一</el-dropdown-item>
+  <el-dropdown-item>选项二</el-dropdown-item>
+  <el-dropdown-item>选项三</el-dropdown-item>
+  <el-dropdown-item class="divider">选项四</el-dropdown-item>
+</el-dropdown>
+```
+
+## 文字类型下拉菜单
+
+<div class="demo-box">
+  <el-dropdown text="下拉菜单" type="text" :icon-separate="false">
+    <el-dropdown-item>选项一</el-dropdown-item>
+    <el-dropdown-item>选项二</el-dropdown-item>
+    <el-dropdown-item>选项三</el-dropdown-item>
+    <el-dropdown-item class="divider">选项四</el-dropdown-item>
+  </el-dropdown>
+</div>
+
+```html
+<el-dropdown text="下拉菜单" type="text" :icon-separate="false">
+  <el-dropdown-item>选项一</el-dropdown-item>
+  <el-dropdown-item>选项二</el-dropdown-item>
+  <el-dropdown-item>选项三</el-dropdown-item>
+  <li class="divider">选项四</el-dropdown-item>
+</el-dropdown>
+```
+
+## 尺寸
+
+<div class="demo-box">
+  <el-dropdown text="下拉菜单" type="primary" size="large">
+    <el-dropdown-item>选项一</el-dropdown-item>
+    <el-dropdown-item>选项二</el-dropdown-item>
+    <el-dropdown-item>选项三</el-dropdown-item>
+    <li class="divider">选项四</el-dropdown-item>
+  </el-dropdown><el-dropdown text="下拉菜单" type="primary">
+    <el-dropdown-item>选项一</el-dropdown-item>
+    <el-dropdown-item>选项二</el-dropdown-item>
+    <el-dropdown-item>选项三</el-dropdown-item>
+    <el-dropdown-item class="divider">选项四</el-dropdown-item>
+  </el-dropdown><el-dropdown text="下拉菜单" type="primary" size="small">
+    <el-dropdown-item>选项一</el-dropdown-item>
+    <el-dropdown-item>选项二</el-dropdown-item>
+    <el-dropdown-item>选项三</el-dropdown-item>
+    <el-dropdown-item class="divider">选项四</el-dropdown-item>
+  </el-dropdown><el-dropdown text="下拉菜单" type="primary" size="mini">
+    <el-dropdown-item>选项一</el-dropdown-item>
+    <el-dropdown-item>选项二</el-dropdown-item>
+    <el-dropdown-item>选项三</el-dropdown-item>
+    <el-dropdown-item class="divider">选项四</el-dropdown-item>
+  </el-dropdown>
+</div>
+
+```html
+<el-dropdown text="下拉菜单" type="primary" size="large">
+  <el-dropdown-item>选项一</el-dropdown-item>
+  <el-dropdown-item>选项二</el-dropdown-item>
+  <el-dropdown-item>选项三</el-dropdown-item>
+  <el-dropdown-item class="divider">选项四</el-dropdown-item>
+</el-dropdown>
+```
+
+## API
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| text          | 菜单按钮文本      | string          |                       |         |
+| type          | 菜单按钮类型，同 button    | string  |                       |         |
+| trigger       | 触发下拉菜单的方式    | string  |    hover,click  |  hover |
+| icon-separate | 独立的下拉菜单按钮 | boolean         | true, false           | false   |
+| size          | 菜单按钮尺寸，同 button     | string          | large, small, mini  |     |
+| menu-align    | 菜单水平对齐方向     | string          | start, end  | end |

examples/docs/guideline.md

+<section class="guideline no-toc">
+  <h2>选择合适的导航</h2>
+  <p>选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适(方向不明确)，以下是「侧栏导航」和「顶部导航」的区别。</p>
+
+  <h3>侧栏导航：</h3>
+  <p>可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。</p>
+
+  <table>
+    <tbody>
+      <tr>
+        <td>一级类目</td>
+        <td>
+          <lightbox :visible.sync="showIndexDialog1">
+            <img src="~examples/assets/images/guide1.png" alt="一级类目">
+          </lightbox>
+          <img @click="showIndexDialog1 = true" src="~examples/assets/images/guide1.png" alt="一级类目">
+          <p>适用于结构简单的网站；只有一级页面时，不需要使用面包屑。</p>
+        </td>
+      </tr>
+      <tr>
+        <td>二级类目</td>
+        <td>
+          <lightbox :visible.sync="showIndexDialog2">
+            <img src="~examples/assets/images/guide2.png" alt="二级类目">
+          </lightbox>
+          <img @click="showIndexDialog2 = true" src="~examples/assets/images/guide2.png" alt="二级类目">
+          <p>侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。</p>
+        </td>
+      </tr>
+      <tr>
+        <td>三级类目</td>
+        <td>
+          <lightbox :visible.sync="showIndexDialog3">
+            <img src="~examples/assets/images/guide3.png" alt="三级类目">
+          </lightbox>
+          <img @click="showIndexDialog3 = true" src="~examples/assets/images/guide3.png" alt="三级类目">
+          <p>适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h3>顶部导航：</h3>
+  <p>顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。</p>
+
+  <table>
+    <tbody>
+      <tr>
+        <td>一级类目</td>
+        <td>
+          <lightbox :visible.sync="showIndexDialog4">
+            <img src="~examples/assets/images/guide4.png" alt="一级类目">
+          </lightbox>
+          <img @click="showIndexDialog4 = true" src="~examples/assets/images/guide4.png" alt="一级类目">
+          <p>适用于导航较少，页面篇幅较长的网站；</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+
+<script>
+  import Lightbox from 'examples/components/lightbox';
+
+  module.exports = {
+    name: 'guideline',
+
+    components: {
+      Lightbox
+    },
+
+    data() {
+      return {
+        showIndexDialog1: false,
+        showIndexDialog2: false,
+        showIndexDialog3: false,
+        showIndexDialog4: false
+      };
+    }
+  };
+</script>
+
+<style lang="css">
+  .guideline {
+    img {
+      width: 500px;
+      display: block;
+      margin-bottom: 19px;
+      box-shadow: 1px 2px 3px rgba(0, 0, 0, .2);
+    }
+
+    table {
+      background-color: #f8f8f8;
+      width: 100%;
+
+      p {
+        margin: 0;
+        width: 500px;
+      }
+    }
+
+    td {
+      padding: 36px;
+    }
+
+    tr {
+      border-bottom: 1px solid #e4e4e4;
+
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+
+    td:first-child {
+      background-color: #f3f3f3;
+      width: 21%;
+      min-width: 100px;
+      text-align: center;
+      color: #666;
+      font-size: 14px;
+    }
+  }
+</style>
\ No newline at end of file

examples/docs/home.md

+# 组件说明文档
+
+<script>
+  import { addClass } from 'examples/dom/class.js';
+
+  module.exports = {
+    ready() {
+      addClass(this.$el.parentNode, 'no-toc')
+    }
+  }
+</script>
\ No newline at end of file

examples/docs/icon.md

+<script>
+  var iconList = require('examples/icon.json');
+
+  export default {
+    data() {
+      return {
+        icons: iconList
+      };
+    }
+  }
+</script>
+<style>
+  .icon-list {
+    overflow: hidden;
+    list-style: none;
+    padding: 0;
+  }
+  .icon-list li {
+    float: left;
+    width: 20%;
+    text-align: center;
+    height: 120px;
+    line-height: 120px;
+    color: #666;
+    font-size: 13px;
+    transition: color .15s linear;
+
+    border-right: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    margin-right: -1px;
+    margin-bottom: -1px;
+
+    @utils-vertical-center;
+
+    & span {
+      display: inline-block;
+      line-height: normal;
+      vertical-align: middle;
+    }
+    & i {
+      display: block;
+      font-size: 30px;
+      margin-bottom: 15px;
+    }
+    &:hover {
+      color: rgb(92, 182, 255);
+      cursor: pointer;
+    }
+  }
+</style>
+## icon-font 图标
+
+我们为你提供了一套常用的图标集合。
+
+## 使用方法
+
+直接通过`el-icon-iconName`的类名来使用即可。例如：
+
+<div><i class="el-icon-search"></i></div>
+
+```html
+<i class="el-icon-search"></i>
+```
+
+也可以在按钮组件中使用图标:
+
+<div><el-button type="primary" icon="search">搜索</el-button></div>
+
+```html
+<el-button type="primary" icon="search">搜索</el-button>
+```
+
+## 图标集合
+
+<ul class="icon-list">
+  <li v-for="name in icons">
+    <span>
+      <i :class="'el-icon-' + name"></i>
+      {{'el-icon-' + name}}
+    </span>
+  </li>
+</ul>

examples/docs/input-number.md

+<script>
+  export default {
+    data() {
+      return {
+        num1: 1,
+        num2: 1
+      }
+    }
+  };
+</script>
+<style>
+  .demo-box.demo-input-number {
+    .el-input-number + .el-input-number {
+      margin-left: 10px;
+    }
+  }
+</style>
+
+## 基础使用
+
+<p>当我们需要标准的数字值时可以用到这个组件，它为你提供了数值输入提供了范围控制和递增递减的步数控制。</p>
+
+<div class="demo-box demo-input-number">
+  <el-input-number :value.sync="num1"></el-input-number>
+</div>
+
+```html
+<el-input-number :value.sync="num1"></el-input-number>
+```
+
+## 禁用状态
+
+<div class="demo-box demo-input-number">
+  <el-input-number :value.sync="num1" :disabled="true"></el-input-number>
+</div>
+
+```html
+<el-input-number :value.sync="num1" :disabled="true"></el-input-number>
+```
+
+## 步数
+
+<div class="demo-box demo-input-number">
+  <el-input-number :value.sync="num2" :step="2"></el-input-number>
+</div>
+
+```html
+<el-input-number :value.sync="num2" :step="2"></el-input-number>
+```
+
+## 尺寸
+
+<div class="demo-box demo-input-number">
+  <el-input-number :value.sync="num1" size="large"></el-input-number>
+  <el-input-number :value.sync="num1"></el-input-number>
+  <el-input-number :value.sync="num1" size="small"></el-input-number>
+</div>
+
+```html
+<el-input-number :value.sync="num1" size="large"></el-input-number>
+<el-input-number :value.sync="num1"></el-input-number>
+<el-input-number :value.sync="num1" size="small"></el-input-number>
+```
+
+## API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|----------|-------------- |----------|--------------------------------  |-------- |
+| model    | 绑定值         | number   |       | |
+| step     | 步数           | number   |      | 1 |
+| size     | 尺寸           | string   | large, small | |
+| disabled | 是否禁用        | boolean | true, false | false |

examples/docs/input.md

+<script>
+  module.exports = {
+    data() {
+      return {
+        input: '',
+        input1: '',
+        input2: '',
+        input3: '',
+        input4: '',
+        input5: '',
+        input6: '',
+        textarea: ''
+      };
+    }
+  };
+</script>
+
+<style>
+  .demo-box.demo-input {
+    .el-input {
+      width: 180px;
+
+      & + .el-input,
+      & + .el-textarea {
+        margin-top: 15px;
+      }
+    }
+    .el-textarea {
+      width: 414px;
+    }
+    .el-input-group + .el-input-group {
+      margin-top: 15px;
+    }
+  }
+</style>
+
+## 基本用法
+
+<div class="demo-box demo-input">
+  <el-input
+    placeholder="请输入内容"
+    :value.sync="input"
+    name="user">
+  </el-input>
+  <el-input
+    placeholder="请输入内容"
+    :value.sync="textarea"
+    name="desc"
+    type="textarea">
+  </el-input>
+</div>
+
+```html
+<el-input
+  placeholder="请输入内容"
+  :value.sync="input"
+  name="user">
+</el-input>
+<el-input
+  placeholder="请输入内容"
+  :value.sync="textarea"
+  name="desc"
+  type="textarea">
+</el-input>
+```
+
+## 禁用状态
+
+<div class="demo-box demo-input">  
+  <el-input
+    :disabled="true"
+    placeholder="请输入内容"
+    :value.sync="input1">
+  </el-input>
+</div>
+
+```html
+<el-input
+  :disabled="true"
+  placeholder="请输入内容"
+  :value.sync="input1">
+</el-input>
+```
+
+<!-- ## readonly 状态
+
+<el-input
+  :readonly="true"
+  placeholder="请输入内容"
+  :value.sync="input1">
+</el-input>
+
+```html
+<el-input
+  :readonly="true"
+  placeholder="请输入内容"
+  :value.sync="input1">
+</el-input>
+``` -->
+
+## Input 图标
+
+<div class="demo-box demo-input">
+  <el-input
+    placeholder="请选择日期"
+    icon="time"
+    :value.sync="input1">
+  </el-input>
+</div>
+
+```html
+<el-input
+  placeholder="请选择日期"
+  icon="time"
+  :value.sync="input1">
+</el-input>
+```
+
+## Input Group
+
+前置和后置元素可以是任何东西， 通过使用`.el-input-group__label`可以声明附加元素是一个标签从而获得合适的样式。
+
+### 后置元素
+
+<div class="demo-box demo-input">
+  <el-input-group>
+    <el-input
+      placeholder="请输入内容"
+      :value.sync="input2">
+    </el-input>
+    <span class="el-input-group__label" slot="append">.com</span>
+  </el-input-group>
+</div>
+
+```html
+<el-input-group>
+  <el-input
+    placeholder="请输入内容"
+    :value.sync="input2">
+  </el-input>
+  <span class="el-input-group__label" slot="append">.com</span>
+</el-input-group>
+```
+
+### 前置元素
+<div class="demo-box demo-input">
+  <el-input-group>
+    <el-button slot="prepend" type="text">按钮</el-button>
+    <el-input
+      placeholder="请输入内容"
+      :value.sync="input2">
+    </el-input>
+  </el-input-group>
+</div>
+
+```html
+<el-input-group>
+  <el-button slot="prepend" type="text">按钮</el-button>
+  <el-input
+    placeholder="请输入内容"
+    :value.sync="input2">
+  </el-input>
+</el-input-group>
+```
+
+### 前置和后置元素
+<div class="demo-box demo-input">
+  <el-input-group>
+    <el-dropdown text="下拉菜单" type="text" :icon-separate="false" slot="prepend">
+      <li>选项一</li>
+      <li>选项二</li>
+      <li>选项三</li>
+      <li class="divider">选项四</li>
+    </el-dropdown>
+    <el-input placeholder="请输入内容" :value.sync="input2"></el-input>
+    <el-button type="text" slot="append">搜索</el-button>
+  </el-input-group>
+</div>
+
+```html
+<el-input-group>
+  <el-dropdown text="下拉菜单" type="text" :icon-separate="false" slot="prepend">
+    <li>选项一</li>
+    <li>选项二</li>
+    <li>选项三</li>
+    <li class="divider">选项四</li>
+  </el-dropdown>
+  <el-input placeholder="请输入内容" :value.sync="input2"></el-input>
+  <el-button type="text" slot="append">搜索</el-button>
+</el-input-group>
+```
+
+## 尺寸
+### large
+
+<div class="demo-box demo-input">
+  <el-input
+    size="large"
+    placeholder="请输入内容"
+    :value.sync="input4">
+  </el-input>
+</div>
+
+### normal
+
+<div class="demo-box demo-input">
+  <el-input
+    placeholder="请输入内容"
+    :value.sync="input4">
+  </el-input>
+</div>
+
+### small
+
+<div class="demo-box demo-input">
+  <el-input
+    size="small"
+    placeholder="请输入内容"
+    :value.sync="input4">
+  </el-input>
+</div>
+
+### mini
+
+<div class="demo-box demo-input">
+  <el-input
+    size="mini"
+    placeholder="请输入内容"
+    :value.sync="input4">
+  </el-input>
+</div>
+
+```html
+<el-input
+  size="large"
+  placeholder="请输入内容"
+  :value.sync="input4">
+</el-input>
+<el-input
+  placeholder="请输入内容"
+  :value.sync="input4">
+</el-input>
+<el-input
+  size="small"
+  placeholder="请输入内容"
+  :value.sync="input4">
+</el-input>
+<el-input
+  size="mini"
+  placeholder="请输入内容"
+  :value.sync="input4">
+</el-input>
+```
+
+## API
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| type         | 同原生的 input 的 type 属性，如果为textarea则显示为extarea   | string  |                    |         |
+| name         | 同原生的 input 的 name 属性   | string  |                     |         |
+| model         | 绑定值           | string, number  |                       |         |
+| maxlength     | 最大输入长度           | number  |                       |         |
+| minlength     | 最小输入长度           | number  |                       |         |
+| placeholder   | 输入框占位文本   | string          |                       |         |
+| disabled      | 禁用            | boolean         | true, false           | false   |
+| readonly      | 禁用            | boolean         | true, false           | false   |
+| size          | 输入框尺寸       | string          | large, small, mini  |     |
+| icon          | 输入框尾部图标       | string          |                  |     |
+| number        | 指定model值为number类型  |  boolean    |                  |  false   |
+

examples/docs/quickstart.md

+element 是为饿了么定制的一套 Vue.js 后台组件库。帮助你更轻松更快速的开发后台项目。
+
+-------------
+
+## 安装
+
+待补充