sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

完善

Browse Source 
Former-commit-id: 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 8c4098bcffd50089b041edcf9d539c64c3c92b16 [formerly 1bf5ee08c5424c0a4cedac421d52cf8c8393ae7f]]]]]
Former-commit-id: 3aa6fad9f9c31f62376dfb27f62fa937d0735e55
Former-commit-id: d293c0b275dc8c4d439fa04a45d9d4efa1dd8f4c
Former-commit-id: a737d8ff3f0c9d829e66a1cd305257961c551eda [formerly 4d2360f8b865bfab066291680106dc95df97ce2a]
Former-commit-id: b64f59d9203d16e71bcd21065aba7ead88566938
Former-commit-id: 4350c691cdff708266be623edf8f1b9d61faeb02
Former-commit-id: 1dba1637790b1f2c87733adfdfcc8491a97bfd1d
Former-commit-id: e17d989004ecb5fb7ce620103b997998da42b8d9
Former-commit-id: 3b781b9b28f6ed584b9c6dbfa5fafe3f8c1475b5
This commit is contained in:
liyang
2018-07-17 21:54:38 +08:00
parent db62c21964
commit 14c921e6b1
214 changed files with 157 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/demo/components/container/card.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<d2-container>
<template slot="header">我是插入到 header 中的内容</template>
<d2-markdown :source="doc"/>
</d2-container>
</template>
<script>
import doc from './md/doc-card.md'
export default {
data () {
return {
doc
}
}
}
</script>

22
src/pages/demo/components/container/full-bs.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<d2-container type="full" scroll>
<template slot="header">
我是插入到 header 中的内容
</template>
<d2-markdown :source="doc"/>
<template slot="footer">
<d2-demo-link-btn title="D2Admin" link="https://github.com/d2-projects/d2-admin"/>
</template>
</d2-container>
</template>
<script>
import doc from './md/doc-full-bs.md'
export default {
data () {
return {
doc
}
}
}
</script>

22
src/pages/demo/components/container/full.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<d2-container type="full">
<template slot="header">
我是插入到 header 中的内容
</template>
<d2-markdown :source="doc"/>
<template slot="footer">
<d2-demo-link-btn title="D2Admin" link="https://github.com/d2-projects/d2-admin"/>
</template>
</d2-container>
</template>
<script>
import doc from './md/doc-full.md'
export default {
data () {
return {
doc
}
}
}
</script>

19
src/pages/demo/components/container/ghost-header.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<d2-container type="ghost">
<template slot="header">隐形页面容器头部</template>
<el-card shadow="never" style="width: 50%;">
<d2-markdown :source="doc"/>
</el-card>
</d2-container>
</template>
<script>
import doc from './md/doc-ghost-header.md'
export default {
data () {
return {
doc
}
}
}
</script>

18
src/pages/demo/components/container/ghost.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<d2-container type="ghost">
<el-card shadow="never" class="d2-mt" style="width: 50%;">
<d2-markdown :source="doc"/>
</el-card>
</d2-container>
</template>
<script>
import doc from './md/doc-ghost.md'
export default {
data () {
return {
doc
}
}
}
</script>

18
src/pages/demo/components/container/md/doc-card.md Normal file
View File

@@ -0,0 +1,18 @@
## 基础页面容器
高度根据内容适应
```
<d2-container>
主体内容
</d2-container>
```
使用 `slot`
```
<d2-container>
<template slot="header">我是插入到 header 中的内容</template>
主体内容
</d2-container>
```

77
src/pages/demo/components/container/md/doc-full-bs.md Normal file
View File

@@ -0,0 +1,77 @@
## 自适应填充页面容器 + 滚动优化
无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽，**并且使用自定义滚动条代替原生滚动条**，是否启用此功能请自行取舍
> 有些情况下使用滚动优化模式会有意外影响，例如页面内含有可拖拽的元素，这时候最好不要使用此模式
示例：
```
<template>
<d2-container type="full" scroll>
<template slot="header">
可选的 header 内容 ...
</template>
主体内容 ...
<template slot="footer">
可选的 footer 内容 ...
</template>
</d2-container>
</template>
```
下面是一个较长的演示文章，仅仅是为了演示一些文字的显示效果
## 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
- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

