no message
Former-commit-id: d5c2b85bf62d6c02743adad20c6de71ae556a82d [formerly d5c2b85bf62d6c02743adad20c6de71ae556a82d [formerly d5c2b85bf62d6c02743adad20c6de71ae556a82d [formerly d5c2b85bf62d6c02743adad20c6de71ae556a82d [formerly 074099c4c153f024958d3fda5cf710028e03d10a [formerly e73af225c96eb997a86122fc729dfadcdf846a4e]]]]] Former-commit-id: d84a01a4aca85cd9e3891825ac7a152e12280d4e Former-commit-id: 0412c82e909316b780fdd364ecabc78166c7cc0a Former-commit-id: 9e648fdbc93f347265fed8bb56948adda020e1c9 [formerly 8b530e6e6979a9c25832339725619d9d0c8ce76f] Former-commit-id: c12a2ae03243dd387e8c1d6496d6b3bb4148e149 Former-commit-id: 704f81678c7570f204cbe089e7497055c27e1328 Former-commit-id: 3879c040dcf291ef0f44745a5e791b360cde0f40 Former-commit-id: 0871c460804ea97eadf60bf3f0eaa8e147f3fb66 Former-commit-id: 188dd73a6cf49ecbf4cdedce1933f5a856c72b6f
This commit is contained in:
liyang
parent
fbc38520d4
commit
eae8b9291e
|
|
@ -49,26 +49,27 @@ module.exports = {
|
|||
]
|
||||
},
|
||||
{
|
||||
text: '系统',
|
||||
text: '系统模块',
|
||||
items: [
|
||||
{ text: '内置组件', link: '' },
|
||||
{ text: '插件', link: '' },
|
||||
{ text: 'vuex', link: '' },
|
||||
{ text: '菜单', link: '' },
|
||||
{ text: '路由', link: '' },
|
||||
{ text: '主题系统', link: '' },
|
||||
{ text: '数据持久化', link: '' },
|
||||
{ text: 'CSS 实用类', link: '' },
|
||||
{ text: 'JS Util', link: '' }
|
||||
{ text: '组件', link: '/zh/sys-components/' },
|
||||
{ text: '插件', link: '/zh/sys-plugins/' },
|
||||
{ text: 'vuex', link: '/zh/sys-vuex/' },
|
||||
{ text: '菜单', link: '/zh/sys-menu/' },
|
||||
{ text: '路由', link: '/zh/sys-route/' },
|
||||
{ text: '多页面', link: '/zh/sys-multi-page/' },
|
||||
{ text: '主题系统', link: '/zh/sys-theme/' },
|
||||
{ text: '数据持久化', link: '/zh/sys-db/' },
|
||||
{ text: 'CSS 实用类', link: '/zh/sys-css/' },
|
||||
{ text: 'JS Util', link: '/zh/sys-util/' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '生态',
|
||||
items: [
|
||||
{ text: 'D2 Admin start kit', link: '' },
|
||||
{ text: 'D2 Admin ICE', link: '' },
|
||||
{ text: 'D2 CRUD', link: '' },
|
||||
{ text: 'D2 Ribbons', link: '' }
|
||||
{ text: 'D2 Admin start kit', link: '/zh/ecosystem-d2-admin-start-kit/' },
|
||||
{ text: 'D2 Admin ICE', link: '/zh/ecosystem-d2-admin-ice/' },
|
||||
{ text: 'D2 CRUD', link: '/zh/ecosystem-d2-crud/' },
|
||||
{ text: 'D2 Ribbons', link: '/zh/ecosystem-d2-ribbons/' }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -84,15 +85,18 @@ module.exports = {
|
|||
{ text: 'CSDN', link: '' },
|
||||
{ text: 'segmentfault', link: '' },
|
||||
{ text: '知乎', link: '' },
|
||||
{ text: '微信公众号', link: '' }
|
||||
{ text: '微信公众号', link: '' },
|
||||
{ text: '交流群', link: '' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{ text: '常见问题', link: '' }
|
||||
{ text: '常见问题', link: '/zh/question/' }
|
||||
],
|
||||
sidebar: {
|
||||
'/zh/learn-guide/': sideBarLearnGuide()
|
||||
'/zh/learn-guide/': sideBarLearnGuide(),
|
||||
'/zh/sys-components/': sideBarSysComponents(),
|
||||
'/zh/sys-plugins/': sideBarSysPlugins()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -109,4 +113,36 @@ function sideBarLearnGuide () {
|
|||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function sideBarSysComponents () {
|
||||
return [
|
||||
{
|
||||
collapsable: false,
|
||||
children: [
|
||||
'container',
|
||||
'icon',
|
||||
'icon-svg',
|
||||
'icon-select',
|
||||
'charts-new',
|
||||
'markdown',
|
||||
'highlight',
|
||||
'count-up'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function sideBarSysPlugins () {
|
||||
return [
|
||||
{
|
||||
collapsable: false,
|
||||
children: [
|
||||
'data-export',
|
||||
'data-import',
|
||||
'i18n',
|
||||
'mock.md'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# title
|
||||
|
||||
info
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# title
|
||||
|
||||
info
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# title
|
||||
|
||||
info
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# title
|
||||
|
||||
info
|
||||
|
|
@ -4,28 +4,6 @@
|
|||
|
||||
|
||||
|
||||
## 前置知识
|
||||
|
||||
使用 D2Admin 首先组要有以下前置知识：
|
||||
|
||||
* 首先需要熟悉 web 开发基础三样：[HTML CSS JavaScript](http://www.w3school.com.cn/)
|
||||
* 会使用 [vue.js](https://cn.vuejs.org/)
|
||||
|
||||
如果您了解以下技术，在使用本项目进行您的开发时会更加得心应手：
|
||||
|
||||
* [ES6](http://es6.ruanyifeng.com/)
|
||||
* [sass](https://www.sass.hk/guide/)
|
||||
|
||||
## 准备
|
||||
|
||||
在上手之前，建议您先大致浏览以下章节，对整个系统有大致了解：
|
||||
|
||||
* 每个页面最基础的构成部分：[页面容器](../components/container.md)
|
||||
* 一些会用到的全局数据和方法：[VUEX 实用工具](../plugins/vuex.md)
|
||||
* 一些会用到的公用方法：[Util 实用工具](../plugins/util.md)
|
||||
|
||||
如果想了解更多 D2Admin 相关的教程和更新文章，可以参阅 [文章](../article/)
|
||||
|
||||
## 下载项目
|
||||
|
||||
* 完整版仓库 [Github](https://github.com/d2-projects/d2-admin) | [码云](https://gitee.com/fairyever/d2-admin)
|
||||
|
|
@ -266,47 +244,3 @@ export default [
|
|||
|
||||
|
||||
上述教程只是介绍了 D2Admin 的冰山一角，更多的配置项和组件文档请查阅本文档其它板块。
|
||||
|
||||
如果您有疑问，请加 QQ 群 **806395827** 反馈。
|
||||
|
||||
## 资源
|
||||
|
||||
下面是一些在开发过程会用到的文档，列举在这里方便大家快速查看：
|
||||
|
||||
组件库：
|
||||
|
||||
* [element-ui](http://element.eleme.io/#/zh-CN/component/quickstart)
|
||||
|
||||
项目基础：
|
||||
|
||||
| 名称 | 介绍 |
|
||||
| --- | --- |
|
||||
| [vue.js](https://cn.vuejs.org/v2/guide/) | 框架基础 |
|
||||
| [vuex](https://vuex.vuejs.org/zh/guide/) | 全局状态管理 |
|
||||
| [vue-router](https://router.vuejs.org/zh/guide/) | 路由控制 |
|
||||
| [sass](https://www.sass.hk/guide/) | CSS 预处理语言 |
|
||||
|
||||
脚手架：
|
||||
|
||||
| 名称 | 介绍 |
|
||||
| --- | --- |
|
||||
| [vue-cli3](https://github.com/vuejs/vue-docs-zh-cn/tree/master/vue-cli) | 项目脚手架 |
|
||||
| [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain) | vue-cli3 中 webpack 的配置语法 |
|
||||
|
||||
插件：
|
||||
|
||||
| 名称 | 介绍 |
|
||||
| --- | --- |
|
||||
| [lodash](https://lodash.com/docs/4.17.10) | 一致性、模块化、高性能的 JavaScript 实用工具库 |
|
||||
| [axios](https://github.com/axios/axios) | 最流行的网络请求库 |
|
||||
| [better-scroll](https://github.com/ustbhuangyi/better-scroll) | [d2-container](../components/container.md) 的自定义滚动条依赖 |
|
||||
| [dayjs](https://github.com/iamkun/dayjs) | 日期处理库 |
|
||||
| [v-charts](https://v-charts.js.org/#/props) | vue 版本的 echarts 由饿了么开发 |
|
||||
| [echarts](http://echarts.baidu.com/index.html) | v-charts 的核心 |
|
||||
| [lowdb](https://github.com/typicode/lowdb) | D2Admin 操作本地数据的依赖 |
|
||||
| [mockjs](https://github.com/nuysoft/Mock/wiki) | 模拟请求依赖 |
|
||||
| [vue-i18n](https://kazupon.github.io/vue-i18n/guide/started.html) | 多国语依赖 |
|
||||
| [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout) | 网格布局组件 |
|
||||
| [vue-splitpane](https://www.npmjs.com/package/vue-splitpane) | 切分布局组件 |
|
||||
|
||||
上面只是一些猜您会用到的链接，还有一些项目中用到但是这里没有列举的，如果您觉得有必要，可以提 pr 修改本篇文档。
|
||||
|
|
@ -4,12 +4,54 @@ sidebar: auto
|
|||
|
||||
# 相关知识
|
||||
|
||||
介绍开发所需要的知识
|
||||
使用 D2Admin 首先组要有以下前置知识：
|
||||
|
||||
## CSS
|
||||
* 首先需要熟悉 web 开发基础三样：[HTML CSS JavaScript](http://www.w3school.com.cn/)
|
||||
* 会使用 [vue.js](https://cn.vuejs.org/)
|
||||
|
||||
## SCSS
|
||||
如果您了解以下技术，在使用本项目进行您的开发时会更加得心应手：
|
||||
|
||||
## JavaScript
|
||||
* [ES6](http://es6.ruanyifeng.com/)
|
||||
* [sass](https://www.sass.hk/guide/)
|
||||
|
||||
## webpack
|
||||
## 资源
|
||||
|
||||
下面是一些在开发过程会用到的文档，列举在这里方便大家快速查看：
|
||||
|
||||
组件库：
|
||||
|
||||
* [element-ui](http://element.eleme.io/#/zh-CN/component/quickstart)
|
||||
|
||||
项目基础：
|
||||
|
||||
| 名称 | 介绍 |
|
||||
| --- | --- |
|
||||
| [vue.js](https://cn.vuejs.org/v2/guide/) | 框架基础 |
|
||||
| [vuex](https://vuex.vuejs.org/zh/guide/) | 全局状态管理 |
|
||||
| [vue-router](https://router.vuejs.org/zh/guide/) | 路由控制 |
|
||||
| [sass](https://www.sass.hk/guide/) | CSS 预处理语言 |
|
||||
|
||||
脚手架：
|
||||
|
||||
| 名称 | 介绍 |
|
||||
| --- | --- |
|
||||
| [vue-cli3](https://github.com/vuejs/vue-docs-zh-cn/tree/master/vue-cli) | 项目脚手架 |
|
||||
| [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain) | vue-cli3 中 webpack 的配置语法 |
|
||||
|
||||
插件：
|
||||
|
||||
| 名称 | 介绍 |
|
||||
| --- | --- |
|
||||
| [lodash](https://lodash.com/docs/4.17.10) | 一致性、模块化、高性能的 JavaScript 实用工具库 |
|
||||
| [axios](https://github.com/axios/axios) | 最流行的网络请求库 |
|
||||
| [better-scroll](https://github.com/ustbhuangyi/better-scroll) | [d2-container](../components/container.md) 的自定义滚动条依赖 |
|
||||
| [dayjs](https://github.com/iamkun/dayjs) | 日期处理库 |
|
||||
| [v-charts](https://v-charts.js.org/#/props) | vue 版本的 echarts 由饿了么开发 |
|
||||
| [echarts](http://echarts.baidu.com/index.html) | v-charts 的核心 |
|
||||
| [lowdb](https://github.com/typicode/lowdb) | D2Admin 操作本地数据的依赖 |
|
||||
| [mockjs](https://github.com/nuysoft/Mock/wiki) | 模拟请求依赖 |
|
||||
| [vue-i18n](https://kazupon.github.io/vue-i18n/guide/started.html) | 多国语依赖 |
|
||||
| [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout) | 网格布局组件 |
|
||||
| [vue-splitpane](https://www.npmjs.com/package/vue-splitpane) | 切分布局组件 |
|
||||
|
||||
上面只是一些猜您会用到的链接，还有一些项目中用到但是这里没有列举的，如果您觉得有必要，可以提 pr 修改本篇文档。
|
||||
|
|
@ -0,0 +1 @@
|
|||
a25839f07ff223296de4b9330e10b08a04ae28ce
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# 组件
|
||||
|
||||
d2-admin（以下简称 d2admin）封装（或者集成第三方）了一些组件，方便开发者进行开发，具体组件文档请从左侧列表进入
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
# 图表
|
||||
|
||||
::: tip
|
||||
`1.1.0` 版本使用的是 `G2` 图表库，`1.1.3` 开始使用 `v-charts`
|
||||
:::
|
||||
|
||||
## 介绍
|
||||
|
||||
在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。
|
||||
|
||||
[v-charts 文档](https://v-charts.js.org/#/)
|
||||
|
||||
处于对用户使用方便的角度考虑，从 `1.1.3` 开始使用 v-charts。项目中已经安装并注册完毕 v-charts，你可以直接使用
|
||||
|
|
@ -0,0 +1 @@
|
|||
be315dc4b20db4a72f9543b102c601365693b67d
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
# 数字动画
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| start | 起始值 | 非 | Number | | 0 |
|
||||
| end | 结束值 | 是 | Number | | 0 |
|
||||
| decimals | 小数位数 | 非 | Number | | 0 |
|
||||
| duration | 持续时间 | 非 | Number | | 2 |
|
||||
| options | 设置项 | 非 | Object | | 空对象 |
|
||||
| callback | 回调函数 | 非 | Function | | 空函数 |
|
||||
|
||||
## 示例
|
||||
|
||||
``` vue
|
||||
// 基本使用方法
|
||||
<d2-count-up :end="100"/>
|
||||
|
||||
// 设置始末值
|
||||
<d2-count-up :start="14" :end="100"/>
|
||||
|
||||
// 设置动画时间
|
||||
<d2-count-up :end="100" :decimals="2"/>
|
||||
```
|
||||
|
||||
组件会在页面上渲染 `<span>` 标签
|
||||
|
||||
组件根据 [countUp.js](https://github.com/inorganik/countUp.js) 封装，`options` 参数详见原始插件文档
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
# 代码高亮
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| code | 代码字符串 | 非 | String | | console.log('you lost code prop') |
|
||||
| format-html | 是否格式化 HTML | 非 | Boolean | | false |
|
||||
|
||||
::: tip
|
||||
format 建议只在内容为 HTML 的时候打开，如果内容不是 HTML，设置为 true 会有负面效果
|
||||
:::
|
||||
|
||||
## 示例
|
||||
|
||||
``` vue
|
||||
<d2-highlight code="alert('Hello')"/>
|
||||
```
|
||||
|
||||
::: tip
|
||||
本框架只是提供代码高亮的简单实现，如需实现更高级的设置请修改组件代码
|
||||
:::
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
# 图标选择器
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| value | 绑定的值，可以使用 v-model | 非 | String | | |
|
||||
| placeholder | 占位符，显示在未选择之前的按钮和输入框中 | 非 | String | | 请选择 |
|
||||
| placement | 界面探出方向 | 非 | String | 同 Popover 组件 placement 参数 | right |
|
||||
| clearable | 是否允许清空 | 非 | Boolean | | true |
|
||||
| userInput | 是否允许用户自由输入 | 非 | Boolean | | false |
|
||||
| autoClose | 是否在选择后自动关闭 | 非 | Boolean | | true |
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
# 图标 - SVG
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| name | 图标名称 | 非 | String | src/assets/icons/svg 中 .svg 文件名 | 空 |
|
||||
|
||||
## 使用方法
|
||||
|
||||
首先将下载的 .svg 图标放入 `src/assets/icons/svg` 文件夹下
|
||||
|
||||
然后使用组件
|
||||
|
||||
``` vue
|
||||
<d2-icon-svg name="刚才的svg文件名"/>
|
||||
```
|
||||
|
||||
## 获取已经注册的所有图标
|
||||
|
||||
你已经发现了，只需要将图标文件放入项目中就会自动注册
|
||||
|
||||
这是因为已经对 `webpack` 和 `svg-sprite-loader` 进行了相关设置，`src/assets/icons/svg` 文件夹中的图标会自动注册到项目中，文件全部打包成 svg-sprite，名称注册到 `Vue.$IconSvg` 属性中
|
||||
|
||||
所以如果你需要检查项目中已经注册的所有图标，可以通过如下方式
|
||||
|
||||
``` js
|
||||
// 在 vue 单文件组件中
|
||||
console.log(this.$IconSvg)
|
||||
```
|
||||
|
||||
## 参考
|
||||
|
||||
演示图标来源 [iconfont.cn @龙正昆《常用的50个4px双色图标库》](http://iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=4878)
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
# 图标
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| name | 图标名称 | 非 | String | font-awesome 所有图标名 | font-awesome |
|
||||
|
||||
## 使用方法
|
||||
|
||||
基本
|
||||
|
||||
``` vue
|
||||
// 这样用没有毛病 但是也没什么用
|
||||
<d2-icon/>
|
||||
|
||||
// 指定图标名称
|
||||
<d2-icon name="github"/>
|
||||
|
||||
// 设置行内样式
|
||||
<d2-icon name="github" style="font-size: 100px;"/>
|
||||
|
||||
// 设置 class
|
||||
<d2-icon name="github" class="icon-class-demo"/>
|
||||
```
|
||||
|
||||
这个组件只是简化了写法而已
|
||||
|
||||
``` vue
|
||||
<d2-icon name="github"/>
|
||||
// 等同于
|
||||
<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)
|
||||
|
|
@ -0,0 +1 @@
|
|||
3a5bb0f2628d9251bbe7474c0535258784cf770b
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
# markdown 渲染器
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| url | markdown文件地址 | 非 | String | | 无 |
|
||||
| source | markdown内容 | 非 | String | | 无 |
|
||||
| highlight | 代码高亮 | 非 | Boolean | | false |
|
||||
| baidupan | 百度网盘分享链接显示优化 | 非 | Boolean | | true |
|
||||
|
||||
## 使用方法
|
||||
|
||||
加载一个.md文件
|
||||
|
||||
``` vue
|
||||
<d2-markdown url="/static/md/xxxx.md"/>
|
||||
```
|
||||
|
||||
加载资源
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<d2-markdown :source="doc"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const doc = `
|
||||
# Header
|
||||
|
||||
## title
|
||||
|
||||
text`.trim()
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
D2Admin 已经帮你配置好 webpack，你可以使用以下方式加载 markdown 文件
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<d2-markdown :source="doc"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import doc from './md/doc.md'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 百度网盘分享链接优化
|
||||
|
||||
当书写类似下面的分享链接时
|
||||
|
||||
::: tip
|
||||
需要 `baidupan = true`
|
||||
:::
|
||||
|
||||
```
|
||||
普通分享链接
|
||||
|
||||
> https://pan.baidu.com/s/1kW6uUwB
|
||||
|
||||
私密分享链接
|
||||
|
||||
> 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y
|
||||
```
|
||||
|
||||
markdown 中引用部分的文本由于被识别为百度云的分享链接，所以不会被当做 `blockquote` 渲染（非百度云链接的引用行不会改变），会以一种特别的块来显示，效果见下
|
||||
|
||||
|
||||
|
||||
::: tip
|
||||
了解 D2Admin 是如何在 markdown 中匹配百度云链接的？ [查看源码](https://github.com/d2-projects/d2-admin/blob/master/src/components/core/d2-markdown/index.vue)
|
||||
:::
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# title
|
||||
|
||||
info
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# title
|
||||
|
||||
info
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# title
|
||||
|
||||
info
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# title
|
||||
|
||||
info
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
# 插件概述
|
||||
|
||||
d2-admin（以下简称 d2admin）封装（或者集成第三方）了一些插件，方便开发者进行开发，具体组件文档请从左侧列表进入
|
||||
|
||||
::: tip
|
||||
这里只列出一部分需要特别说明的插件，大部分集成的插件都可以在网络上找到官方文档
|
||||
:::
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
# 表格导出
|
||||
|
||||
本框架集成了数据导出功能，并包装成插件
|
||||
|
||||
## 注册插件
|
||||
|
||||
``` js
|
||||
import pluginExport from '@/plugin/export'
|
||||
Vue.use(pluginExport)
|
||||
```
|
||||
|
||||
之后就可以在组件中使用 `this.$export` 来调用导出功能
|
||||
|
||||
::: tip
|
||||
d2admin 已经帮你注册好，可以直接使用，无需写上面的代码
|
||||
:::
|
||||
|
||||
## 导出 csv
|
||||
|
||||
此方法将数据以 `csv` 格式导出，并且返回一个 `Promise` 对象
|
||||
|
||||
使用
|
||||
|
||||
``` js
|
||||
this.$export.csv({
|
||||
columns,
|
||||
data
|
||||
})
|
||||
.then(() => {
|
||||
// ...可选回调
|
||||
})
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| columns | 列 | 非 | Array | | 空数组 |
|
||||
| data | 行数据 | 非 | Array | | 空数组 |
|
||||
| title | 文件名 | 非 | String | | table |
|
||||
| noHeader | 不导出表头 | 非 | Boolean | | false |
|
||||
| separator | 数据分隔符 | 非 | String | | , |
|
||||
| quoted | 每项数据是否加引号 | 非 | Boolean | | false |
|
||||
|
||||
示例
|
||||
|
||||
``` js
|
||||
const columns = [
|
||||
{
|
||||
label: '姓名',
|
||||
prop: 'name'
|
||||
},
|
||||
{
|
||||
label: '年龄',
|
||||
prop: 'age'
|
||||
}
|
||||
]
|
||||
const data = [
|
||||
{
|
||||
name: 'lucy',
|
||||
age: 24
|
||||
},
|
||||
{
|
||||
name: 'bob',
|
||||
age: 26
|
||||
}
|
||||
]
|
||||
this.$export.csv({
|
||||
columns,
|
||||
data
|
||||
})
|
||||
```
|
||||
|
||||
## 导出 xlsx
|
||||
|
||||
此方法将数据以 `xlsx` 格式导出，并且返回一个 `Promise` 对象
|
||||
|
||||
使用
|
||||
|
||||
``` js
|
||||
this.$export.excel({
|
||||
columns,
|
||||
data
|
||||
})
|
||||
.then(() => {
|
||||
// ...可选回调
|
||||
})
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| columns | 列 | 非 | Array | | 空数组 |
|
||||
| data | 行数据 | 非 | Array | | 空数组 |
|
||||
| title | 文件名 | 非 | String | | table |
|
||||
|
||||
示例
|
||||
|
||||
``` js
|
||||
const columns = [
|
||||
{
|
||||
label: '姓名',
|
||||
prop: 'name'
|
||||
},
|
||||
{
|
||||
label: '年龄',
|
||||
prop: 'age'
|
||||
}
|
||||
]
|
||||
const data = [
|
||||
{
|
||||
name: 'lucy',
|
||||
age: 24
|
||||
},
|
||||
{
|
||||
name: 'bob',
|
||||
age: 26
|
||||
}
|
||||
]
|
||||
this.$export.excel({
|
||||
columns,
|
||||
data
|
||||
})
|
||||
```
|
||||
|
||||
## 导出 txt
|
||||
|
||||
此方法将数据以 `txt` 格式导出，并且返回一个 `Promise` 对象
|
||||
|
||||
使用
|
||||
|
||||
``` js
|
||||
this.$export.txt({
|
||||
text: '文本内容',
|
||||
title: '文件名'
|
||||
})
|
||||
.then(() => {
|
||||
// ...可选回调
|
||||
})
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| text | 文件内容 | 非 | String | | 空 |
|
||||
| title | 文件名 | 非 | String | | 文本 |
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
# 表格导入
|
||||
|
||||
本框架集成了数据导入功能，并包装成插件
|
||||
|
||||
## 注册插件
|
||||
|
||||
``` js
|
||||
import pluginImport from '@/plugin/import'
|
||||
Vue.use(pluginImport)
|
||||
```
|
||||
|
||||
之后就可以在组件中使用 `this.$import` 来调用导出功能
|
||||
|
||||
::: tip
|
||||
d2admin 已经帮你注册好，可以直接使用，无需写上面的代码
|
||||
:::
|
||||
|
||||
## 导入 csv
|
||||
|
||||
导入csv文件，并且返回一个 `Promise` 对象
|
||||
|
||||
``` js
|
||||
// 在选择文件后调用
|
||||
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
|
||||
}
|
||||
```
|
||||
|
||||
## 导入 xlsx
|
||||
|
||||
导入xlsx文件，并且返回一个 `Promise` 对象
|
||||
|
||||
**注意 导入的表格文件第一行应为表头**
|
||||
|
||||
参考下述示例使用
|
||||
|
||||
``` js
|
||||
// 在选择文件后调用
|
||||
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
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
# 多国语
|
||||
|
||||
多国语插件
|
||||
|
||||
::: tip
|
||||
此文档仅限于演示如何在 `D2Admin` 中使用多国语言设置
|
||||
:::
|
||||
|
||||
公用的语言设置建议放在 `src/i18n` 下
|
||||
|
||||
i18n 文件夹结构如下所示
|
||||
|
||||
```
|
||||
|__index.js // 主文件
|
||||
|__lang // 语言配置文件夹
|
||||
| |__cn // 中文
|
||||
| | |__index.js // 中文 公用配置
|
||||
| |__ja // 日语
|
||||
| | |__index.js // 日语 公用配置
|
||||
| |__en // 英语
|
||||
| | |__index.js // 英语 公用配置
|
||||
```
|
||||
|
||||
在 `src/i18n/index.js` 中导入同级lang文件夹内的语言设置，并导出一个新的 `VueI18n` 实例供 `main.js` 使用
|
||||
|
||||
``` js
|
||||
import i18n from './i18n'
|
||||
new Vue({
|
||||
el: '#app',
|
||||
store,
|
||||
i18n, // 使用 i18n
|
||||
router,
|
||||
template: '<App/>',
|
||||
components: { App }
|
||||
})
|
||||
```
|
||||
|
||||
## 使用
|
||||
|
||||
使用 `$t('路径')`
|
||||
|
||||
``` vue
|
||||
<PageHeader
|
||||
slot="header"
|
||||
:title="`${$t('pub.pageHeader.demo')} 1`"
|
||||
url="http://kazupon.github.io/vue-i18n/en/">
|
||||
</PageHeader>
|
||||
```
|
||||
|
||||
## 局部配置
|
||||
|
||||
有时候我们只希望在某个文件中配置这个组件的多国语言，如果所有的语言设置都放在 `d2-admin/src/i18n` 中会造成混乱，不易维护
|
||||
|
||||
`D2Admin` 已经替你安装好了 `vue-i18n-loader`，可以方便地在单文件组件中使用
|
||||
|
||||
示例
|
||||
|
||||
``` vue
|
||||
<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`
|
||||
|
||||
``` 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": "ニューヨーク"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
详细教程请查看官方文档，见此页右上角的链接
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
# 模拟数据
|
||||
|
||||
在 `src/mock/demo/001.js` 配置拦截返回的数据
|
||||
|
||||
## 使用
|
||||
|
||||
``` 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'
|
||||
}]
|
||||
})
|
||||
```
|
||||
|
||||
请求数据
|
||||
|
||||
``` js
|
||||
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
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## mock 语法规范
|
||||
|
||||
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"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# title
|
||||
|
||||
info
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# title
|
||||
|
||||
info
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# title
|
||||
|
||||
info
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# title
|
||||
|
||||
info
|
||||
Loading…
Reference in New Issue