更新基础组件演示，原有组件归类为扩展组件

src/router/index.js

@@ -70,6 +70,7 @@ const constantRoutes = [
 import MultilevelMenuExample from './modules/multilevel.menu.example'
 import BreadcrumbExample from './modules/breadcrumb.example'
 import KeepAliveExample from './modules/keep.alive.example'
+import ComponentBasicExample from './modules/component.basic.example'
 import ComponentExample from './modules/component.example'
 import PermissionExample from './modules/permission.example'
 import MockExample from './modules/mock.example'
@@ -87,6 +88,7 @@ let asyncRoutes = [
             MultilevelMenuExample,
             BreadcrumbExample,
             KeepAliveExample,
+            ComponentBasicExample,
             ComponentExample,
             PermissionExample,
             MockExample

src/router/modules/component.basic.example.js

@@ -0,0 +1,126 @@
+import Layout from '@/layout'
+
+export default {
+    path: '/component_basic_example',
+    component: Layout,
+    redirect: '/component_basic_example/icon',
+    name: 'componentBasicExample',
+    meta: {
+        title: '基础组件（部分）',
+        icon: 'sidebar-component'
+    },
+    children: [
+        {
+            path: 'icon',
+            name: 'componentBasicExampleIcon',
+            component: () => import(/* webpackChunkName: 'component_basic_example' */ '@/views/component_basic_example/icon'),
+            meta: {
+                title: '图标'
+            }
+        },
+        {
+            path: 'button',
+            name: 'componentBasicExampleButton',
+            component: () => import(/* webpackChunkName: 'component_basic_example' */ '@/views/component_basic_example/button'),
+            meta: {
+                title: '按钮'
+            }
+        },
+        {
+            path: 'link',
+            name: 'componentBasicExampleLink',
+            component: () => import(/* webpackChunkName: 'component_basic_example' */ '@/views/component_basic_example/link'),
+            meta: {
+                title: '文字链接'
+            }
+        },
+        {
+            path: 'radio',
+            name: 'componentBasicExampleRadio',
+            component: () => import(/* webpackChunkName: 'component_basic_example' */ '@/views/component_basic_example/radio'),
+            meta: {
+                title: '单选框'
+            }
+        },
+        {
+            path: 'checkbox',
+            name: 'componentBasicExampleCheckbox',
+            component: () => import(/* webpackChunkName: 'component_basic_example' */ '@/views/component_basic_example/checkbox'),
+            meta: {
+                title: '多选框'
+            }
+        },
+        {
+            path: 'input',
+            name: 'componentBasicExampleInput',
+            component: () => import(/* webpackChunkName: 'component_basic_example' */ '@/views/component_basic_example/input'),
+            meta: {
+                title: '输入框'
+            }
+        },
+        {
+            path: 'inputnumber',
+            name: 'componentBasicExampleInputnumber',
+            component: () => import(/* webpackChunkName: 'component_basic_example' */ '@/views/component_basic_example/inputnumber'),
+            meta: {
+                title: '计数器'
+            }
+        },
+        {
+            path: 'select',
+            name: 'componentBasicExampleSelect',
+            component: () => import(/* webpackChunkName: 'component_basic_example' */ '@/views/component_basic_example/select'),
+            meta: {
+                title: '选择器'
+            }
+        },
+        {
+            path: 'switch',
+            name: 'componentBasicExampleSwitch',
+            component: () => import(/* webpackChunkName: 'component_basic_example' */ '@/views/component_basic_example/switch'),
+            meta: {
+                title: '开关'
+            }
+        },
+        {
+            path: 'slider',
+            name: 'componentBasicExampleSlider',
+            component: () => import(/* webpackChunkName: 'component_basic_example' */ '@/views/component_basic_example/slider'),
+            meta: {
+                title: '滑块'
+            }
+        },
+        {
+            path: 'timepicker',
+            name: 'componentBasicExampleTimepicker',
+            component: () => import(/* webpackChunkName: 'component_basic_example' */ '@/views/component_basic_example/timepicker'),
+            meta: {
+                title: '时间选择器'
+            }
+        },
+        {
+            path: 'datepicker',
+            name: 'componentBasicExampleDatepicker',
+            component: () => import(/* webpackChunkName: 'component_basic_example' */ '@/views/component_basic_example/datepicker'),
+            meta: {
+                title: '日期选择器'
+            }
+        },
+        {
+            path: 'datetimepicker',
+            name: 'componentBasicExampleDatetimepicker',
+            component: () => import(/* webpackChunkName: 'component_basic_example' */ '@/views/component_basic_example/datetimepicker'),
+            meta: {
+                title: '日期时间选择器'
+            }
+        },
+        {
+            path: 'rate',
+            name: 'componentBasicExampleRate',
+            component: () => import(/* webpackChunkName: 'component_basic_example' */ '@/views/component_basic_example/rate'),
+            meta: {
+                title: '评分'
+            }
+        }
+    ]
+}

src/router/modules/component.example.js

@@ -1,115 +1,107 @@
 import Layout from '@/layout'
 
 export default {
-    path: '/component_example',
+    path: '/component_extend_example',
     component: Layout,
-    redirect: '/component_example/element',
-    name: 'componentExample',
+    redirect: '/component_extend_example/pageheader',
+    name: 'componentExtendExample',
     meta: {
-        title: '基础组件',
+        title: '扩展组件',
         icon: 'sidebar-component'
     },
     children: [
-        {
-            path: 'element',
-            name: 'componentExampleElement',
-            component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/element'),
-            meta: {
-                title: 'Element 组件'
-            }
-        },
         {
             path: 'pageheader',
-            name: 'componentExamplePageheader',
-            component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/pageheader'),
+            name: 'componentExtendExamplePageheader',
+            component: () => import(/* webpackChunkName: 'component_extend_example' */ '@/views/component_extend_example/pageheader'),
             meta: {
                 title: '页头'
             }
         },
         {
             path: 'pagemain',
-            name: 'componentExamplePagemain',
-            component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/pagemain'),
+            name: 'componentExtendExamplePagemain',
+            component: () => import(/* webpackChunkName: 'component_extend_example' */ '@/views/component_extend_example/pagemain'),
             meta: {
                 title: '内容块'
             }
         },
         {
             path: 'editor',
-            name: 'componentExampleEditor',
-            component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/editor'),
+            name: 'componentExtendExampleEditor',
+            component: () => import(/* webpackChunkName: 'component_extend_example' */ '@/views/component_extend_example/editor'),
             meta: {
                 title: '编辑器'
             }
         },
         {
             path: 'result',
-            name: 'componentExampleResult',
-            component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/result'),
+            name: 'componentExtendExampleResult',
+            component: () => import(/* webpackChunkName: 'component_extend_example' */ '@/views/component_extend_example/result'),
             meta: {
                 title: '处理结果'
             }
         },
         {
             path: 'actionbar',
-            name: 'componentExampleActionbar',
-            component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/actionbar'),
+            name: 'componentExtendExampleActionbar',
+            component: () => import(/* webpackChunkName: 'component_extend_example' */ '@/views/component_extend_example/actionbar'),
             meta: {
                 title: '固定底部操作栏'
             }
         },
         {
             path: 'searchbar',
-            name: 'componentExampleSearchbar',
-            component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/searchbar'),
+            name: 'componentExtendExampleSearchbar',
+            component: () => import(/* webpackChunkName: 'component_extend_example' */ '@/views/component_extend_example/searchbar'),
             meta: {
                 title: '搜索栏'
             }
         },
         {
             path: 'batchactionbar',
-            name: 'componentExampleBatchactionbar',
-            component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/batchactionbar'),
+            name: 'componentExtendExampleBatchactionbar',
+            component: () => import(/* webpackChunkName: 'component_extend_example' */ '@/views/component_extend_example/batchactionbar'),
             meta: {
                 title: '批量操作栏'
             }
         },
         {
             path: 'tableautoheight',
-            name: 'componentExampleTableautoheight',
-            component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/table.autoheight'),
+            name: 'componentExtendExampleTableautoheight',
+            component: () => import(/* webpackChunkName: 'component_extend_example' */ '@/views/component_extend_example/table.autoheight'),
             meta: {
                 title: '表格自适应'
             }
         },
         {
             path: 'upload',
-            name: 'componentExampleUpload',
-            component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/upload'),
+            name: 'componentExtendExampleUpload',
+            component: () => import(/* webpackChunkName: 'component_extend_example' */ '@/views/component_extend_example/upload'),
             meta: {
                 title: '上传'
             }
         },
         {
             path: 'imagepreview',
-            name: 'componentExampleImagePreview',
-            component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/image.preview'),
+            name: 'componentExtendExampleImagePreview',
+            component: () => import(/* webpackChunkName: 'component_extend_example' */ '@/views/component_extend_example/image.preview'),
             meta: {
                 title: '图片预览'
             }
         },
         {
             path: 'trend',
-            name: 'componentExampleTrend',
-            component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/trend'),
+            name: 'componentExtendExampleTrend',
+            component: () => import(/* webpackChunkName: 'component_extend_example' */ '@/views/component_extend_example/trend'),
             meta: {
                 title: '趋势标记'
             }
         },
         {
             path: 'area',
-            name: 'componentExampleArea',
-            component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/area'),
+            name: 'componentExtendExampleArea',
+            component: () => import(/* webpackChunkName: 'component_extend_example' */ '@/views/component_extend_example/area'),
             meta: {
                 title: '省市区联动'
             }

src/views/component_basic_example/button.vue

@@ -0,0 +1,115 @@
+<template>
+    <div>
+        <Alert />
+        <page-header title="按钮" />
+        <page-main title="基础用法" class="demo">
+            <el-row>
+                <el-button>默认按钮</el-button>
+                <el-button type="primary">主要按钮</el-button>
+                <el-button type="success">成功按钮</el-button>
+                <el-button type="info">信息按钮</el-button>
+                <el-button type="warning">警告按钮</el-button>
+                <el-button type="danger">危险按钮</el-button>
+            </el-row>
+            <el-row>
+                <el-button plain>朴素按钮</el-button>
+                <el-button type="primary" plain>主要按钮</el-button>
+                <el-button type="success" plain>成功按钮</el-button>
+                <el-button type="info" plain>信息按钮</el-button>
+                <el-button type="warning" plain>警告按钮</el-button>
+                <el-button type="danger" plain>危险按钮</el-button>
+            </el-row>
+            <el-row>
+                <el-button round>圆角按钮</el-button>
+                <el-button type="primary" round>主要按钮</el-button>
+                <el-button type="success" round>成功按钮</el-button>
+                <el-button type="info" round>信息按钮</el-button>
+                <el-button type="warning" round>警告按钮</el-button>
+                <el-button type="danger" round>危险按钮</el-button>
+            </el-row>
+            <el-row>
+                <el-button icon="el-icon-search" circle />
+                <el-button type="primary" icon="el-icon-edit" circle />
+                <el-button type="success" icon="el-icon-check" circle />
+                <el-button type="info" icon="el-icon-message" circle />
+                <el-button type="warning" icon="el-icon-star-off" circle />
+                <el-button type="danger" icon="el-icon-delete" circle />
+            </el-row>
+        </page-main>
+        <page-main title="禁用状态" class="demo">
+            <el-row>
+                <el-button disabled>默认按钮</el-button>
+                <el-button type="primary" disabled>主要按钮</el-button>
+                <el-button type="success" disabled>成功按钮</el-button>
+                <el-button type="info" disabled>信息按钮</el-button>
+                <el-button type="warning" disabled>警告按钮</el-button>
+                <el-button type="danger" disabled>危险按钮</el-button>
+            </el-row>
+            <el-row>
+                <el-button plain disabled>朴素按钮</el-button>
+                <el-button type="primary" plain disabled>主要按钮</el-button>
+                <el-button type="success" plain disabled>成功按钮</el-button>
+                <el-button type="info" plain disabled>信息按钮</el-button>
+                <el-button type="warning" plain disabled>警告按钮</el-button>
+                <el-button type="danger" plain disabled>危险按钮</el-button>
+            </el-row>
+        </page-main>
+        <page-main title="文字按钮" class="demo">
+            <el-button type="text">文字按钮</el-button>
+            <el-button type="text" disabled>文字按钮</el-button>
+        </page-main>
+        <page-main title="图标按钮" class="demo">
+            <el-button type="primary" icon="el-icon-edit" />
+            <el-button type="primary" icon="el-icon-share" />
+            <el-button type="primary" icon="el-icon-delete" />
+            <el-button type="primary" icon="el-icon-search">搜索</el-button>
+            <el-button type="primary">上传<i class="el-icon-upload el-icon--right" /></el-button>
+        </page-main>
+        <page-main title="按钮组" class="demo">
+            <el-button-group style="margin-right: 10px;">
+                <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
+                <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right" /></el-button>
+            </el-button-group>
+            <el-button-group>
+                <el-button type="primary" icon="el-icon-edit" />
+                <el-button type="primary" icon="el-icon-share" />
+                <el-button type="primary" icon="el-icon-delete" />
+            </el-button-group>
+        </page-main>
+        <page-main title="加载中" class="demo">
+            <el-button type="primary" :loading="true">加载中</el-button>
+        </page-main>
+        <page-main title="不同尺寸" class="demo">
+            <el-row>
+                <el-button>默认按钮</el-button>
+                <el-button size="medium">中等按钮</el-button>
+                <el-button size="small">小型按钮</el-button>
+                <el-button size="mini">超小按钮</el-button>
+            </el-row>
+            <el-row>
+                <el-button round>默认按钮</el-button>
+                <el-button size="medium" round>中等按钮</el-button>
+                <el-button size="small" round>小型按钮</el-button>
+                <el-button size="mini" round>超小按钮</el-button>
+            </el-row>
+        </page-main>
+    </div>
+</template>
+
+<script>
+import Alert from './components/alert'
+
+export default {
+    components: {
+        Alert
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.demo {
+    .el-row {
+        margin-bottom: 20px;
+    }
+}
+</style>

src/views/component_basic_example/checkbox.vue

@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <Alert />
+        <page-header title="多选框" />
+        <page-main title="基础用法" class="demo">
+            <el-checkbox v-model="checked">备选项</el-checkbox>
+        </page-main>
+        <page-main title="禁用状态" class="demo">
+            <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>
+            <el-checkbox v-model="checked2" disabled>备选项</el-checkbox>
+        </page-main>
+        <page-main title="多选框组" class="demo">
+            <el-checkbox-group v-model="checkList">
+                <el-checkbox label="复选框 A" />
+                <el-checkbox label="复选框 B" />
+                <el-checkbox label="复选框 C" />
+                <el-checkbox label="禁用" disabled />
+                <el-checkbox label="选中且禁用" disabled />
+            </el-checkbox-group>
+        </page-main>
+        <page-main title="可选项目数量的限制" class="demo">
+            <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
+                <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
+            </el-checkbox-group>
+        </page-main>
+        <page-main title="按钮样式" class="demo">
+            <el-checkbox-group v-model="checkboxGroup1">
+                <el-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox-button>
+            </el-checkbox-group>
+        </page-main>
+        <page-main title="带有边框" class="demo">
+            <el-checkbox v-model="checked3" label="备选项1" border />
+            <el-checkbox v-model="checked4" label="备选项2" border />
+        </page-main>
+    </div>
+</template>
+
+<script>
+import Alert from './components/alert'
+
+const cityOptions = ['上海', '北京', '广州', '深圳']
+
+export default {
+    components: {
+        Alert
+    },
+    data() {
+        return {
+            checked: true,
+            checked1: false,
+            checked2: true,
+            checkList: ['选中且禁用', '复选框 A'],
+            checkedCities: ['上海', '北京'],
+            cities: cityOptions,
+            checkboxGroup1: ['上海'],
+            checked3: true,
+            checked4: false
+        }
+    }
+}
+</script>

src/views/component_basic_example/components/alert.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="alert">
+        <el-alert show-icon type="info" :closable="false" close-text="前往 ElementUI 官网">
+            <template slot="title">
+                基础组件来自 ElementUI ，更多组件及使用技巧请查看 <el-link type="primary" href="https://element.eleme.cn/#/zh-CN" target="_blank">ElementUI 官网</el-link>
+            </template>
+        </el-alert>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.alert {
+    padding: 20px 20px 0;
+    background-color: #fff;
+}
+</style>

src/views/component_basic_example/datepicker.vue

@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <Alert />
+        <page-header title="日期选择器" />
+        <page-main title="选择日" class="demo">
+            <div>默认</div>
+            <el-date-picker v-model="value1" type="date" placeholder="选择日期" />
+            <div>带快捷选项</div>
+            <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions" />
+        </page-main>
+        <page-main title="其他日期单位" class="demo">
+            <div>周</div>
+            <el-date-picker v-model="value3" type="week" format="yyyy 第 WW 周" placeholder="选择周" />
+            <div>月</div>
+            <el-date-picker v-model="value4" type="month" placeholder="选择月" />
+            <div>年</div>
+            <el-date-picker v-model="value5" type="year" placeholder="选择年" />
+            <div>多个日期</div>
+            <el-date-picker v-model="value6" type="dates" placeholder="选择一个或多个日期" />
+        </page-main>
+        <page-main title="选择日期范围" class="demo">
+            <el-date-picker v-model="value7" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
+        </page-main>
+        <page-main title="选择月份范围" class="demo">
+            <el-date-picker v-model="value8" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" />
+        </page-main>
+    </div>
+</template>
+
+<script>
+import Alert from './components/alert'
+
+export default {
+    components: {
+        Alert
+    },
+    data() {
+        return {
+            pickerOptions: {
+                disabledDate(time) {
+                    return time.getTime() > Date.now()
+                },
+                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)
+                    }
+                }]
+            },
+            value1: '',
+            value2: '',
+            value3: '',
+            value4: '',
+            value5: '',
+            value6: '',
+            value7: '',
+            value8: ''
+        }
+    }
+}
+</script>

src/views/component_basic_example/datetimepicker.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <Alert />
+        <page-header title="日期时间选择器" />
+        <page-main title="日期和时间点" class="demo">
+            <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间" />
+        </page-main>
+        <page-main title="日期和时间范围" class="demo">
+            <el-date-picker v-model="value2" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
+        </page-main>
+        <page-main title="默认的起始与结束时刻" class="demo">
+            <div>起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</div>
+            <el-date-picker v-model="value3" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00', '08:00:00']" />
+        </page-main>
+    </div>
+</template>
+
+<script>
+import Alert from './components/alert'
+
+export default {
+    components: {
+        Alert
+    },
+    data() {
+        return {
+            value1: '',
+            value2: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+            value3: ''
+        }
+    }
+}
+</script>

src/views/component_basic_example/icon.json

@@ -0,0 +1 @@
+["platform-eleme","eleme","delete-solid","delete","s-tools","setting","user-solid","user","phone","phone-outline","more","more-outline","star-on","star-off","s-goods","goods","warning","warning-outline","question","info","remove","circle-plus","success","error","zoom-in","zoom-out","remove-outline","circle-plus-outline","circle-check","circle-close","s-help","help","minus","plus","check","close","picture","picture-outline","picture-outline-round","upload","upload2","download","camera-solid","camera","video-camera-solid","video-camera","message-solid","bell","s-cooperation","s-order","s-platform","s-fold","s-unfold","s-operation","s-promotion","s-home","s-release","s-ticket","s-management","s-open","s-shop","s-marketing","s-flag","s-comment","s-finance","s-claim","s-custom","s-opportunity","s-data","s-check","s-grid","menu","share","d-caret","caret-left","caret-right","caret-bottom","caret-top","bottom-left","bottom-right","back","right","bottom","top","top-left","top-right","arrow-left","arrow-right","arrow-down","arrow-up","d-arrow-left","d-arrow-right","video-pause","video-play","refresh","refresh-right","refresh-left","finished","sort","sort-up","sort-down","rank","loading","view","c-scale-to-original","date","edit","edit-outline","folder","folder-opened","folder-add","folder-remove","folder-delete","folder-checked","tickets","document-remove","document-delete","document-copy","document-checked","document","document-add","printer","paperclip","takeaway-box","search","monitor","attract","mobile","scissors","umbrella","headset","brush","mouse","coordinate","magic-stick","reading","data-line","data-board","pie-chart","data-analysis","collection-tag","film","suitcase","suitcase-1","receiving","collection","files","notebook-1","notebook-2","toilet-paper","office-building","school","table-lamp","house","no-smoking","smoking","shopping-cart-full","shopping-cart-1","shopping-cart-2","shopping-bag-1","shopping-bag-2","sold-out","sell","present","box","bank-card","money","coin","wallet","discount","price-tag","news","guide","male","female","thumb","cpu","link","connection","open","turn-off","set-up","chat-round","chat-line-round","chat-square","chat-dot-round","chat-dot-square","chat-line-square","message","postcard","position","turn-off-microphone","microphone","close-notification","bangzhu","time","odometer","crop","aim","switch-button","full-screen","copy-document","mic","stopwatch","medal-1","medal","trophy","trophy-1","first-aid-kit","discover","place","location","location-outline","location-information","add-location","delete-location","map-location","alarm-clock","timer","watch-1","watch","lock","unlock","key","service","mobile-phone","bicycle","truck","ship","basketball","football","soccer","baseball","wind-power","light-rain","lightning","heavy-rain","sunrise","sunrise-1","sunset","sunny","cloudy","partly-cloudy","cloudy-and-sunny","moon","moon-night","dish","dish-1","food","chicken","fork-spoon","knife-fork","burger","tableware","sugar","dessert","ice-cream","hot-water","water-cup","coffee-cup","cold-drink","goblet","goblet-full","goblet-square","goblet-square-full","refrigerator","grape","watermelon","cherry","apple","pear","orange","coffee","ice-tea","ice-drink","milk-tea","potato-strips","lollipop","ice-cream-square","ice-cream-round"]

src/views/component_basic_example/icon.vue

@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <Alert />
+        <page-header title="图标" />
+        <page-main class="demo">
+            <i class="el-icon-edit" />
+            <i class="el-icon-share" />
+            <i class="el-icon-delete" />
+            <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        </page-main>
+        <page-main title="图标集合">
+            <div v-for="(item, index) in icon" :key="index" class="list-icon">
+                <el-tooltip class="item" effect="dark" :content="`el-icon-${item}`" placement="top">
+                    <i :class="`el-icon-${item}`" />
+                </el-tooltip>
+            </div>
+        </page-main>
+    </div>
+</template>
+
+<script>
+import Alert from './components/alert'
+import icon from './icon.json'
+
+export default {
+    components: {
+        Alert
+    },
+    computed: {
+        icon() {
+            return icon
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.demo {
+    i {
+        color: #606266;
+        margin: 0 20px;
+        font-size: 1.5em;
+        vertical-align: middle;
+    }
+    button {
+        margin: 0 20px;
+    }
+}
+.list-icon {
+    display: inline-block;
+    font-size: 32px;
+    color: #606266;
+    margin: 10px;
+}
+</style>

src/views/component_basic_example/input.vue

@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <Alert />
+        <page-header title="输入框" />
+        <page-main title="基础用法" class="demo">
+            <el-input v-model="input" placeholder="请输入内容" />
+        </page-main>
+        <page-main title="禁用状态" class="demo">
+            <el-input v-model="input" placeholder="请输入内容" :disabled="true" />
+        </page-main>
+        <page-main title="可清空" class="demo">
+            <el-input v-model="input" placeholder="请输入内容" clearable />
+        </page-main>
+        <page-main title="密码框" class="demo">
+            <el-input v-model="input" placeholder="请输入内容" show-password />
+        </page-main>
+        <page-main title="带 icon 的输入框" class="demo">
+            <el-input v-model="input1" placeholder="请选择日期" suffix-icon="el-icon-date" />
+            <el-input v-model="input2" placeholder="请输入内容" prefix-icon="el-icon-search" />
+        </page-main>
+        <page-main title="文本域" class="demo">
+            <el-input v-model="textarea" type="textarea" :rows="2" placeholder="请输入内容" />
+        </page-main>
+    </div>
+</template>
+
+<script>
+import Alert from './components/alert'
+
+export default {
+    components: {
+        Alert
+    },
+    data() {
+        return {
+            input: '',
+            input1: '',
+            input2: '',
+            textarea: ''
+        }
+    }
+}
+</script>

src/views/component_basic_example/inputnumber.vue

@@ -0,0 +1,40 @@
+<template>
+    <div>
+        <Alert />
+        <page-header title="计数器" />
+        <page-main title="基础用法" class="demo">
+            <el-input-number v-model="num" :min="1" :max="10" label="描述文字" />
+        </page-main>
+        <page-main title="禁用状态" class="demo">
+            <el-input-number v-model="num2" :disabled="true" />
+        </page-main>
+        <page-main title="步数" class="demo">
+            <el-input-number v-model="num3" :step="2" />
+        </page-main>
+        <page-main title="精度" class="demo">
+            <el-input-number v-model="num4" :precision="2" :step="0.1" :max="10" />
+        </page-main>
+        <page-main title="按钮位置" class="demo">
+            <el-input-number v-model="num5" controls-position="right" :min="1" :max="10" />
+        </page-main>
+    </div>
+</template>
+
+<script>
+import Alert from './components/alert'
+
+export default {
+    components: {
+        Alert
+    },
+    data() {
+        return {
+            num: 1,
+            num2: 1,
+            num3: 5,
+            num4: 1,
+            num5: 1
+        }
+    }
+}
+</script>

src/views/component_basic_example/link.vue

@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <Alert />
+        <page-header title="文字链接" />
+        <page-main title="基础用法" class="demo">
+            <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
+            <el-link type="primary">主要链接</el-link>
+            <el-link type="success">成功链接</el-link>
+            <el-link type="warning">警告链接</el-link>
+            <el-link type="danger">危险链接</el-link>
+            <el-link type="info">信息链接</el-link>
+        </page-main>
+        <page-main title="禁用状态" class="demo">
+            <el-link disabled>默认链接</el-link>
+            <el-link type="primary" disabled>主要链接</el-link>
+            <el-link type="success" disabled>成功链接</el-link>
+            <el-link type="warning" disabled>警告链接</el-link>
+            <el-link type="danger" disabled>危险链接</el-link>
+            <el-link type="info" disabled>信息链接</el-link>
+        </page-main>
+        <page-main title="下划线" class="demo">
+            <el-link :underline="false">无下划线</el-link>
+            <el-link>有下划线</el-link>
+        </page-main>
+        <page-main title="图标" class="demo">
+            <el-link icon="el-icon-edit">编辑</el-link>
+            <el-link>查看<i class="el-icon-view el-icon--right" /> </el-link>
+        </page-main>
+    </div>
+</template>
+
+<script>
+import Alert from './components/alert'
+
+export default {
+    components: {
+        Alert
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.demo {
+    .el-link {
+        margin: 0 5px;
+    }
+}
+</style>

src/views/component_basic_example/radio.vue

@@ -0,0 +1,52 @@
+<template>
+    <div>
+        <Alert />
+        <page-header title="单选框" />
+        <page-main title="基础用法" class="demo">
+            <el-radio v-model="radio" label="1">备选项</el-radio>
+            <el-radio v-model="radio" label="2">备选项</el-radio>
+        </page-main>
+        <page-main title="禁用状态" class="demo">
+            <el-radio v-model="radio2" disabled label="禁用">备选项</el-radio>
+            <el-radio v-model="radio2" disabled label="选中且禁用">备选项</el-radio>
+        </page-main>
+        <page-main title="单选框组" class="demo">
+            <el-radio-group v-model="radio3">
+                <el-radio :label="3">备选项</el-radio>
+                <el-radio :label="6">备选项</el-radio>
+                <el-radio :label="9">备选项</el-radio>
+            </el-radio-group>
+        </page-main>
+        <page-main title="按钮样式" class="demo">
+            <el-radio-group v-model="radio4">
+                <el-radio-button label="上海" />
+                <el-radio-button label="北京" />
+                <el-radio-button label="广州" />
+                <el-radio-button label="深圳" />
+            </el-radio-group>
+        </page-main>
+        <page-main title="带有边框" class="demo">
+            <el-radio v-model="radio5" label="1" border>备选项1</el-radio>
+            <el-radio v-model="radio5" label="2" border>备选项2</el-radio>
+        </page-main>
+    </div>
+</template>
+
+<script>
+import Alert from './components/alert'
+
+export default {
+    components: {
+        Alert
+    },
+    data() {
+        return {
+            radio: '1',
+            radio2: '选中且禁用',
+            radio3: 3,
+            radio4: '上海',
+            radio5: '1'
+        }
+    }
+}
+</script>

src/views/component_basic_example/rate.vue

@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <Alert />
+        <page-header title="评分" />
+        <page-main title="基础用法" class="demo">
+            <el-rate v-model="value1" />
+        </page-main>
+        <page-main title="辅助文字" class="demo">
+            <el-rate v-model="value2" show-text />
+        </page-main>
+        <page-main title="只读" class="demo">
+            <el-rate v-model="value3" disabled show-score text-color="#ff9900" score-template="{value}" />
+        </page-main>
+    </div>
+</template>
+
+<script>
+import Alert from './components/alert'
+
+export default {
+    components: {
+        Alert
+    },
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: 3.7
+        }
+    }
+}
+</script>

src/views/component_basic_example/select.vue

@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <Alert />
+        <page-header title="选择器" />
+        <page-main title="基础用法" class="demo">
+            <el-select v-model="value1" placeholder="请选择">
+                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </page-main>
+        <page-main title="有禁用选项" class="demo">
+            <el-select v-model="value2" placeholder="请选择">
+                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </page-main>
+        <page-main title="禁用状态" class="demo">
+            <el-select v-model="value1" disabled placeholder="请选择">
+                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </page-main>
+        <page-main title="可清空单选" class="demo">
+            <el-select v-model="value1" clearable placeholder="请选择">
+                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </page-main>
+        <page-main title="基础多选" class="demo">
+            <el-select v-model="value3" multiple placeholder="请选择">
+                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </page-main>
+        <page-main title="可搜索" class="demo">
+            <el-select v-model="value1" filterable placeholder="请选择">
+                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </page-main>
+    </div>
+</template>
+
+<script>
+import Alert from './components/alert'
+
+export default {
+    components: {
+        Alert
+    },
+    data() {
+        return {
+            options1: [
+                { value: '选项1', label: '黄金糕' },
+                { value: '选项2', label: '双皮奶' },
+                { value: '选项3', label: '蚵仔煎' },
+                { value: '选项4', label: '龙须面' },
+                { value: '选项5', label: '北京烤鸭' }
+            ],
+            value1: '',
+            options2: [
+                { value: '选项1', label: '黄金糕' },
+                { value: '选项2', label: '双皮奶', disabled: true },
+                { value: '选项3', label: '蚵仔煎' },
+                { value: '选项4', label: '龙须面' },
+                { value: '选项5', label: '北京烤鸭' }
+            ],
+            value2: '',
+            value3: []
+        }
+    }
+}
+</script>

src/views/component_basic_example/slider.vue

@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <Alert />
+        <page-header title="滑块" />
+        <page-main title="基础用法" class="demo">
+            <span class="demonstration">默认</span>
+            <el-slider v-model="value1" />
+            <span class="demonstration">自定义初始值</span>
+            <el-slider v-model="value2" />
+            <span class="demonstration">隐藏 Tooltip</span>
+            <el-slider v-model="value3" :show-tooltip="false" />
+            <span class="demonstration">格式化 Tooltip</span>
+            <el-slider v-model="value4" :format-tooltip="formatTooltip" />
+            <span class="demonstration">禁用</span>
+            <el-slider v-model="value5" disabled />
+        </page-main>
+        <page-main title="离散值" class="demo">
+            <span class="demonstration">不显示间断点</span>
+            <el-slider v-model="value6" :step="10" />
+            <span class="demonstration">显示间断点</span>
+            <el-slider v-model="value6" :step="10" show-stops />
+        </page-main>
+        <page-main title="带有输入框" class="demo">
+            <el-slider v-model="value7" show-input />
+        </page-main>
+        <page-main title="范围选择" class="demo">
+            <el-slider v-model="value8" range show-stops :max="10" />
+        </page-main>
+        <page-main title="竖向模式" class="demo">
+            <el-slider v-model="value9" vertical height="200px" />
+        </page-main>
+    </div>
+</template>
+
+<script>
+import Alert from './components/alert'
+
+export default {
+    components: {
+        Alert
+    },
+    data() {
+        return {
+            value1: 0,
+            value2: 50,
+            value3: 36,
+            value4: 48,
+            value5: 42,
+            value6: 0,
+            value7: 0,
+            value8: [4, 8],
+            value9: 0
+        }
+    },
+    methods: {
+        formatTooltip(val) {
+            return val / 100
+        }
+    }
+}
+</script>

src/views/component_basic_example/switch.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <Alert />
+        <page-header title="开关" />
+        <page-main title="基础用法" class="demo">
+            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" />
+        </page-main>
+        <page-main title="文字描述" class="demo">
+            <el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费" />
+        </page-main>
+        <page-main title="禁用状态" class="demo">
+            <el-switch v-model="value2" disabled style="margin-right: 10px;" />
+            <el-switch v-model="value3" disabled />
+        </page-main>
+    </div>
+</template>
+
+<script>
+import Alert from './components/alert'
+
+export default {
+    components: {
+        Alert
+    },
+    data() {
+        return {
+            value: true,
+            value1: true,
+            value2: true,
+            value3: false
+        }
+    }
+}
+</script>

src/views/component_basic_example/timepicker.vue

@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <Alert />
+        <page-header title="时间选择器" />
+        <page-main title="固定时间点" class="demo">
+            <el-time-select
+                v-model="value"
+                :picker-options="{
+                    start: '08:30',
+                    step: '00:15',
+                    end: '18:30'
+                }"
+                placeholder="选择时间"
+            />
+        </page-main>
+        <page-main title="任意时间点" class="demo">
+            <el-time-picker
+                v-model="value1"
+                :picker-options="{
+                    selectableRange: '18:30:00 - 20:30:00'
+                }"
+                placeholder="任意时间点"
+            />
+        </page-main>
+        <page-main title="固定时间范围" class="demo">
+            <el-time-select
+                v-model="startTime"
+                placeholder="起始时间"
+                :picker-options="{
+                    start: '08:30',
+                    step: '00:15',
+                    end: '18:30'
+                }"
+                style="margin-right: 10px;"
+            />
+            <el-time-select
+                v-model="endTime"
+                placeholder="结束时间"
+                :picker-options="{
+                    start: '08:30',
+                    step: '00:15',
+                    end: '18:30',
+                    minTime: startTime
+                }"
+            />
+        </page-main>
+    </div>
+</template>
+
+<script>
+import Alert from './components/alert'
+
+export default {
+    components: {
+        Alert
+    },
+    data() {
+        return {
+            value: '',
+            value1: new Date(2016, 9, 10, 18, 40),
+            startTime: '',
+            endTime: ''
+        }
+    }
+}
+</script>

src/views/component_example/element.vue

@@ -1,121 +0,0 @@
-<template>
-    <div>
-        <page-header title="Element 组件" content="框架支持 Element 所有组件，以下只演示部分，更多组件使用请查看 Element 官网">
-            <el-button icon="el-icon-link" @click="open('https://element.eleme.cn/#/zh-CN')">Element 官网</el-button>
-        </page-header>
-        <page-main title="Icon 图标" class="demo-icon">
-            <i class="el-icon-edit" />
-            <i class="el-icon-share" />
-            <i class="el-icon-delete" />
-            <el-button type="primary" icon="el-icon-search">搜索</el-button>
-        </page-main>
-        <page-main title="Button 按钮" class="demo-button">
-            <el-row>
-                <el-button>默认按钮</el-button>
-                <el-button type="primary">主要按钮</el-button>
-                <el-button type="success">成功按钮</el-button>
-                <el-button type="info">信息按钮</el-button>
-                <el-button type="warning">警告按钮</el-button>
-                <el-button type="danger">危险按钮</el-button>
-            </el-row>
-            <el-row>
-                <el-button plain>朴素按钮</el-button>
-                <el-button type="primary" plain>主要按钮</el-button>
-                <el-button type="success" plain>成功按钮</el-button>
-                <el-button type="info" plain>信息按钮</el-button>
-                <el-button type="warning" plain>警告按钮</el-button>
-                <el-button type="danger" plain>危险按钮</el-button>
-            </el-row>
-            <el-row>
-                <el-button round>圆角按钮</el-button>
-                <el-button type="primary" round>主要按钮</el-button>
-                <el-button type="success" round>成功按钮</el-button>
-                <el-button type="info" round>信息按钮</el-button>
-                <el-button type="warning" round>警告按钮</el-button>
-                <el-button type="danger" round>危险按钮</el-button>
-            </el-row>
-            <el-row>
-                <el-button icon="el-icon-search" circle />
-                <el-button type="primary" icon="el-icon-edit" circle />
-                <el-button type="success" icon="el-icon-check" circle />
-                <el-button type="info" icon="el-icon-message" circle />
-                <el-button type="warning" icon="el-icon-star-off" circle />
-                <el-button type="danger" icon="el-icon-delete" circle />
-            </el-row>
-        </page-main>
-        <page-main title="Link 文字链接" class="demo-link">
-            <el-link>默认链接</el-link>
-            <el-link type="primary">主要链接</el-link>
-            <el-link type="success">成功链接</el-link>
-            <el-link type="warning">警告链接</el-link>
-            <el-link type="danger">危险链接</el-link>
-            <el-link type="info">信息链接</el-link>
-        </page-main>
-        <page-main title="Table 表格">
-            <el-table :data="tableData" style="width: 100%;">
-                <el-table-column prop="date" label="日期" width="180" />
-                <el-table-column prop="name" label="姓名" width="180" />
-                <el-table-column prop="address" label="地址" />
-            </el-table>
-        </page-main>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'ComponentExampleElement',
-    props: {},
-    data() {
-        return {
-            tableData: [{
-                date: '2016-05-02',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-04',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1517 弄'
-            }, {
-                date: '2016-05-01',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1519 弄'
-            }, {
-                date: '2016-05-03',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1516 弄'
-            }]
-        }
-    },
-    created() {},
-    mounted() {},
-    methods: {
-        open(url) {
-            window.open(url, 'top')
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.demo-icon {
-    i {
-        color: #606266;
-        margin: 0 20px;
-        font-size: 1.5em;
-        vertical-align: middle;
-    }
-    button {
-        margin: 0 20px;
-    }
-}
-.demo-button {
-    .el-row {
-        margin-bottom: 20px;
-    }
-}
-.demo-link {
-    .el-link {
-        margin: 0 5px;
-    }
-}
-</style>