75
src/pages/demo/components/container/md/doc-full.md Normal file
View File

@@ -0,0 +1,75 @@
## 自适应填充页面容器
无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽
示例：
```
<template>
<d2-container type="full">
<template slot="header">
可选的 header 内容 ...
</template>
主体内容 ...
<template slot="footer">
可选的 footer 内容 ...
</template>
</d2-container>
</template>
```
下面是一个较长的演示文章，仅仅是为了演示一些文字的显示效果
## 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
- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

12
src/pages/demo/components/container/md/doc-ghost-header.md Normal file
View File

@@ -0,0 +1,12 @@
## 隐形页面容器 带有头部
不显示任何背景色和边框，但是有一个和分页组件效果融合的头部，看起来更舒服一点
```
<d2-container type="ghost">
<template slot="header">隐形页面容器头部</template>
主体内容
</d2-container>
```
> 注意 如果设置了 header 插槽的内容，header 部分会自动具有 20px 的下外边距

11
src/pages/demo/components/container/md/doc-ghost.md Normal file
View File

@@ -0,0 +1,11 @@
## 隐形页面容器
不显示任何背景色和边框
```
<d2-container type="ghost">
主体内容
</d2-container>
```
如果你不希望内容紧贴上边，可以在内容外层容器设置 `class="d2-mt"`

46
src/pages/demo/components/contextmenu/custom-trigger.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<d2-container>
<template slot="header">自定义事件</template>
<v-contextmenu ref="contextmenu">
<v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
<v-contextmenu-item divider></v-contextmenu-item>
<v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
<v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
</v-contextmenu>
<v-contextmenu ref="dbContextmenu" event-type="dblclick">
<v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
<v-contextmenu-item divider></v-contextmenu-item>
<v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
<v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
</v-contextmenu>
<el-row :gutter="20">
<el-col :span="12">
<div class="contextmenu-pad" v-contextmenu:contextmenu>
右键点击此区域
</div>
</el-col>
<el-col :span="12">
<div class="contextmenu-pad" v-contextmenu:dbContextmenu>
左键双击此区域
</div>
</el-col>
</el-row>
</d2-container>
</template>
<script>
export default {
methods: {
handleClick (vm, event) {
this.$message({
message: `你点击了${vm.$slots.default[0].text}`,
type: 'info'
})
}
}
}
</script>
<style lang="scss" scoped>
@import './style/pub.scss';
</style>

38
src/pages/demo/components/contextmenu/disabled.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<d2-container>
<template slot="header">禁用</template>
<v-contextmenu ref="contextmenu">
<v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
<v-contextmenu-item disabled @click="handleClick">菜单2</v-contextmenu-item>
<v-contextmenu-item divider></v-contextmenu-item>
<v-contextmenu-submenu title="子菜单">
<v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
<v-contextmenu-item divider></v-contextmenu-item>
<v-contextmenu-submenu disabled title="子菜单">
<v-contextmenu-item @click="handleClick">菜单5</v-contextmenu-item>
</v-contextmenu-submenu>
<v-contextmenu-item @click="handleClick">菜单4</v-contextmenu-item>
</v-contextmenu-submenu>
</v-contextmenu>
<div class="contextmenu-pad" v-contextmenu:contextmenu>
右键点击此区域
</div>
</d2-container>
</template>
<script>
export default {
methods: {
handleClick (vm, event) {
this.$message({
message: `你点击了${vm.$slots.default[0].text}`,
type: 'info'
})
}
}
}
</script>
<style lang="scss" scoped>
@import './style/pub.scss';
</style>

31
src/pages/demo/components/contextmenu/divier.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<d2-container>
<template slot="header">分割线</template>
<v-contextmenu ref="contextmenu">
<v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
<v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
<v-contextmenu-item divider></v-contextmenu-item>
<v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
</v-contextmenu>
<div class="contextmenu-pad" v-contextmenu:contextmenu>
右键点击此区域
</div>
</d2-container>
</template>
<script>
export default {
methods: {
handleClick (vm, event) {
this.$message({
message: `你点击了${vm.$slots.default[0].text}`,
type: 'info'
})
}
}
}
</script>
<style lang="scss" scoped>
@import './style/pub.scss';
</style>

