clear
Former-commit-id: e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly 5793d72d458b7eeaf28a097d026168cebc9fc256 [formerly 9c8de3644bd40a55711e618742e29cce390e4c5f]]]]] Former-commit-id: 05ca3c8da65f8583c142720628aa6ea71d2dbf45 Former-commit-id: 7a4d2fba696e901db86071ea2810e9c932c976ad Former-commit-id: c18d3689200ca0e528fbf9bf171f6e1b50131bc3 [formerly 455e9952ca890cd8ad882250cfb9eabd944d44ee] Former-commit-id: 021fa8191681fe4f22e9a9f40389831a847e9066 Former-commit-id: 1022b7792417ce366901b9d5284762a015dd6d26 Former-commit-id: bed799410be508713cac76b7c8cf02d4457fe996 Former-commit-id: f6787cfaac3404132ad1011e2707e08484708ca9 Former-commit-id: 7a8a3baca9ef30393744fd56def6d608b51dcddd
This commit is contained in:
liyang
@@ -1,3 +0,0 @@
|
||||
# 组件概述
|
||||
|
||||
d2-admin（以下简称 d2admin）封装（或者集成第三方）了一些组件，方便开发者进行开发，具体组件文档请从左侧列表进入
|
||||
@@ -1,13 +0,0 @@
|
||||
# 图表 [ v-charts ]
|
||||
|
||||
::: 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，你可以直接使用
|
||||
@@ -1,76 +0,0 @@
|
||||
# 图表 [ G2 ]
|
||||
|
||||
::: tip
|
||||
此文档仅对 `1.1.0` 及其以下版本有效，`1.1.1` 开始变更了图表库
|
||||
:::
|
||||
|
||||
## 介绍
|
||||
|
||||
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/)
|
||||
@@ -1,114 +0,0 @@
|
||||
# 页面容器
|
||||
|
||||
页面容器组件是每个页面的基础，为了在整个项目中统一效果，它应该是 `<template>` 组件的直接子组件
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| type | 容器类型 | 非 | String | card ghost full | card |
|
||||
| scroll | 滚动优化 | 非 | Boolean | | false |
|
||||
| responsive | 响应式宽度 | 非 | Boolean | | false |
|
||||
|
||||
::: tip
|
||||
`responsive` 参数设置只在 `type` 等于 `card` 或 `ghost` 时生效
|
||||
:::
|
||||
|
||||
## 使用方法
|
||||
|
||||
一个基础单文件页面组件的示例
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">
|
||||
可选的 header 内容 ...
|
||||
</template>
|
||||
主体内容 ...
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'your-component-name'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 需要的话引入
|
||||
@import '~@/assets/style/public.scss';
|
||||
</style>
|
||||
```
|
||||
|
||||
### 基础页面容器
|
||||
|
||||
高度根据内容适应
|
||||
|
||||
``` vue
|
||||
<d2-container>
|
||||
主体内容
|
||||
</d2-container>
|
||||
```
|
||||
|
||||
使用 `slot`
|
||||
|
||||
``` vue
|
||||
<d2-container>
|
||||
<template slot="header">我是插入到 header 中的内容</template>
|
||||
主体内容
|
||||
</d2-container>
|
||||
```
|
||||
|
||||
### 自适应填充页面容器
|
||||
|
||||
无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽
|
||||
|
||||
示例：
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">
|
||||
可选的 header 内容 ...
|
||||
</template>
|
||||
主体内容 ...
|
||||
<template slot="footer">
|
||||
可选的 footer 内容 ...
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
```
|
||||
|
||||
`v1.1.4` 新增
|
||||
|
||||
你可以通过设置 `scroll` 来启用自定义滚动条，看起来更美观一些
|
||||
|
||||
> 有些情况下使用滚动优化模式会有意外影响，例如页面内含有可拖拽的元素，这时候最好不要使用此模式
|
||||
|
||||
示例：
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<d2-container type="full" scroll>
|
||||
<template slot="header">
|
||||
可选的 header 内容 ...
|
||||
</template>
|
||||
主体内容 ...
|
||||
<template slot="footer">
|
||||
可选的 footer 内容 ...
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 隐形页面容器
|
||||
|
||||
不显示任何背景色和边框，通常这个模式只有在极少情况下会使用
|
||||
|
||||
``` vue
|
||||
<d2-container type="ghost">
|
||||
主体内容
|
||||
</d2-container>
|
||||
```
|
||||
|
||||
如果你不希望内容紧贴上边，可以在内容外层容器设置 `class="d2-mt"`
|
||||
@@ -1,29 +0,0 @@
|
||||
# 数字动画
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| 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` 参数详见原始插件文档
|
||||
@@ -1,17 +0,0 @@
|
||||
# 代码高亮
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| code | 代码字符串 | 非 | String | | console.log('you lost code prop') |
|
||||
|
||||
## 示例
|
||||
|
||||
``` vue
|
||||
<d2-highlight code="alert('Hello')"/>
|
||||
```
|
||||
|
||||
::: tip
|
||||
本框架只是提供代码高亮的简单实现，如需实现更高级的设置请修改组件代码
|
||||
:::
|
||||
@@ -1,12 +0,0 @@
|
||||
# 图标 - 选择器
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| value | 绑定的值，可以使用 v-model | 非 | String | | |
|
||||
| placeholder | 占位符，显示在未选择之前的按钮和输入框中 | 非 | String | | 请选择 |
|
||||
| placement | 界面探出方向 | 非 | String | 同 Popover 组件 placement 参数 | right |
|
||||
| clearable | 是否允许清空 | 非 | Boolean | | true |
|
||||
| userInput | 是否允许用户自由输入 | 非 | Boolean | | false |
|
||||
| autoClose | 是否在选择后自动关闭 | 非 | Boolean | | true |
|
||||
@@ -1,34 +0,0 @@
|
||||
# 图标 - 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` 属性中
|
||||
|
||||
所以如果你需要检查项目中已经注册的所有图标，可以通过如下方式
|
||||
|
||||
``` vue
|
||||
// 在 vue 单文件组件中
|
||||
console.log(this.$IconSvg)
|
||||
```
|
||||
|
||||
## 参考
|
||||
|
||||
演示图标来源 [iconfont.cn @龙正昆《常用的50个4px双色图标库》](http://iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=4878)
|
||||
@@ -1,41 +0,0 @@
|
||||
# 图标
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| 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)
|
||||
@@ -1 +0,0 @@
|
||||
3a5bb0f2628d9251bbe7474c0535258784cf770b
|
||||
@@ -1,88 +0,0 @@
|
||||
# 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)
|
||||
:::
|
||||
Reference in New Issue
Block a user