no message

Former-commit-id: 28ec2beb0befdc6a796458fbcc1a0c3786fb8d62 Former-commit-id: 82768e538a271a2354616cd01f84fd73631a62b2 Former-commit-id: 450e74928f5d6bdba20e01ce57bebdfde0d512a1
2018-03-21 20:29:50 +08:00
parent 9e4939eb30
commit 65ec820e68
46 changed files with 29 additions and 29 deletions
--- a/mock拦截ajax.md
+++ b/mock拦截ajax.md
@@ -0,0 +1,35 @@
+在 `src/mock/demo/001.js` 配置拦截返回的数据
+
+```
+import Mock from 'mockjs'
+
+Mock.mock('/api/demo/001', {
+  'list|4-10': [{
+    'id|+1': 1,
+    'name': '@CNAME',
+    'star|1-5': '★',
+    'delFlag|1': [0, 1],
+    'creatDate': '@DATE',
+    'address': '@CITY',
+    'zip': '@ZIP'
+  }]
+})
+```
+
+请求数据
+
+```
+ajax () {
+  this.$axios.get('/api/demo/001')
+  .then(res => {
+    this.table.columns = Object.keys(res.data.list[0]).map(e => ({
+      label: e,
+      prop: e
+    }))
+    this.table.data = res.data.list
+  })
+}
+```
+
+
+
--- a/mock演示页面介绍.md
+++ b/mock演示页面介绍.md
@@ -0,0 +1,5 @@
+你可以点击每个演示卡片右上角的刷新按钮检查每次 `mock` 不同的结果
+
+官方演示页面 [http://mockjs.com/examples.html](http://mockjs.com/examples.html)
+
+官方 `Wiki` [https://github.com/nuysoft/Mock/wiki/Getting-Started](https://github.com/nuysoft/Mock/wiki/Getting-Started)
--- a/mock语法规范.md
+++ b/mock语法规范.md
@@ -0,0 +1,181 @@
+# 语法规范
+
+Mock.js 的语法规范包括两部分：
+
+1. 数据模板定义规范（Data Template Definition，DTD）
+2. 数据占位符定义规范（Data Placeholder Definition，DPD）
+
+## 数据模板定义规范 DTD
+
+**数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：**
+
+```js
+// 属性名   name
+// 生成规则 rule
+// 属性值   value
+'name|rule': value
+```
+
+**注意：**
+
+* _属性名_ 和 _生成规则_ 之间用竖线 `|` 分隔。
+* _生成规则_ 是可选的。
+* _生成规则_ 有 7 种格式：
+    1. `'name|min-max': value`
+    1. `'name|count': value`
+    1. `'name|min-max.dmin-dmax': value`
+    1. `'name|min-max.dcount': value`
+    1. `'name|count.dmin-dmax': value`
+    1. `'name|count.dcount': value`
+    1. `'name|+step': value`
+* **_生成规则_ 的 含义 需要依赖 _属性值的类型_ 才能确定。**
+* _属性值_ 中可以含有 `@占位符`。
+* _属性值_ 还指定了最终值的初始值和类型。
+
+<!-- 感谢 @麦少 同学对 Mock.js 语法的整理和分析，才有了这版相对清晰的语法文档。 -->
+
+**生成规则和示例：**
+
+### 1. 属性值是字符串 **String**
+
+1. `'name|min-max': string` 
+
+    通过重复 `string` 生成一个字符串，重复次数大于等于 `min`，小于等于 `max`。
+
+2. `'name|count': string` 
+
+    通过重复 `string` 生成一个字符串，重复次数等于 `count`。
+
+### 2. 属性值是数字 **Number**
+
+1. `'name|+1': number` 
+
+    属性值自动加 1，初始值为 `number`。
+
+2. `'name|min-max': number` 
+
+    生成一个大于等于 `min`、小于等于 `max` 的整数，属性值 `number` 只是用来确定类型。
+
+3. `'name|min-max.dmin-dmax': number` 
+
+    生成一个浮点数，整数部分大于等于 `min`、小于等于 `max`，小数部分保留 `dmin` 到 `dmax` 位。
+
+```js
+Mock.mock({
+    'number1|1-100.1-10': 1,
+    'number2|123.1-10': 1,
+    'number3|123.3': 1,
+    'number4|123.10': 1.123
+})
+// =>
+{
+    "number1": 12.92,
+    "number2": 123.51,
+    "number3": 123.777,
+    "number4": 123.1231091814
+}
+```
+
+### 3. 属性值是布尔型 **Boolean**
+
+1. `'name|1': boolean` 
+
+    随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
+
+2. `'name|min-max': value` 
+
+    随机生成一个布尔值，值为 `value` 的概率是 `min / (min + max)`，值为 `!value` 的概率是 `max / (min + max)`。
+
+### 4. 属性值是对象 **Object**
+
+1. `'name|count': object`
+
+    从属性值 `object` 中随机选取 `count` 个属性。
+
+2. `'name|min-max': object`
+
+    从属性值 `object` 中随机选取 `min` 到 `max` 个属性。
+
+### 5. 属性值是数组 **Array**
+
+1. `'name|1': array` 
+
+    从属性值 `array` 中随机选取 1 个元素，作为最终值。
+
+2. `'name|+1': array` 
+
+    从属性值 `array` 中顺序选取 1 个元素，作为最终值。
+
+3. `'name|min-max': array` 
+
+    通过重复属性值 `array` 生成一个新数组，重复次数大于等于 `min`，小于等于 `max`。
+
+4. `'name|count': array` 
+
+    通过重复属性值 `array` 生成一个新数组，重复次数为 `count`。
+
+### 6. 属性值是函数 **Function**
+
+1. `'name': function` 
+
+    执行函数 `function`，取其返回值作为最终的属性值，函数的上下文为属性 `'name'` 所在的对象。
+
+### 7. 属性值是正则表达式 **RegExp**
+
+1. `'name': regexp` 
+
+    根据正则表达式 `regexp` 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
+
+    ```js
+    Mock.mock({
+        'regexp1': /[a-z][A-Z][0-9]/,
+        'regexp2': /\w\W\s\S\d\D/,
+        'regexp3': /\d{5,10}/
+    })
+    // =>
+    {
+        "regexp1": "pJ7",
+        "regexp2": "F)\fp1G",
+        "regexp3": "561659409"
+    }
+    ```
+
+## 数据占位符定义规范 DPD
+
+_占位符_ 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
+
+_占位符_ 的格式为：
+
+```
+@占位符
+@占位符(参数 [, 参数])
+```
+
+**注意：**
+
+1. 用 `@` 来标识其后的字符串是 _占位符_。
+2. _占位符_ 引用的是 `Mock.Random` 中的方法。
+3. 通过 `Mock.Random.extend()` 来扩展自定义占位符。
+4. _占位符_ 也可以引用 _数据模板_ 中的属性。
+5. _占位符_ 会优先引用 _数据模板_ 中的属性。
+6. _占位符_ 支持 _相对路径_ 和 _绝对路径_。
+
+```js
+Mock.mock({
+    name: {
+        first: '@FIRST',
+        middle: '@FIRST',
+        last: '@LAST',
+        full: '@first @middle @last'
+    }
+})
+// =>
+{
+    "name": {
+        "first": "Charles",
+        "middle": "Brenda",
+        "last": "Lopez",
+        "full": "Charles Brenda Lopez"
+    }
+}
+```
--- a/static/md/插件
+++ b/static/md/插件
@@ -0,0 +1,47 @@
+```
+import timeago from 'timeago.js'
+export default {
+  data () {
+    return {
+      // 打开页面时间
+      openPageDate: new Date(),
+      // 打开页面已经过去的时间
+      openPageDateAgo: '',
+      // 打开页面时间计时器
+      dateTimeRangeTimer: null,
+      // 起止时间
+      dateTimeRange: [new Date(2018, 0, 1, 0, 0), new Date()],
+      // 上面起止时间的计算结果
+      dateTimeRangeAgo: ''
+    }
+  },
+  mounted () {
+    // 刷新打开页面过去的时间
+    this.refreshOpenPageDateAgo()
+    this.dateTimeRangeTimer = setInterval(this.refreshOpenPageDateAgo, 1000)
+    // 刷新起止时间的计算结果
+    this.refreshDateTimeRangeAgo()
+  },
+  beforeDestroy () {
+    // 清空计时器
+    clearInterval(this.dateTimeRangeTimer)
+  },
+  watch: {
+    dateTimeRange () {
+      // 刷新起止时间的计算结果
+      this.refreshDateTimeRangeAgo()
+    }
+  },
+  methods: {
+    // 计算打开页面过了多久
+    refreshOpenPageDateAgo () {
+      this.openPageDateAgo = timeago().format(this.openPageDate, 'zh_CN')
+    },
+    // 计算起止时间间隔
+    refreshDateTimeRangeAgo () {
+      const timeagoInstance = timeago(this.dateTimeRange[1])
+      this.dateTimeRangeAgo = timeagoInstance.format(this.dateTimeRange[0], 'zh_CN')
+    }
+  }
+}
+```
--- a/static/md/插件
+++ b/static/md/插件
@@ -0,0 +1,122 @@
+# vue-i18n
+
+多国语插件
+
+> 此文档仅限于演示如何在 `D2Admin` 中使用多国语言设置
+
+公用的语言设置建议放在 `src/i18n` 下
+
+i18n 文件夹结构如下所示
+
+```
+|__index.js // 主文件
+|__lang // 语言配置文件夹
+| |__cn // 中文
+| | |__index.js // 中文 公用配置
+| |__ja // 日语
+| | |__index.js // 日语 公用配置
+| |__en // 英语
+| | |__index.js // 英语 公用配置
+```
+
+在 `src/i18n/index.js` 中导入同级lang文件夹内的语言设置，并导出一个新的 `VueI18n` 实例供 `main.js` 使用
+
+```
+import i18n from './i18n'
+new Vue({
+  el: '#app',
+  store,
+  i18n, // 使用 i18n
+  router,
+  template: '<App/>',
+  components: { App }
+})
+```
+
+## 基本使用方法
+
+使用 `$t('路径')`
+
+```
+<PageHeader
+  slot="header"
+  :title="`${$t('pub.pageHeader.demo')} 1`"
+  url="http://kazupon.github.io/vue-i18n/en/">
+</PageHeader>
+```
+
+## 在组件中单独配置
+
+有时候我们只希望在某个文件中配置这个组件的多国语言，如果所有的语言设置都放在 `d2admin-vue-element/src/i18n` 中会造成混乱，不易维护
+
+`D2Admin` 已经替你安装好了 `vue-i18n-loader`，可以方便地在单文件组件中使用
+
+示例
+
+```
+<i18n src="./lang.json"></i18n>
+
+<template>
+  <div>
+    <el-tag>{{$t('hello')}}</el-tag>
+    <p>{{$t('check.title')}}</p>
+    <el-checkbox-group v-model="check">
+      <el-checkbox label="a">{{$t('check.label.Beijing')}}</el-checkbox>
+      <el-checkbox label="b">{{$t('check.label.Tokyo')}}</el-checkbox>
+      <el-checkbox label="c">{{$t('check.label.NewYork')}}</el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      check: ['a', 'b']
+    }
+  }
+}
+</script>
+```
+
+在同一文件夹下的 `lang.json`
+
+```
+{
+  "cn": {
+    "hello": "你好",
+    "check": {
+      "title": "请选择",
+      "label": {
+        "Beijing": "北京",
+        "Tokyo": "东京",
+        "NewYork": "纽约"
+      }
+    }
+  },
+  "en": {
+    "hello": "hello",
+    "check": {
+      "title": "Please choose",
+      "label": {
+        "Beijing": "Beijing",
+        "Tokyo": "Tokyo",
+        "NewYork": "NewYork"
+      }
+    }
+  },
+  "ja": {
+    "hello": "こんにちは",
+    "check": {
+      "title": "選択してください",
+      "label": {
+        "Beijing": "北京",
+        "Tokyo": "東京",
+        "NewYork": "ニューヨーク"
+      }
+    }
+  }
+}
+```
+
+详细教程请查看官方文档，见此页右上角的链接
--- a/static/md/插件
+++ b/static/md/插件
@@ -0,0 +1,62 @@
+# Vue.$import
+
+本框架集成了数据导入功能，并包装成插件
+
+## 注册插件
+
+> 默认已经注册，可以直接使用
+
+```
+import pluginImport from '@/plugin/import'
+Vue.use(pluginImport)
+```
+
+之后就可以在组件中使用 `this.$import` 来调用导出功能
+
+## Vue.$import.csv()
+
+导入csv文件，并且返回一个 `Promise` 对象
+
+```
+// 在选择文件后调用
+handleUpload (file) {
+  this.$import.csv(file)
+    .then(res => {
+      this.table.columns = Object.keys(res.data[0]).map(e => ({
+        label: e,
+        prop: e
+      }))
+      this.table.data = res.data
+    })
+  // 阻止默认的上传
+  return false
+}
+```
+
+## Vue.$import.xlsx()
+
+导入xlsx文件，并且返回一个 `Promise` 对象
+
+**注意 导入的表格文件第一行应为表头**
+
+参考下述示例使用
+
+```
+// 在选择文件后调用
+handleUpload (file) {
+  this.$import.xlsx(file)
+    .then(({header, results}) => {
+      // header 为表头
+      // results 为内容
+      this.table.columns = header.map(e => {
+        return {
+          label: e,
+          prop: e
+        }
+      })
+      this.table.data = results
+    })
+  // 阻止默认的上传
+  return false
+}
+```
--- a/static/md/插件
+++ b/static/md/插件
@@ -0,0 +1,146 @@
+# Vue.$export
+
+本框架集成了数据导出功能，并包装成插件
+
+## 注册插件
+
+> 默认已经注册，可以直接使用
+
+```
+import pluginExport from '@/plugin/export'
+Vue.use(pluginExport)
+```
+
+之后就可以在组件中使用 `this.$export` 来调用导出功能
+
+## Vue.$export.csv()
+
+此方法将数据以 `CSV` 格式导出，并且返回一个 `Promise` 对象
+
+使用
+
+```
+this.$export.csv({
+  columns,
+  data
+})
+  .then(() => {
+    // ...可选回调
+  })
+```
+
+参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| columns | 列 | 非 | Array |  | 空数组 |
+| data | 行数据 | 非 | Array |  | 空数组 |
+| table | 文件名 | 非 | String |  | table |
+| noHeader | 不导出表头 | 非 | Boolean |  | false |
+| separator | 数据分隔符 | 非 | String |  | , |
+| quoted | 每项数据是否加引号 | 非 | Boolean |  | false |
+
+示例
+
+```
+const columns = [
+  {
+    label: '姓名',
+    prop: 'name'
+  },
+  {
+    label: '年龄',
+    prop: 'age'
+  }
+]
+const data = [
+  {
+    name: 'lucy',
+    age: 24
+  },
+  {
+    name: 'bob',
+    age: 26
+  }
+]
+this.$export.csv({
+  columns,
+  data
+})
+```
+
+## Vue.$export.excel()
+
+此方法将数据以 `xlsx` 格式导出，并且返回一个 `Promise` 对象
+
+使用
+
+```
+this.$export.excel({
+  columns,
+  data
+})
+  .then(() => {
+    // ...可选回调
+  })
+```
+
+参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| columns | 列 | 非 | Array |  | 空数组 |
+| data | 行数据 | 非 | Array |  | 空数组 |
+| table | 文件名 | 非 | String |  | table |
+
+示例
+
+```
+const columns = [
+  {
+    label: '姓名',
+    prop: 'name'
+  },
+  {
+    label: '年龄',
+    prop: 'age'
+  }
+]
+const data = [
+  {
+    name: 'lucy',
+    age: 24
+  },
+  {
+    name: 'bob',
+    age: 26
+  }
+]
+this.$export.excel({
+  columns,
+  data
+})
+```
+
+## Vue.$export.txt()
+
+此方法将数据以 `txt` 格式导出，并且返回一个 `Promise` 对象
+
+使用
+
+```
+this.$export.txt({
+  text: '文本内容',
+  title: '文件名'
+})
+  .then(() => {
+    // ...可选回调
+  })
+```
+
+参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| text | 文件内容 | 非 | String |  | 空 |
+| title | 文件名 | 非 | String |  | 文本 |
--- a/static/md/演示文章
+++ b/static/md/演示文章
@@ -0,0 +1,55 @@
+> 这是一个较长的演示文章，仅仅是为了演示一些文字的显示效果
+
+## vue.js
+
+**易用**
+
+已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
+
+**灵活**
+
+不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
+
+**高效**
+
+20kB min+gzip 运行大小
+
+超快虚拟 DOM
+
+最省心的优化
+
+**Vue.js 是什么**
+
+Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
+
+如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。
+
+## Element
+
+Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
+
+**一致性** Consistency
+
+- 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
+
+- 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
+
+**反馈** Feedback
+
+- 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
+
+- 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
+
+**效率** Efficiency
+
+- 简化流程：设计简洁直观的操作流程；
+
+- 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
+
+- 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
+
+**可控** Controllability
+
+- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
+
+- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
--- a/static/md/组件
+++ b/static/md/组件
@@ -0,0 +1,54 @@
+## 参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| url | markdown文件地址 | 非 | String |  | 无 |
+| md | markdown内容 | 非 | String |  | 无 |
+| highlight | 代码高亮 | 非 | Boolean |  | false |
+| baidupan | 百度网盘分享链接显示优化 | 非 | Boolean |  | true |
+
+## 使用方法
+
+加载一个.md文件
+
+```
+<markdown url="/static/md/xxxx.md"></markdown>
+```
+
+加载资源
+
+```
+const md = `# Header
+
+## title
+
+text`
+
+<markdown :md="md"></markdown>
+```
+
+## 百度网盘分享链接优化
+
+当书写类似下面的分享链接时
+
+> 需要 `baidupan = true`
+
+```
+普通分享链接
+
+> https://pan.baidu.com/s/1kW6uUwB
+
+私密分享链接
+
+> 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y
+```
+
+markdown 中引用部分的文本由于被识别为百度云的分享链接，所以不会被当做 `blockquote` 渲染（非百度云链接的引用行不会改变），会以一种特别的块来显示
+
+就像这样
+
+> https://pan.baidu.com/s/1kW6uUwB
+
+上面的块会嵌套在你的 markdown 渲染结果中
+
+> 了解 D2Admin 是如何在 markdown 中匹配百度云链接的？ [查看源码](https://github.com/FairyEver/d2admin-vue-element/blob/master/src/components/core/Markdown/plugin/baidupan.js)
--- a/static/md/组件
+++ b/static/md/组件
@@ -0,0 +1,25 @@
+# 一级标题
+
+| ID | Name | Email |
+| --- | --- | --- |
+| 0001 | FairyEver | 1711467488@qq.com |
+
+```
+alert('Hello World')
+```
+
+一般引用
+
+> 引用文字
+
+分享一个我很早前的一副设计作品 [in Lofter](http://fairyever.lofter.com/post/16ff00_6796fe8) 借此演示百度云链接的显示优化
+
+> https://pan.baidu.com/s/1kW6uUwB
+
+设计源文件
+
+> 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y
+
+[https://github.com/FairyEver](https://github.com/FairyEver)
+
+
--- a/static/md/组件
+++ b/static/md/组件
@@ -0,0 +1,13 @@
+## 参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| code | 代码字符串 | 非 | String |  | console.log('you lost code prop') |
+
+## 示例
+
+```
+<Highlight code="alert('Hello')"></Highlight>
+```
+
+> 本框架只是提供代码高亮的简单实现，如需实现更高级的设置请修改组件代码
--- a/static/md/组件
+++ b/static/md/组件
@@ -0,0 +1,33 @@
+## 参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| name | 图标名称 | 非 | String | 放在 src/assets/icons/svg 中的 .svg 文件名 | 空 |
+
+## 使用方法
+
+首先将下载的 .svg 图标放入 `src/assets/icons/svg` 文件夹下
+
+然后使用组件
+
+```
+<IconSvg name="刚才的svg文件名"></IconSvg>
+```
+
+## 获取已经注册的所有图标
+
+你已经发现了，只需要将图标文件放入项目中就会自动注册
+
+这是因为已经对 `webpack` 和 `svg-sprite-loader` 进行了相关设置，`src/assets/icons/svg` 文件夹中的图标会自动注册到项目中，文件全部打包成 svg-sprite，名称注册到 `Vue.$IconSvg` 属性中
+
+所以如果你需要检查项目中已经注册的所有图标，可以通过如下方式
+
+```
+// 在 vue 单文件组件中
+console.log(this.$IconSvg)
+```
+
+## 参考
+
+演示图标来源 [iconfont.cn @龙正昆《常用的50个4px双色图标库》](http://iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=4878)
+
--- a/static/md/组件
+++ b/static/md/组件
@@ -0,0 +1,39 @@
+## 参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| name | 图标名称 | 非 | String | font-awesome 所有图标名 | font-awesome |
+
+## 使用方法
+
+基本
+
+```
+// 这样用没有毛病 但是也没什么用
+<Icon></Icon>
+
+// 指定图标名称
+<Icon name="github"></Icon>
+
+// 设置行内样式
+<Icon name="github" style="font-size: 100px;"></Icon>
+
+// 设置 class
+<Icon name="github" class="icon-class-demo"></Icon>
+```
+
+这个组件只是简化了写法而已
+
+```
+<Icon name="github"></Icon>
+// 等同于
+<i class="fa fa-github" aria-hidden="true"></i>
+```
+
+## 参考
+
+图标索引
+
+[Font Awesome 中文网](http://www.fontawesome.com.cn/faicons/)
+
+[fontawesome.com](https://fontawesome.com/icons?d=gallery)
--- a/图标选择器.md
+++ b/图标选择器.md
@@ -0,0 +1,13 @@
+# 图标选择器
+
+## 参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| value | 绑定的值，可以使用 v-model | 非 | String |  |  |
+| placeholder | 占位符，显示在未选择之前的按钮和输入框中 | 非 | String |  | 请选择 |
+| placement | 界面探出方向 | 非 | String | 同 Popover 组件 placement 参数 | right |
+| clearable | 是否允许清空 | 非 | Boolean |  | true |
+| userInput | 是否允许用户自由输入 | 非 | Boolean |  | false |
+| autoClose | 是否在选择后自动关闭 | 非 | Boolean |  | true |
+
--- a/static/md/组件
+++ b/static/md/组件
@@ -0,0 +1,68 @@
+## 介绍
+
+D2Admin 集成了由蚂蚁金服出品的 **G2** 图表库
+
+## 实现方式
+
+`src/components/charts/register.js` 为注册图表组件的文件
+
+`src/components/charts/G2` 为图表组件存放位置
+
+`src/components/charts/G2/mixins/G2.js` 是图表最主要的文件，这是一个所有的图表组件都会使用的 mixin，这个 mixin 主要有以下用途
+
+ - 将 G2 和 DataSet 绑定到 data 上，方便组件使用，省去重复 `import G2 from '@antv/g2'` 等
+ - 将 [G2 Chart类](http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_Chart) 的属性全部暴露为 Vue 组件参数，这些参数会在初始化图表时用到
+ - 提供了额外的设置参数，比如自动高度，自动初始化，初始化延时
+ - 关闭 G2 的体验改进计划打点请求
+ - data 上的 chart 对象
+ - 自动初始化(或者不初始化)图表
+ - `creatChart` 方法，根据参数设置生成 data 上的 chart 对象
+ - `resize` 方法
+
+在图表组件中使用这个 mixin 示例
+
+```
+<template>
+  <!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
+  <div ref="chart" style="height: 100%;"></div>
+</template>
+
+<script>
+// 引入公用 mixin
+import G2 from '@/components/charts/G2/mixins/G2.js'
+export default {
+  mixins: [
+    G2
+  ],
+  methods: {
+    // 初始化图表
+    init () {
+      // mixin 中提供 creatChart 方法，这部分每个图表都一样
+      this.creatChart()
+      // 本组件的特殊设置 这部分每个图表不一样 你只需要改这部分内容
+      this.chart.source(this.data)
+      this.chart.coord().transpose()
+      this.chart.interval().position('x*y')
+      // 最后一步 渲染图表 这部分每个图表都一样
+      this.chart.render()
+    },
+    // 数据源改变 重新渲染新的数据
+    changeData () {
+      this.chart.changeData(this.data)
+    }
+  }
+}
+</script>
+```
+
+上面的代码段展示了如何使用 mixin 快速制作一个图表组件，只需根据某个图表的个性化需要，在组件中重新定义 `init` 和 `changeData` 方法即可
+
+你可以修改这个 mixin 去实现更多的功能，同时影响所有的图表组件
+
+> 这只仅仅是作者个人对于图表封装的一个实现思路
+
+## 为什么没有选择其他产品
+
+G2 完全可以胜任一般的后台界面报表图表需求，而且官网文档清晰友好
+
+如果你需要更酷炫的图表，也完全可以剔除集成的库，换用 百度的[echarts](http://echarts.baidu.com/) 或者超级强大的 [d3.js](https://d3js.org/)
--- a/static/md/组件
+++ b/static/md/组件
@@ -0,0 +1,27 @@
+## 参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| start | 起始值 | 非 | Number |  | 0 |
+| end | 结束值 | 是 | Number |  | 0 |
+| decimals | 小数位数 | 非 | Number |  | 0 |
+| duration | 持续时间 | 非 | Number |  | 2 |
+| options | 设置项 | 非 | Object |  | 空对象 |
+| callback | 回调函数 | 非 | Function |  | 空函数 |
+
+## 示例
+
+```
+// 基本使用方法
+<CountUp :end="100"></CountUp>
+
+// 设置始末值
+<CountUp :start="14" :end="100"></CountUp>
+
+// 设置动画时间
+<CountUp :end="100" :decimals="2"></CountUp>
+```
+
+组件会在页面上渲染 `<span>` 标签
+
+组件根据 [countUp.js](https://github.com/inorganik/countUp.js) 封装，`options` 参数详见原始插件文档
--- a/static/md/组件
+++ b/static/md/组件
@@ -0,0 +1,16 @@
+基础页面容器
+
+```
+<Container>
+  主体内容
+</Container>
+```
+
+使用 `slot`
+
+```
+<Container>
+  <template slot="header">我是插入到 header 中的内容</template>
+  主体内容
+</Container>
+```
--- a/static/md/组件
+++ b/static/md/组件
@@ -0,0 +1,36 @@
+页面容器组件是每个页面的基础，为了在整个项目中统一效果，它应该是 `<template>` 组件的直接子组件
+
+## 参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| type | 容器类型 | 非 | String | card ghost card-full | card |
+| responsive | 响应式宽度 | 非 | Boolean |  | false |
+
+> `responsive` 参数设置只在 `type` 等于 `card` 或 `ghost` 时生效
+
+## 使用方法
+
+一个基础单文件页面组件的示例
+
+```
+<template>
+  <Container>
+    <template slot="header">
+      可选的header内容 ...
+    </template>
+    主体内容 ...
+  </Container>
+</template>
+
+<script>
+export default {
+  name: 'your-component-name'
+}
+</script>
+
+<style lang="scss">
+// 需要的话引入
+@import '~@/assets/style/public.scss';
+</style>
+```