29
src/pages/demo/components/contextmenu/group.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<d2-container>
<template slot="header">按钮组</template>
<v-contextmenu ref="contextmenu">
<v-contextmenu-group>
<v-contextmenu-item>菜单1</v-contextmenu-item>
<v-contextmenu-item>菜单2</v-contextmenu-item>
<v-contextmenu-item>菜单3</v-contextmenu-item>
</v-contextmenu-group>
<v-contextmenu-item divider></v-contextmenu-item>
<v-contextmenu-group>
<v-contextmenu-item><d2-icon class="contextmenu-icon" name="github"/></v-contextmenu-item>
<v-contextmenu-item><d2-icon class="contextmenu-icon" name="qq"/></v-contextmenu-item>
<v-contextmenu-item><d2-icon class="contextmenu-icon" name="weixin"/></v-contextmenu-item>
<v-contextmenu-item><d2-icon class="contextmenu-icon" name="google-plus"/></v-contextmenu-item>
</v-contextmenu-group>
<v-contextmenu-item divider></v-contextmenu-item>
<v-contextmenu-item>菜单4</v-contextmenu-item>
<v-contextmenu-item>菜单5</v-contextmenu-item>
</v-contextmenu>
<div class="contextmenu-pad" v-contextmenu:contextmenu>
右键点击此区域
</div>
</d2-container>
</template>
<style lang="scss" scoped>
@import './style/pub.scss';
</style>

30
src/pages/demo/components/contextmenu/simple.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<d2-container>
<template slot="header">基础</template>
<v-contextmenu ref="contextmenu">
<v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
<v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
<v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
</v-contextmenu>
<div class="contextmenu-pad" v-contextmenu:contextmenu>
右键点击此区域
</div>
</d2-container>
</template>
<script>
export default {
methods: {
handleClick (vm, event) {
this.$message({
message: `你点击了${vm.$slots.default[0].text}`,
type: 'info'
})
}
}
}
</script>
<style lang="scss" scoped>
@import './style/pub.scss';
</style>

15
src/pages/demo/components/contextmenu/style/pub.scss Normal file
View File

@@ -0,0 +1,15 @@
@import '~@/assets/style/public.scss';
.contextmenu-pad {
height: 300px;
background-color: $color-bg;
border: 1px solid $color-border-1;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
color: $color-info;
}
.contextmenu-icon {
font-size: 16px;
}

40
src/pages/demo/components/contextmenu/submenu.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<d2-container>
<template slot="header">子菜单</template>
<v-contextmenu ref="contextmenu">
<v-contextmenu-item @click="handleClick">菜单 1</v-contextmenu-item>
<v-contextmenu-item @click="handleClick">菜单 2</v-contextmenu-item>
<v-contextmenu-item divider></v-contextmenu-item>
<v-contextmenu-submenu title="菜单 3">
<v-contextmenu-item @click="handleClick">菜单 3-1</v-contextmenu-item>
<v-contextmenu-item divider></v-contextmenu-item>
<v-contextmenu-submenu title="菜单 3-2">
<v-contextmenu-item @click="handleClick">菜单 3-2-1</v-contextmenu-item>
</v-contextmenu-submenu>
<v-contextmenu-item @click="handleClick">菜单 3-3</v-contextmenu-item>
<v-contextmenu-item @click="handleClick">菜单 3-4</v-contextmenu-item>
<v-contextmenu-item @click="handleClick">菜单 3-5</v-contextmenu-item>
</v-contextmenu-submenu>
</v-contextmenu>
<div class="contextmenu-pad" v-contextmenu:contextmenu>
右键点击此区域
</div>
</d2-container>
</template>
<script>
export default {
methods: {
handleClick (vm, event) {
this.$message({
message: `你点击了${vm.$slots.default[0].text}`,
type: 'info'
})
}
}
}
</script>
<style lang="scss" scoped>
@import './style/pub.scss';
</style>

