Merge pull request #5 from FairyEver/dev
add docs Former-commit-id: d307a5802eb4136a89f0e142293aa6eec16144c7 Former-commit-id: a52b45bdc8709f3590d4da85b2c8e2b4842621da Former-commit-id: 85206b3a501daf35497128d9fd4b70c366679ca0
This commit is contained in:
李杨
GitHub
91
README.md
91
README.md
@@ -21,7 +21,7 @@ Solution of management system front-end based on `vue.js` and `ElementUI`
|
|||||||
|
|
||||||
Welcome everyone to maintain
|
Welcome everyone to maintain
|
||||||
|
|
||||||
[Documentation (English)](https://fairyever.github.io/d2admin-vue-element-doc/) / [中文文档](https://fairyever.github.io/d2admin-vue-element-doc/zh/)
|
[Documentation (English)](https://fairyever.github.io/d2admin-vue-element/) / [中文文档](https://fairyever.github.io/d2admin-vue-element/zh/)
|
||||||
|
|
||||||
[Online preview / 在线预览](http://d2admin.fairyever.com/)
|
[Online preview / 在线预览](http://d2admin.fairyever.com/)
|
||||||
|
|
||||||
@@ -128,91 +128,4 @@ v8.11.1
|
|||||||
edunpm - http://registry.enpmjs.org/
|
edunpm - http://registry.enpmjs.org/
|
||||||
```
|
```
|
||||||
|
|
||||||
> Not recommended for use `cnpm`
|
> Not recommended for use `cnpm`
|
||||||
|
|
||||||
## preview
|
|
||||||
|
|
||||||
login
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
dashboard
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
mock data demo
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
dragable and modified size card
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
dragable layout
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
multi-language support
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
import `csv` `xlsx`
|
|
||||||
export `csv` `xlsx` and text
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
three modes page container component
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
integrated rich text editor
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
integrated markdown editor
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
integrated icon font
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
encapsulation icon component
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
support automatically import SVG folder icon, and through the use of components
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
icon selector component
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Integrated markdown rendering function and optimized the Baidu cloud sharing link in the rendering result display
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
integrated digital animation plug-in
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
hightLight in source code viewer
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
integrated chart
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
support chart drag and resize and drag and drop locations
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
separate chart example
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
25
deploy.sh
Executable file
25
deploy.sh
Executable file
@@ -0,0 +1,25 @@
|
|||||||
|
#!/usr/bin/env sh
|
||||||
|
|
||||||
|
# 确保脚本抛出遇到的错误
|
||||||
|
set -e
|
||||||
|
|
||||||
|
# 生成静态文件
|
||||||
|
npm run doc:build
|
||||||
|
|
||||||
|
# 进入生成的文件夹
|
||||||
|
cd docs/.vuepress/dist
|
||||||
|
|
||||||
|
# 如果是发布到自定义域名
|
||||||
|
# echo 'www.example.com' > CNAME
|
||||||
|
|
||||||
|
git init
|
||||||
|
git add -A
|
||||||
|
git commit -m 'deploy'
|
||||||
|
|
||||||
|
# 如果发布到 https://<USERNAME>.github.io
|
||||||
|
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
|
||||||
|
|
||||||
|
# 如果发布到 https://<USERNAME>.github.io/<REPO>
|
||||||
|
git push -f git@github.com:FairyEver/d2admin-vue-element.git master:gh-pages
|
||||||
|
|
||||||
|
cd -
|
||||||
94
docs/.vuepress/config.js
Normal file
94
docs/.vuepress/config.js
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
module.exports = {
|
||||||
|
base: '/d2admin-vue-element/',
|
||||||
|
locales: {
|
||||||
|
'/': {
|
||||||
|
lang: 'en-US',
|
||||||
|
title: 'D2 Admin',
|
||||||
|
description: 'An elegant template for management system'
|
||||||
|
},
|
||||||
|
'/zh/': {
|
||||||
|
lang: 'zh-CN',
|
||||||
|
title: 'D2 Admin',
|
||||||
|
description: '做一个优雅的管理系统模板'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
themeConfig: {
|
||||||
|
// 项目仓库地址
|
||||||
|
repo: 'https://github.com/FairyEver/d2admin-vue-element',
|
||||||
|
// 自定义仓库链接文字
|
||||||
|
repoLabel: '查看源码',
|
||||||
|
// 文档不是放在仓库的根目录下
|
||||||
|
docsDir: 'docs',
|
||||||
|
// 默认是 false, 设置为 true 来启用
|
||||||
|
editLinks: true,
|
||||||
|
// 多国语言
|
||||||
|
locales: {
|
||||||
|
'/': {
|
||||||
|
selectText: 'Languages',
|
||||||
|
label: 'English',
|
||||||
|
editLinkText: 'Edit this page on GitHub',
|
||||||
|
lastUpdated: 'Last update'
|
||||||
|
},
|
||||||
|
'/zh/': {
|
||||||
|
selectText: '选择语言',
|
||||||
|
label: '简体中文',
|
||||||
|
editLinkText: '在 GitHub 上编辑此页',
|
||||||
|
lastUpdated: '最后更新',
|
||||||
|
nav: [
|
||||||
|
{ text: '指南', link: '/zh/guide/' },
|
||||||
|
{ text: '插件', link: '/zh/plugins/' },
|
||||||
|
{ text: '组件', link: '/zh/components/' },
|
||||||
|
{ text: '下载', link: 'https://github.com/FairyEver/d2admin-vue-element/releases' }
|
||||||
|
],
|
||||||
|
sidebar: {
|
||||||
|
'/zh/guide/': sideBarGuide('指南'),
|
||||||
|
'/zh/plugins/': sideBarPlugins('插件'),
|
||||||
|
'/zh/components/': sideBarComponents('组件')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function sideBarGuide (title) {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
title,
|
||||||
|
collapsable: false,
|
||||||
|
children: [
|
||||||
|
'',
|
||||||
|
'q-a',
|
||||||
|
'change-log'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
function sideBarPlugins () {
|
||||||
|
return [
|
||||||
|
'data-export',
|
||||||
|
'data-import',
|
||||||
|
'i18n',
|
||||||
|
'mock',
|
||||||
|
'timeago'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
function sideBarComponents (title) {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
title,
|
||||||
|
collapsable: false,
|
||||||
|
children: [
|
||||||
|
'charts',
|
||||||
|
'container',
|
||||||
|
'count-up',
|
||||||
|
'highlight',
|
||||||
|
'icon-select',
|
||||||
|
'icon-svg',
|
||||||
|
'icon',
|
||||||
|
'markdown'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
1
docs/.vuepress/override.styl
Normal file
1
docs/.vuepress/override.styl
Normal file
@@ -0,0 +1 @@
|
|||||||
|
$accentColor = #409EFF
|
||||||
1
docs/.vuepress/public/logo@2x.png.REMOVED.git-id
Normal file
1
docs/.vuepress/public/logo@2x.png.REMOVED.git-id
Normal file
@@ -0,0 +1 @@
|
|||||||
|
d9ade30cf874de657275755e4783fde51f2f6ffc
|
||||||
29
docs/README.md
Normal file
29
docs/README.md
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
---
|
||||||
|
home: true
|
||||||
|
heroImage: /logo@2x.png
|
||||||
|
actionText: Get Started →
|
||||||
|
actionLink: /zh/guide/
|
||||||
|
features:
|
||||||
|
- title: Advocate succinct
|
||||||
|
details: On the visual basis of element UI, we have added some customization.
|
||||||
|
- title: Vue-Powered
|
||||||
|
details: Enjoy the dev experience of Vue + webpack, Ultra fast virtual DOM and the most economical optimization.
|
||||||
|
- title: ElementUI component library
|
||||||
|
details: Integrated and robust ElementUI, and use any ElementUI component at will.
|
||||||
|
footer: MIT Licensed | Copyright © 2018-present FairyEver
|
||||||
|
---
|
||||||
|
|
||||||
|
**The English document will be launched in the future. Please move to the Chinese document.**
|
||||||
|
|
||||||
|
**英文文档会在稍后推出，现请移步右上角中文文档**
|
||||||
|
|
||||||
|
```
|
||||||
|
// chone
|
||||||
|
git clone https://github.com/FairyEver/d2admin-vue-element.git
|
||||||
|
// install package
|
||||||
|
npm i
|
||||||
|
// run
|
||||||
|
npm run dev
|
||||||
|
// build
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
25
docs/zh/README.md
Normal file
25
docs/zh/README.md
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
---
|
||||||
|
home: true
|
||||||
|
heroImage: /logo@2x.png
|
||||||
|
actionText: 快速上手 →
|
||||||
|
actionLink: /zh/guide/
|
||||||
|
features:
|
||||||
|
- title: 简洁至上
|
||||||
|
details: 在 element UI 的视觉基础上稍加定制。
|
||||||
|
- title: Vue驱动
|
||||||
|
details: 享受 Vue + webpack 的开发体验，超快虚拟 DOM 和最省心的优化。
|
||||||
|
- title: ElementUI组件库
|
||||||
|
details: 集成完善且强大的 ElementUI，随意搭配使用任何 ElementUI 组件。
|
||||||
|
footer: MIT Licensed | Copyright © 2018-present FairyEver
|
||||||
|
---
|
||||||
|
|
||||||
|
```
|
||||||
|
// 克隆仓库
|
||||||
|
git clone https://github.com/FairyEver/d2admin-vue-element.git
|
||||||
|
// 安装依赖
|
||||||
|
npm i
|
||||||
|
// 运行
|
||||||
|
npm run dev
|
||||||
|
// 打包
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
3
docs/zh/components/README.md
Normal file
3
docs/zh/components/README.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# 组件概述
|
||||||
|
|
||||||
|
d2admin-vue-element（以下简称 d2admin）封装（或者集成第三方）了一些组件，方便开发者进行开发，具体组件文档请从左侧列表进入
|
||||||
72
docs/zh/components/charts.md
Normal file
72
docs/zh/components/charts.md
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
# 图表
|
||||||
|
|
||||||
|
## 介绍
|
||||||
|
|
||||||
|
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 示例
|
||||||
|
|
||||||
|
``` vue
|
||||||
|
<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 去实现更多的功能，同时影响所有的图表组件
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
这只仅仅是作者个人对于图表封装的一个实现思路
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 为什么没有选择其他产品
|
||||||
|
|
||||||
|
G2 完全可以胜任一般的后台界面报表图表需求，而且官网文档清晰友好
|
||||||
|
|
||||||
|
如果你需要更酷炫的图表，也完全可以剔除集成的库，换用 百度的[echarts](http://echarts.baidu.com/) 或者超级强大的 [d3.js](https://d3js.org/)
|
||||||
89
docs/zh/components/container.md
Normal file
89
docs/zh/components/container.md
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
# 页面容器
|
||||||
|
|
||||||
|
页面容器组件是每个页面的基础，为了在整个项目中统一效果，它应该是 `<template>` 组件的直接子组件
|
||||||
|
|
||||||
|
## 参数
|
||||||
|
|
||||||
|
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||||
|
| --- | --- | --- | --- | --- | --- |
|
||||||
|
| type | 容器类型 | 非 | String | card ghost card-full | card |
|
||||||
|
| responsive | 响应式宽度 | 非 | Boolean | | false |
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
`responsive` 参数设置只在 `type` 等于 `card` 或 `ghost` 时生效
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 使用方法
|
||||||
|
|
||||||
|
一个基础单文件页面组件的示例
|
||||||
|
|
||||||
|
``` vue
|
||||||
|
<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>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 基础页面容器
|
||||||
|
|
||||||
|
高度根据内容适应
|
||||||
|
|
||||||
|
``` vue
|
||||||
|
<Container>
|
||||||
|
主体内容
|
||||||
|
</Container>
|
||||||
|
```
|
||||||
|
|
||||||
|
使用 `slot`
|
||||||
|
|
||||||
|
``` vue
|
||||||
|
<Container>
|
||||||
|
<template slot="header">我是插入到 header 中的内容</template>
|
||||||
|
主体内容
|
||||||
|
</Container>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 自适应填充页面容器
|
||||||
|
|
||||||
|
无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽
|
||||||
|
|
||||||
|
示例：
|
||||||
|
|
||||||
|
``` vue
|
||||||
|
<template>
|
||||||
|
<Container type="card-full">
|
||||||
|
<template slot="header">
|
||||||
|
可选的 header 内容 ...
|
||||||
|
</template>
|
||||||
|
主体内容 ...
|
||||||
|
<template slot="footer">
|
||||||
|
可选的 footer 内容 ...
|
||||||
|
</template>
|
||||||
|
</Container>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 隐形页面容器
|
||||||
|
|
||||||
|
不显示任何背景色和边框
|
||||||
|
|
||||||
|
``` vue
|
||||||
|
<Container type="ghost">
|
||||||
|
主体内容
|
||||||
|
</Container>
|
||||||
|
```
|
||||||
29
docs/zh/components/count-up.md
Normal file
29
docs/zh/components/count-up.md
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
# 数字动画
|
||||||
|
|
||||||
|
## 参数
|
||||||
|
|
||||||
|
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||||
|
| --- | --- | --- | --- | --- | --- |
|
||||||
|
| start | 起始值 | 非 | Number | | 0 |
|
||||||
|
| end | 结束值 | 是 | Number | | 0 |
|
||||||
|
| decimals | 小数位数 | 非 | Number | | 0 |
|
||||||
|
| duration | 持续时间 | 非 | Number | | 2 |
|
||||||
|
| options | 设置项 | 非 | Object | | 空对象 |
|
||||||
|
| callback | 回调函数 | 非 | Function | | 空函数 |
|
||||||
|
|
||||||
|
## 示例
|
||||||
|
|
||||||
|
``` vue
|
||||||
|
// 基本使用方法
|
||||||
|
<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` 参数详见原始插件文档
|
||||||
17
docs/zh/components/highlight.md
Normal file
17
docs/zh/components/highlight.md
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
# 代码高亮
|
||||||
|
|
||||||
|
## 参数
|
||||||
|
|
||||||
|
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||||
|
| --- | --- | --- | --- | --- | --- |
|
||||||
|
| code | 代码字符串 | 非 | String | | console.log('you lost code prop') |
|
||||||
|
|
||||||
|
## 示例
|
||||||
|
|
||||||
|
``` vue
|
||||||
|
<Highlight code="alert('Hello')"></Highlight>
|
||||||
|
```
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
本框架只是提供代码高亮的简单实现，如需实现更高级的设置请修改组件代码
|
||||||
|
:::
|
||||||
12
docs/zh/components/icon-select.md
Normal file
12
docs/zh/components/icon-select.md
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
# 图标 - 选择器
|
||||||
|
|
||||||
|
## 参数
|
||||||
|
|
||||||
|
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||||
|
| --- | --- | --- | --- | --- | --- |
|
||||||
|
| value | 绑定的值，可以使用 v-model | 非 | String | | |
|
||||||
|
| placeholder | 占位符，显示在未选择之前的按钮和输入框中 | 非 | String | | 请选择 |
|
||||||
|
| placement | 界面探出方向 | 非 | String | 同 Popover 组件 placement 参数 | right |
|
||||||
|
| clearable | 是否允许清空 | 非 | Boolean | | true |
|
||||||
|
| userInput | 是否允许用户自由输入 | 非 | Boolean | | false |
|
||||||
|
| autoClose | 是否在选择后自动关闭 | 非 | Boolean | | true |
|
||||||
34
docs/zh/components/icon-svg.md
Normal file
34
docs/zh/components/icon-svg.md
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
# 图标 - SVG
|
||||||
|
|
||||||
|
## 参数
|
||||||
|
|
||||||
|
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||||
|
| --- | --- | --- | --- | --- | --- |
|
||||||
|
| name | 图标名称 | 非 | String | 放在 src/assets/icons/svg 中的 .svg 文件名 | 空 |
|
||||||
|
|
||||||
|
## 使用方法
|
||||||
|
|
||||||
|
首先将下载的 .svg 图标放入 `src/assets/icons/svg` 文件夹下
|
||||||
|
|
||||||
|
然后使用组件
|
||||||
|
|
||||||
|
``` vue
|
||||||
|
<IconSvg name="刚才的svg文件名"></IconSvg>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 获取已经注册的所有图标
|
||||||
|
|
||||||
|
你已经发现了，只需要将图标文件放入项目中就会自动注册
|
||||||
|
|
||||||
|
这是因为已经对 `webpack` 和 `svg-sprite-loader` 进行了相关设置，`src/assets/icons/svg` 文件夹中的图标会自动注册到项目中，文件全部打包成 svg-sprite，名称注册到 `Vue.$IconSvg` 属性中
|
||||||
|
|
||||||
|
所以如果你需要检查项目中已经注册的所有图标，可以通过如下方式
|
||||||
|
|
||||||
|
``` vue
|
||||||
|
// 在 vue 单文件组件中
|
||||||
|
console.log(this.$IconSvg)
|
||||||
|
```
|
||||||
|
|
||||||
|
## 参考
|
||||||
|
|
||||||
|
演示图标来源 [iconfont.cn @龙正昆《常用的50个4px双色图标库》](http://iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=4878)
|
||||||
41
docs/zh/components/icon.md
Normal file
41
docs/zh/components/icon.md
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
# 图标
|
||||||
|
|
||||||
|
## 参数
|
||||||
|
|
||||||
|
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||||
|
| --- | --- | --- | --- | --- | --- |
|
||||||
|
| name | 图标名称 | 非 | String | font-awesome 所有图标名 | font-awesome |
|
||||||
|
|
||||||
|
## 使用方法
|
||||||
|
|
||||||
|
基本
|
||||||
|
|
||||||
|
``` vue
|
||||||
|
// 这样用没有毛病 但是也没什么用
|
||||||
|
<Icon></Icon>
|
||||||
|
|
||||||
|
// 指定图标名称
|
||||||
|
<Icon name="github"></Icon>
|
||||||
|
|
||||||
|
// 设置行内样式
|
||||||
|
<Icon name="github" style="font-size: 100px;"></Icon>
|
||||||
|
|
||||||
|
// 设置 class
|
||||||
|
<Icon name="github" class="icon-class-demo"></Icon>
|
||||||
|
```
|
||||||
|
|
||||||
|
这个组件只是简化了写法而已
|
||||||
|
|
||||||
|
``` vue
|
||||||
|
<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)
|
||||||
60
docs/zh/components/markdown.md
Normal file
60
docs/zh/components/markdown.md
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
# markdown 渲染器
|
||||||
|
|
||||||
|
## 参数
|
||||||
|
|
||||||
|
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||||
|
| --- | --- | --- | --- | --- | --- |
|
||||||
|
| url | markdown文件地址 | 非 | String | | 无 |
|
||||||
|
| md | markdown内容 | 非 | String | | 无 |
|
||||||
|
| highlight | 代码高亮 | 非 | Boolean | | false |
|
||||||
|
| baidupan | 百度网盘分享链接显示优化 | 非 | Boolean | | true |
|
||||||
|
|
||||||
|
## 使用方法
|
||||||
|
|
||||||
|
加载一个.md文件
|
||||||
|
|
||||||
|
``` vue
|
||||||
|
<markdown url="/static/md/xxxx.md"></markdown>
|
||||||
|
```
|
||||||
|
|
||||||
|
加载资源
|
||||||
|
|
||||||
|
``` vue
|
||||||
|
const md = `# Header
|
||||||
|
|
||||||
|
## title
|
||||||
|
|
||||||
|
text`
|
||||||
|
|
||||||
|
<markdown :md="md"></markdown>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 百度网盘分享链接优化
|
||||||
|
|
||||||
|
当书写类似下面的分享链接时
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
需要 `baidupan = true`
|
||||||
|
:::
|
||||||
|
|
||||||
|
```
|
||||||
|
普通分享链接
|
||||||
|
|
||||||
|
> https://pan.baidu.com/s/1kW6uUwB
|
||||||
|
|
||||||
|
私密分享链接
|
||||||
|
|
||||||
|
> 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y
|
||||||
|
```
|
||||||
|
|
||||||
|
markdown 中引用部分的文本由于被识别为百度云的分享链接，所以不会被当做 `blockquote` 渲染（非百度云链接的引用行不会改变），会以一种特别的块来显示
|
||||||
|
|
||||||
|
就像这样
|
||||||
|
|
||||||
|
> https://pan.baidu.com/s/1kW6uUwB
|
||||||
|
|
||||||
|
上面的块会嵌套在你的 markdown 渲染结果中
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
了解 D2Admin 是如何在 markdown 中匹配百度云链接的？ [查看源码](https://github.com/FairyEver/d2admin-vue-element/blob/master/src/components/core/Markdown/plugin/baidupan.js)
|
||||||
|
:::
|
||||||
151
docs/zh/guide/README.md
Normal file
151
docs/zh/guide/README.md
Normal file
@@ -0,0 +1,151 @@
|
|||||||
|
# 介绍
|
||||||
|
|
||||||
|
d2admin-vue-element（以下简称 d2admin）是一个管理系统前端模板
|
||||||
|
|
||||||
|
[Github仓库](https://github.com/FairyEver/d2admin-vue-element) - [预览地址](http://d2admin.fairyever.com/)
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
因为现在集成了很多的插件和组件，首次加载会占用较多的时间，虽然已经做了首屏加载动画，还是建议您在发布的时候一定要删除没有用到的代码。比如项目没有用到图表，最好将集成的图表库以及封装的图表组件删除。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 功能
|
||||||
|
|
||||||
|
* 首屏加载等待动画 避免首次加载白屏尴尬
|
||||||
|
* 简约主题
|
||||||
|
* 每个插件和组件都配有介绍文档
|
||||||
|
* 图片资源 sketch 源文件（ 可以在这个文件内重新生成所有图片资源 ）
|
||||||
|
* 登陆和注销
|
||||||
|
* 根据路由自动生成菜单
|
||||||
|
* 可折叠侧边栏
|
||||||
|
* 多国语言支持
|
||||||
|
* 富文本编辑器
|
||||||
|
* Markdown 编辑器
|
||||||
|
* 全屏功能
|
||||||
|
* [Fontawesome](https://fontawesome.com/) 图标库
|
||||||
|
* [Fontawesome](https://fontawesome.com/) 图标选择器（组件）
|
||||||
|
* 自动引入下载的 SVG 图标
|
||||||
|
* 前端假数据支持（ mock ）
|
||||||
|
* 集成 [G2](http://g2.alipay.com/) 图表
|
||||||
|
* 图表自适应可拖拽大小的卡片容器（示例）
|
||||||
|
* 简化剪贴板操作
|
||||||
|
* 简化Cookie操作
|
||||||
|
* 时间计算工具
|
||||||
|
* 导入 Excel （ xlsx 格式 + CSV 格式 ）
|
||||||
|
* 数据导出 Excel （ xlsx 格式 + CSV 格式 ）
|
||||||
|
* 数据导出文本
|
||||||
|
* 数字动画
|
||||||
|
* 可拖拽调整大小的切分布局
|
||||||
|
* 可拖拽调整大小和位置的网格布局
|
||||||
|
* 提供三种页面容器组件（正常卡片，隐形容器，填满页面）
|
||||||
|
* 代码高亮显示
|
||||||
|
* 加载并解析 markdown 文件
|
||||||
|
* GitHub 样式的 markdown 显示组件
|
||||||
|
* markdown 内代码高亮
|
||||||
|
* 为 markdown 扩展了百度云链接解析和优化显示
|
||||||
|
|
||||||
|
## TODO
|
||||||
|
|
||||||
|
d2admin 仍然处于开发中，这里有一些计划：
|
||||||
|
|
||||||
|
* 抽离项目里的文档，集中存放在文档站点
|
||||||
|
* 对主界面进行一次完善，调整整体布局和颜色
|
||||||
|
* 切换主题功能
|
||||||
|
* 使用自定义滚动条
|
||||||
|
* 分离出简化版本
|
||||||
|
* 推出基于 [ice](https://alibaba.github.io/ice) 平台的版本
|
||||||
|
* 增加右上角通知中心
|
||||||
|
* 增加一些实例页面以提供业务页面布局建议
|
||||||
|
* 更换图表库
|
||||||
|
|
||||||
|
欢迎你为 d2admin 的开发作出贡献。
|
||||||
|
|
||||||
|
## 目录结构
|
||||||
|
|
||||||
|
```
|
||||||
|
├─ build // 打包设置
|
||||||
|
├─ config // 发布设置
|
||||||
|
├─ preview-image // github 介绍页面使用的插图 以后可能去掉
|
||||||
|
├─ src
|
||||||
|
│ ├─ assets
|
||||||
|
│ │ ├─ icons // 存放 svg 图标
|
||||||
|
│ │ ├─ image // 图片
|
||||||
|
│ │ ├─ library // 库
|
||||||
|
│ │ └─ style // 公用样式
|
||||||
|
│ ├─ components
|
||||||
|
│ │ ├─ charts // 封装图表组件
|
||||||
|
│ │ ├─ core // 核心组件
|
||||||
|
│ │ ├─ demo // 只会在示例页面中使用的组件
|
||||||
|
│ ├─ i18n // 多国语言配置
|
||||||
|
│ ├─ mock // mock 数据设置
|
||||||
|
│ ├─ pages
|
||||||
|
│ │ ├─ core // 系统页面
|
||||||
|
│ │ └─ demo // 演示页面
|
||||||
|
│ │ ├─ business // 业务页面示例
|
||||||
|
│ │ ├─ chart // 图表
|
||||||
|
│ │ ├─ components // 组件
|
||||||
|
│ │ └─ plugins // 插件
|
||||||
|
│ ├─ plugin // 插件
|
||||||
|
│ ├─ router // 路由
|
||||||
|
│ │ ├─ invisible
|
||||||
|
│ │ └─ menu
|
||||||
|
│ ├─ store // 全局状态
|
||||||
|
│ ├─ utils // 通用工具
|
||||||
|
│ ├─ App.vue
|
||||||
|
│ └─ main.js // 入口文件
|
||||||
|
├─ static
|
||||||
|
├─ .babelrc
|
||||||
|
├─ .editorconfig
|
||||||
|
├─ .eslintignore
|
||||||
|
├─ .eslintrc.js
|
||||||
|
├─ .gitignore
|
||||||
|
├─ .postcssrc.js
|
||||||
|
├─ LICENSE
|
||||||
|
├─ README.md
|
||||||
|
├─ design.sketch
|
||||||
|
├─ index.html
|
||||||
|
├─ package-lock.json
|
||||||
|
└─ package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
首先下载模板 [d2admin-vue-element/releases](https://github.com/FairyEver/d2admin-vue-element/releases)
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
不要直接克隆本项目，请选择已经发行的版本，尤其不要使用 dev 分支
|
||||||
|
:::
|
||||||
|
|
||||||
|
安装依赖
|
||||||
|
|
||||||
|
```
|
||||||
|
npm i
|
||||||
|
```
|
||||||
|
|
||||||
|
运行
|
||||||
|
|
||||||
|
```
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
在以下环境测试可用
|
||||||
|
|
||||||
|
```
|
||||||
|
➜ ~ npm -v
|
||||||
|
5.6.0
|
||||||
|
➜ ~ node -v
|
||||||
|
v8.11.1
|
||||||
|
➜ ~ nrm -V
|
||||||
|
1.0.2
|
||||||
|
➜ ~ nrm ls
|
||||||
|
npm ---- https://registry.npmjs.org/
|
||||||
|
cnpm --- http://r.cnpmjs.org/
|
||||||
|
* taobao - https://registry.npm.taobao.org/
|
||||||
|
nj ----- https://registry.nodejitsu.com/
|
||||||
|
rednpm - http://registry.mirror.cqupt.edu.cn/
|
||||||
|
npmMirror https://skimdb.npmjs.com/registry/
|
||||||
|
edunpm - http://registry.enpmjs.org/
|
||||||
|
```
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
推荐使用 [nrm](https://github.com/Pana/nrm) 管理 npm 源，不建议使用 cnpm
|
||||||
|
:::
|
||||||
13
docs/zh/guide/change-log.md
Normal file
13
docs/zh/guide/change-log.md
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
# 更新日志
|
||||||
|
|
||||||
|
## dev
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
这是正在开发的版本，还没有正式发布
|
||||||
|
:::
|
||||||
|
|
||||||
|
## v1.0.0
|
||||||
|
|
||||||
|
[https://github.com/FairyEver/d2admin-vue-element/releases/tag/v1.0.0](https://github.com/FairyEver/d2admin-vue-element/releases/tag/v1.0.0)
|
||||||
|
|
||||||
|
这是第一个版本，还有一点小问题，但是已经可用
|
||||||
21
docs/zh/guide/q-a.md
Normal file
21
docs/zh/guide/q-a.md
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
# 常见问题
|
||||||
|
|
||||||
|
## 如何启动文档的开发环境
|
||||||
|
|
||||||
|
这里目前还有一个小遗憾，d2admin 使用的 webpack 版本不能符合 vuepress 的要求，所以如果你想在本地启动文档站点的服务，需要按下述步骤
|
||||||
|
|
||||||
|
首先将 vuepress 安装到全局
|
||||||
|
|
||||||
|
```
|
||||||
|
npm i -g vuepress
|
||||||
|
```
|
||||||
|
|
||||||
|
启动服务
|
||||||
|
|
||||||
|
```
|
||||||
|
npm run doc:dev
|
||||||
|
```
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
你可能会发现项目目录中有一个 deploy.sh 文件，这个文件是为了方便发布文档用的，你并不需要使用它
|
||||||
|
:::
|
||||||
3
docs/zh/plugins/README.md
Normal file
3
docs/zh/plugins/README.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# 插件概述
|
||||||
|
|
||||||
|
d2admin-vue-element（以下简称 d2admin）封装（或者集成第三方）了一些插件，方便开发者进行开发，具体组件文档请从左侧列表进入
|
||||||
148
docs/zh/plugins/data-export.md
Normal file
148
docs/zh/plugins/data-export.md
Normal file
@@ -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 | | 空数组 |
|
||||||
|
| table | 文件名 | 非 | 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 | | 空数组 |
|
||||||
|
| table | 文件名 | 非 | 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 | | 文本 |
|
||||||
64
docs/zh/plugins/data-import.md
Normal file
64
docs/zh/plugins/data-import.md
Normal file
@@ -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
|
||||||
|
}
|
||||||
|
```
|
||||||
124
docs/zh/plugins/i18n.md
Normal file
124
docs/zh/plugins/i18n.md
Normal file
@@ -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>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 局部配置
|
||||||
|
|
||||||
|
有时候我们只希望在某个文件中配置这个组件的多国语言，如果所有的语言设置都放在 `d2admin-vue-element/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": "ニューヨーク"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
详细教程请查看官方文档，见此页右上角的链接
|
||||||
221
docs/zh/plugins/mock.md
Normal file
221
docs/zh/plugins/mock.md
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
49
docs/zh/plugins/timeago.md
Normal file
49
docs/zh/plugins/timeago.md
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
# 时间差计算
|
||||||
|
|
||||||
|
``` js
|
||||||
|
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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
@@ -8,7 +8,9 @@
|
|||||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||||
"start": "npm run dev",
|
"start": "npm run dev",
|
||||||
"lint": "eslint --ext .js,.vue src",
|
"lint": "eslint --ext .js,.vue src",
|
||||||
"build": "node build/build.js"
|
"build": "node build/build.js",
|
||||||
|
"doc:dev": "vuepress dev docs",
|
||||||
|
"doc:build": "vuepress build docs"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/data-set": "^0.8.5",
|
"@antv/data-set": "^0.8.5",
|
||||||
|
|||||||
Reference in New Issue
Block a user