98
src/pages/demo/components/countup/index.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<d2-container class="page">
<template slot="header">数字动画组件</template>
<el-row :gutter="20">
<el-col :span="6">
<el-card shadow="never" class="d2-mb">
<p slot="title">只设置目标数字</p>
<div class="group">
<d2-count-up :end="100"/>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never" class="d2-mb">
<p slot="title">设置起止数值</p>
<div class="group">
<d2-count-up :start="14" :end="100"/>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never" class="d2-mb">
<p slot="title">小数位数</p>
<div class="group">
<d2-count-up :end="100" :decimals="2"/>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never" class="d2-mb">
<p slot="title">动画时长</p>
<div class="group">
<d2-count-up :end="100" :duration="6"/>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never">
<p slot="title">回调函数</p>
<div class="group">
<d2-count-up :end="100" :callback="() => {className = 'end'}" :class="className"/>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never" class="d2-mb-0">
<p slot="title">结束一秒后更新数值</p>
<div class="group">
<d2-count-up :end="end" :callback="update"/>
</div>
</el-card>
</el-col>
</el-row>
</d2-container>
</template>
<script>
export default {
data () {
return {
// 回调函数使用
className: '',
// 更新数值用
end: 50
}
},
methods: {
update () {
setTimeout(() => {
this.end = 100
}, 1000)
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.page {
.el-card {
@extend %unable-select;
.group {
display: flex;
justify-content: center;
align-items: center;
span {
font-size: 60px;
&.end {
padding: 0px 20px;
border-radius: 4px;
background-color: $color-success;
color: #FFF;
}
}
}
}
}
</style>

49
src/pages/demo/components/editor-quill/index.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<d2-container>
<template slot="header">基本示例</template>
<d2-quill
style="min-height: 200px;"
v-model="value"
@text-change="textChangeHandler"
@selection-change="selectionChangeHandler"
@editor-change="editorChangeHandler"/>
<el-card shadow="never" class="d2-mt">
<d2-highlight :code="formated"/>
</el-card>
</d2-container>
</template>
<script>
import htmlFormat from '@/libs/htmlFormat.js'
import value from './value'
export default {
data () {
return {
htmlFormat,
value
}
},
computed: {
formated () {
return htmlFormat(this.value)
}
},
methods: {
textChangeHandler (delta, oldDelta, source) {
// console.group('QuillEditor textChangeHandler')
// console.log(delta, oldDelta, source)
// console.groupEnd()
},
selectionChangeHandler (range, oldRange, source) {
// console.group('QuillEditor selectionChangeHandler')
// console.log(range, oldRange, source)
// console.groupEnd()
},
editorChangeHandler (eventName, ...args) {
// console.group('QuillEditor editorChangeHandler')
// console.log(eventName, args)
// console.groupEnd()
}
}
}
</script>

6
src/pages/demo/components/editor-quill/value.js Normal file
View File

@@ -0,0 +1,6 @@
export default `<p>
<a href="https://github.com/d2-projects/d2-admin" target="_blank" class="ql-size-large" style="color: rgb(65, 184, 131);"><strong>D2 Admin</strong></a>
<strong style="color: rgb(65, 184, 131);"></strong>
by
<a href="https://cn.vuejs.org/" target="_blank" class="ql-size-large" style="color: rgb(65, 184, 131);"><strong>vue.js</strong></a>
</p>`

28
src/pages/demo/components/editor-simpleMDE/index.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<d2-container>
<template slot="header">基本示例</template>
<d2-mde
v-model="text"
class="mde"/>
<el-card shadow="never">
<pre>{{text}}</pre>
</el-card>
</d2-container>
</template>
<script>
import text from './text'
export default {
data () {
return {
text
}
}
}
</script>
<style lang="scss" scoped>
.mde {
margin-bottom: -16px;
}
</style>

10
src/pages/demo/components/editor-simpleMDE/text.js Normal file
View File

@@ -0,0 +1,10 @@
export default `# 标题
- 列表
- 列表
\`\`\`
alert('Hello')
\`\`\`
[D2Admin in github](https://github.com/d2-projects/d2-admin)`

8
src/pages/demo/components/highlight/code/css.js Normal file
View File

@@ -0,0 +1,8 @@
export default `body {
background-color: aliceblue;
height: 100%;
}
.my-card {
height: 300px;
width: 300px;
}`

8
src/pages/demo/components/highlight/code/html.js Normal file
View File

@@ -0,0 +1,8 @@
export default `<ul>
<li class="li-1"><p>Hello</p></li>
<li>
<span style="color: red;">
Hello
</span>
</li>
</ul>`

3
src/pages/demo/components/highlight/code/javascript.js Normal file
View File

@@ -0,0 +1,3 @@
export default `[].forEach.call($$("*"), a => {
a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})`

8
src/pages/demo/components/highlight/code/scss.js Normal file
View File

@@ -0,0 +1,8 @@
export default `body {
background-color: aliceblue;
height: 100%;
.my-card {
height: 300px;
width: 300px;
}
}`

46
src/pages/demo/components/highlight/index.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<d2-container>
<template slot="header">代码高亮组件</template>
<el-card shadow="never" class="d2-mb">
<p slot="title">javascript</p>
<d2-highlight :code="codeJavascript"/>
</el-card>
<el-row :gutter="20">
<el-col :span="8">
<el-card shadow="never">
<p slot="title">css</p>
<d2-highlight :code="codeCSS"/>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="never">
<p slot="title">scss</p>
<d2-highlight :code="codeSCSS"/>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="never">
<p slot="title">html</p>
<d2-highlight :code="codeHTML"/>
</el-card>
</el-col>
</el-row>
</d2-container>
</template>
<script>
import codeJavascript from './code/javascript'
import codeCSS from './code/css'
import codeSCSS from './code/scss'
import codeHTML from './code/html'
export default {
data () {
return {
codeJavascript,
codeCSS,
codeSCSS,
codeHTML
}
}
}
</script>

77
src/pages/demo/components/icon/components/d2-icon-cell.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<div>
<el-popover
ref="pop"
placement="right"
:title="icon"
width="300"
trigger="click">
<div class="icon-group">
<i :class="'fa fa-' + icon"></i>
</div>
<el-row :gutter="10">
<el-col :span="8">
<el-tooltip effect="dark" :content="iconClass" placement="top">
<el-button @click="copy(iconClass)" style="width: 100%;">Class</el-button>
</el-tooltip>
</el-col>
<el-col :span="8">
<el-tooltip effect="dark" :content="iconHtml" placement="top">
<el-button @click="copy(iconHtml)" style="width: 100%;">HTML</el-button>
</el-tooltip>
</el-col>
<el-col :span="8">
<el-tooltip effect="dark" :content="iconComponent" placement="top">
<el-button @click="copy(iconComponent)" style="width: 100%;">组件</el-button>
</el-tooltip>
</el-col>
</el-row>
</el-popover>
<span v-popover:pop>
<el-tag type="info">
<i :class="'fa fa-' + icon"></i>
</el-tag>
<span style="font-size: 10px; margin-left: 5px;">{{icon}}</span>
</span>
</div>
</template>
<script>
import clipboard from 'clipboard-polyfill'
export default {
props: {
icon: {
type: String,
required: false,
default: ''
}
},
computed: {
iconClass () {
return `fa fa-${this.icon}`
},
iconHtml () {
return `<i class="fa fa-${this.icon}" aria-hidden="true"></i>`
},
iconComponent () {
return `<d2-icon name="${this.icon}"/>`
}
},
methods: {
copy (text) {
clipboard.writeText(text)
this.$message({
message: `${text} 复制到剪贴板`,
type: 'success'
})
}
}
}
</script>
<style lang="scss" scoped>
.icon-group {
text-align: center;
font-size: 200px;
}
</style>

1
src/pages/demo/components/icon/data/index.js.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
822e9d488a148a997d7098a0608f482ab9f9fb7a

23
src/pages/demo/components/icon/icon.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<d2-container>
<template slot="header">图标组件</template>
<d2-icon class="d2-mr-10"/>
<d2-icon name="github" class="d2-mr-10"/>
<d2-icon name="github" style="font-size: 100px;" class="d2-mr-10"/>
<d2-icon name="github" class="icon-demo"/>
</d2-container>
</template>
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.icon-demo {
transition: all .3s;
font-size: 100px;
color: #409EFF;
@extend %unable-select;
&:hover{
color: #F56C6C;
transform: scale(1.2) rotate(30deg);
}
}
</style>

46
src/pages/demo/components/icon/list.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<d2-container type="full" scroll>
<template slot="header">
<el-radio-group v-model="showIndex" size="mini">
<el-radio-button
v-for="(item, index) in radioOptions"
:key="index"
:label="item.value">
{{item.label}}
</el-radio-button>
</el-radio-group>
</template>
<el-row style="margin: -10px;">
<el-alert title="点击图标复制代码" type="info" class="d2-m-10" style="width: auto;"/>
<el-col v-for="(iconItem, iconIndex) in iconShow.icon" :key="iconIndex" :span="6" class="d2-p-10">
<d2-icon-cell :icon="iconItem"/>
</el-col>
</el-row>
</d2-container>
</template>
<script>
import icon from './data/index'
export default {
components: {
'd2-icon-cell': () => import('./components/d2-icon-cell')
},
data () {
return {
icon,
showIndex: 12
}
},
computed: {
iconShow () {
return this.icon[this.showIndex]
},
radioOptions () {
return this.icon.map((e, index) => ({
label: e.title,
value: index
}))
}
}
}
</script>

57
src/pages/demo/components/icon/select.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<d2-container>
<template slot="header">图标选择器</template>
<div class="title-group">
<p class="title">一般用法</p>
<p class="sub-title">
<template v-if="icon">
选择的图标 {{icon}}
<i :class="'fa fa-' + icon"></i>
</template>
<template v-else>未选择</template>
</p>
</div>
<d2-icon-select v-model="icon"/>
<div class="title-group">
<p class="title">用户可以输入</p>
<p class="sub-title">
<template v-if="icon2">
选择的图标 {{icon2}}
<i :class="'fa fa-' + icon2"></i>
</template>
<template v-else>未选择</template>
</p>
</div>
<d2-icon-select v-model="icon2" :user-input="true"/>
</d2-container>
</template>
<script>
export default {
data () {
return {
icon: '',
icon2: ''
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.title-group {
margin-top: 20px;
margin-bottom: 10px;
&:first-child {
margin-top: 0px;
}
.title {
margin: 0px;
}
.sub-title {
margin: 0px;
color: $color-text-sub;
font-size: 10px;
}
}
</style>

43
src/pages/demo/components/icon/svg.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<d2-container>
<template slot="header">SVG图标组件</template>
<el-row>
<el-col class="icon-card" :span="4" v-for="(icon, index) in $IconSvg" :key="index">
<d2-icon-svg class="icon" :name="icon"/>
<div class="icon-title">
<span>{{icon}}</span>
</div>
</el-col>
</el-row>
</d2-container>
</template>
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.icon-card {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 150px;
&:hover {
.icon {
transform: scale(1.1);
}
.icon-title {
color: $color-text-main;
}
}
}
.icon {
height: 80px;
width: 80px;
transition: all .3s;
cursor: pointer;
}
.icon-title {
font-size: 12px;
margin-top: 10px;
color: $color-text-normal;
}
</style>

1
src/pages/demo/components/index/image/icon.png.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
31ff16c63c96f981d32bd0f3a8771424ed7ffa84

9
src/pages/demo/components/index/index.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<d2-container type="full">
<d2-demo-page-cover
title="内置组件"
sub-title="D2Admin 为你提供了一些上手即用的组件">
<img src="./image/icon.png">
</d2-demo-page-cover>
</d2-container>
</template>

21
src/pages/demo/components/json-tree/index.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<d2-container class="page">
<tree-view :data="packJson" :options="options"></tree-view>
</d2-container>
</template>
<script>
import packJson from '../../../../../package.json'
export default {
data () {
return {
options: {
maxDepth: 10,
rootObjectKey: 'package.json',
modifiable: false
},
packJson
}
}
}
</script>

119
src/pages/demo/components/layout/grid.vue Normal file
View File

@@ -0,0 +1,119 @@
<template>
<d2-container type="full" class="page">
<d2-grid-layout
v-bind="layout"
@layout-updated="layoutUpdatedHandler">
<d2-grid-item
v-for="(item, index) in layout.layout"
:key="index"
v-bind="item"
@resize="resizeHandler"
@move="moveHandler"
@resized="resizedHandler"
@moved="movedHandler">
<el-card shadow="never">
<el-tag size="mini" type="info" slot="header">Card {{item.i}}</el-tag>
<template v-if="item.i === '0'">
<div class="d2-mb">拖拽卡片调整位置</div>
<div class="d2-mb">拖拽卡片右下角的手柄调整卡片大小</div>
<div class="d2-mb">在控制台打印出数据变化</div>
</template>
</el-card>
</d2-grid-item>
</d2-grid-layout>
</d2-container>
</template>
<script>
export default {
data () {
return {
layout: {
layout: [
{'x': 0, 'y': 0, 'w': 4, 'h': 10, 'i': '0'},
{'x': 4, 'y': 0, 'w': 2, 'h': 5, 'i': '1'},
{'x': 6, 'y': 0, 'w': 4, 'h': 5, 'i': '2'},
{'x': 10, 'y': 0, 'w': 2, 'h': 10, 'i': '3'},
{'x': 4, 'y': 5, 'w': 4, 'h': 5, 'i': '4'},
{'x': 8, 'y': 5, 'w': 2, 'h': 5, 'i': '5'},
{'x': 0, 'y': 10, 'w': 8, 'h': 5, 'i': '6'},
{'x': 8, 'y': 10, 'w': 4, 'h': 5, 'i': '7'}
],
colNum: 12,
rowHeight: 30,
isDraggable: true,
isResizable: true,
isMirrored: false,
verticalCompact: true,
margin: [10, 10],
useCssTransforms: true
}
}
},
mounted () {
// 加载完成后显示提示
this.showInfo()
},
methods: {
log (arg1 = 'log', ...logs) {
if (logs.length === 0) {
console.log(arg1)
} else {
console.group(arg1)
logs.forEach(e => {
console.log(e)
})
console.groupEnd()
}
},
// 显示提示
showInfo () {
this.$notify({
title: '提示',
message: '你可以按住卡片拖拽改变位置；或者在每个卡片的右下角拖动，调整卡片大小'
})
},
// 测试代码
layoutUpdatedHandler (newLayout) {
console.group('layoutUpdatedHandler')
newLayout.forEach(e => {
console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
})
console.groupEnd()
},
resizeHandler (i, newH, newW) {
this.log('resizeHandler', `i: ${i}, newH: ${newH}, newW: ${newW}`)
},
moveHandler (i, newX, newY) {
this.log('moveHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
},
resizedHandler (i, newH, newW, newHPx, newWPx) {
this.log('resizedHandler', `i: ${i}, newH: ${newH}, newW: ${newW}, newHPx: ${newHPx}, newWPx: ${newWPx}`)
},
movedHandler (i, newX, newY) {
this.log('movedHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.page {
.vue-grid-layout {
background-color: $color-bg;
border-radius: 4px;
margin: -10px;
.el-card {
height: 100%;
@extend %unable-select;
}
.vue-resizable-handle {
opacity: .3;
&:hover{
opacity: 1;
}
}
}
}
</style>

34
src/pages/demo/components/layout/splitpane.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<d2-container>
<template slot="header">区域划分</template>
<div style="height: 400px; margin: -16px;">
<SplitPane :min-percent='20' :default-percent='30' split="vertical">
<template slot="paneL"><div style="margin: 10px;">左</div></template>
<template slot="paneR">
<SplitPane split="horizontal">
<template slot="paneL"><div style="margin: 10px;">右上</div></template>
<template slot="paneR"><div style="margin: 10px;">右下</div></template>
</SplitPane>
</template>
</SplitPane>
</div>
</d2-container>
</template>
<script>
export default {
mounted () {
// 加载完成后显示提示
this.showInfo()
},
methods: {
// 显示提示
showInfo () {
this.$notify({
title: '提示',
message: '在横向或者纵向的分割线上拖拽调整分区大小'
})
}
}
}
</script>

23
src/pages/demo/components/markdown/md/doc.md Normal file
View File

@@ -0,0 +1,23 @@
# 一级标题
| 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/d2-projects](https://github.com/d2-projects)

17
src/pages/demo/components/markdown/source.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<d2-container>
<template slot="header">指定资源</template>
<d2-markdown :source="doc"/>
</d2-container>
</template>
<script>
import doc from './md/doc.md'
export default {
data () {
return {
doc
}
}
}
</script>

6
src/pages/demo/components/markdown/url.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<d2-container>
<template slot="header">异步加载文件</template>
<d2-markdown :url="`${$baseUrl}markdown/demo.md`"/>
</d2-container>
</template>