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

no message

Browse Source 
Former-commit-id: 90b140d703fb3fce2bef2d98516293854ef9d014
Former-commit-id: a77a9d22757d33850b7366f9d603a920458a29e0
Former-commit-id: d8f16caa59b4ebe374d26c011f967e3dc7e4eef0
This commit is contained in:
liyang
2018-06-10 09:21:26 +08:00
parent 0f37ec5374
commit e256d63b60
28 changed files with 126 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/zh/components/count-up.md
View File

@@ -15,13 +15,13 @@
``` vue
// 基本使用方法
<d2-count-up :end="100"></d2-count-up>
<d2-count-up :end="100"/>
// 设置始末值
<d2-count-up :start="14" :end="100"></d2-count-up>
<d2-count-up :start="14" :end="100"/>
// 设置动画时间
<d2-count-up :end="100" :decimals="2"></d2-count-up>
<d2-count-up :end="100" :decimals="2"/>
```
组件会在页面上渲染 `<span>` 标签

2
docs/zh/components/highlight.md
View File

@@ -9,7 +9,7 @@
## 示例
``` vue
<d2-highlight code="alert('Hello')"></d2-highlight>
<d2-highlight code="alert('Hello')"/>
```
::: tip

2
docs/zh/components/icon-svg.md
View File

@@ -13,7 +13,7 @@
然后使用组件
``` vue
<d2-icon-svg name="刚才的svg文件名"></d2-icon-svg>
<d2-icon-svg name="刚才的svg文件名"/>
```
## 获取已经注册的所有图标

10
docs/zh/components/icon.md
View File

@@ -12,22 +12,22 @@
``` vue
// 这样用没有毛病 但是也没什么用
<d2-icon></d2-icon>
<d2-icon/>
// 指定图标名称
<d2-icon name="github"></d2-icon>
<d2-icon name="github"/>
// 设置行内样式
<d2-icon name="github" style="font-size: 100px;"></d2-icon>
<d2-icon name="github" style="font-size: 100px;"/>
// 设置 class
<d2-icon name="github" class="icon-class-demo"></d2-icon>
<d2-icon name="github" class="icon-class-demo"/>
```
这个组件只是简化了写法而已
``` vue
<d2-icon name="github"></d2-icon>
<d2-icon name="github"/>
// 等同于
<i class="fa fa-github" aria-hidden="true"></i>
```

28
src/components/core/MainLayout/components/HeaderRight/components/FullScreen.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<el-tooltip
class="item"
effect="dark"
:content="isFullScreen ? '退出全屏' : '全屏'"
placement="bottom">
<el-button class="d2-mr btn-text" type="text" @click="toggleFullScreen">
<d2-icon v-if="isFullScreen" name="compress"/>
<d2-icon v-else name="arrows-alt"/>
</el-button>
</el-tooltip>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState({
isFullScreen: state => state.fullScreen.isFullScreen
})
},
methods: {
...mapMutations([
'toggleFullScreen'
])
}
}
</script>

33
src/components/core/MainLayout/components/HeaderRight/components/UserDropdown.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<el-dropdown class="d2-mr">
<span class="el-dropdown-link">你好</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="logOff"><d2-icon name="power-off"/> 注销</el-dropdown-item>
<el-dropdown-item><d2-icon name="user-circle-o"/> 个人中心</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
import Cookies from 'js-cookie'
export default {
methods: {
logOff () {
this.$confirm('注销此账户吗?', '注销', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 删除cookie
Cookies.remove('token')
// 跳转路由
this.$router.push({
name: 'login'
})
}).catch(() => {
// 取消了注销
})
}
}
}
</script>

6
src/components/core/d2-container-full/index.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="d2-container-full" :style="cardStyle">
<div v-if="$slots.header" class="d2-container-full__header" ref="header">
<slot name="header"></slot>
<slot name="header"/>
</div>
<div class="d2-container-full__body" :style="bodyStyle">
<slot></slot>
<slot/>
</div>
<div v-if="$slots.footer" class="d2-container-full__footer" ref="footer">
<slot name="footer"></slot>
<slot name="footer"/>
</div>
</div>
</template>

14
src/components/core/d2-container/index.vue
View File

@@ -2,19 +2,19 @@
<div class="container-component" :class="{responsive}">
<!-- [card] 卡片容器 -->
<el-card v-if="type === 'card'" class="d2-mr d2-mb">
<slot v-if="$slots.header" name="header" slot="header"></slot>
<slot></slot>
<slot v-if="$slots.header" name="header" slot="header"/>
<slot/>
</el-card>
<!-- [ghost] 隐形的容器 -->
<div v-if="type === 'ghost'" class="d2-mr d2-mb">
<slot name="header"></slot>
<slot></slot>
<slot name="header"/>
<slot/>
</div>
<!-- [container-full] 撑满 -->
<d2-container-full v-if="type === 'full'" :right="20" :bottom="0">
<slot v-if="$slots.header" name="header" slot="header"></slot>
<slot></slot>
<slot v-if="$slots.footer" name="footer" slot="footer"></slot>
<slot v-if="$slots.header" name="header" slot="header"/>
<slot/>
<slot v-if="$slots.footer" name="footer" slot="footer"/>
</d2-container-full>
</div>
</template>

4
src/components/core/d2-layout-main/components/-header-right/components/FullScreen.vue
View File

@@ -5,8 +5,8 @@
:content="isFullScreen ? '退出全屏' : '全屏'"
placement="bottom">
<el-button class="d2-mr btn-text" type="text" @click="toggleFullScreen">
<d2-icon v-if="isFullScreen" name="compress"></d2-icon>
<d2-icon v-else name="arrows-alt"></d2-icon>
<d2-icon v-if="isFullScreen" name="compress"/>
<d2-icon v-else name="arrows-alt"/>
</el-button>
</el-tooltip>
</template>

4
src/components/core/d2-layout-main/components/-header-right/components/UserDropdown.vue
View File

@@ -2,8 +2,8 @@
<el-dropdown class="d2-mr">
<span class="el-dropdown-link">你好</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="logOff"><d2-icon name="power-off"></d2-icon> 注销</el-dropdown-item>
<el-dropdown-item><d2-icon name="user-circle-o"></d2-icon> 个人中心</el-dropdown-item>
<el-dropdown-item @click.native="logOff"><d2-icon name="power-off"/> 注销</el-dropdown-item>
<el-dropdown-item><d2-icon name="user-circle-o"/> 个人中心</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>

2
src/components/demo/PageIndexArticle/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="page-index-article-body">
<div class="page-index-article-body__logo">
<slot></slot>
<slot/>
</div>
<p class="page-index-article-body__title">{{title}}</p>
<p class="page-index-article-body__sub-title d2-mt-0">{{subTitle}}</p>

4
src/pages/demo/chart/demo/components/ChartDemoCard.vue
View File

@@ -2,7 +2,7 @@
<el-card>
<div slot="header">
<el-button type="primary" size="mini" @click="syncData">
<d2-icon name="refresh"></d2-icon>
<d2-icon name="refresh"/>
加载数据
</el-button>
<el-radio-group v-model="height" size="mini">
@@ -10,7 +10,7 @@
</el-radio-group>
</div>
<div :style="style">
<slot :data="data"></slot>
<slot :data="data"/>
</div>
</el-card>
</template>

12
src/pages/demo/components/countup/index.vue
View File

@@ -11,7 +11,7 @@
<el-card>
<p slot="title">只设置目标数字</p>
<div class="group">
<d2-count-up :end="100"></d2-count-up>
<d2-count-up :end="100"/>
</div>
</el-card>
</el-col>
@@ -19,7 +19,7 @@
<el-card>
<p slot="title">设置起止数值</p>
<div class="group">
<d2-count-up :start="14" :end="100"></d2-count-up>
<d2-count-up :start="14" :end="100"/>
</div>
</el-card>
</el-col>
@@ -27,7 +27,7 @@
<el-card>
<p slot="title">小数位数</p>
<div class="group">
<d2-count-up :end="100" :decimals="2"></d2-count-up>
<d2-count-up :end="100" :decimals="2"/>
</div>
</el-card>
</el-col>
@@ -35,7 +35,7 @@
<el-card>
<p slot="title">动画时长</p>
<div class="group">
<d2-count-up :end="100" :duration="6"></d2-count-up>
<d2-count-up :end="100" :duration="6"/>
</div>
</el-card>
</el-col>
@@ -43,7 +43,7 @@
<el-card>
<p slot="title">回调函数</p>
<div class="group">
<d2-count-up :end="100" :callback="() => {className = 'end'}" :class="className"></d2-count-up>
<d2-count-up :end="100" :callback="() => {className = 'end'}" :class="className"/>
</div>
</el-card>
</el-col>
@@ -51,7 +51,7 @@
<el-card>
<p slot="title">结束一秒后更新数值</p>
<div class="group">
<d2-count-up :end="end" :callback="update"></d2-count-up>
<d2-count-up :end="end" :callback="update"/>
</div>
</el-card>
</el-col>

2
src/pages/demo/components/editor-quill/index.vue
View File

@@ -15,7 +15,7 @@
</el-card>
<el-card>
<template slot="header">输出</template>
<d2-highlight :code="formated"></d2-highlight>
<d2-highlight :code="formated"/>
</el-card>
</d2-container>
</template>

8
src/pages/demo/components/highlight/index.vue
View File

@@ -8,25 +8,25 @@
</el-card>
<el-card class="d2-mb">
<p slot="title">javascript</p>
<d2-highlight :code="codeJavascript"></d2-highlight>
<d2-highlight :code="codeJavascript"/>
</el-card>
<el-row :gutter="20">
<el-col :span="8">
<el-card class="d2-mb">
<p slot="title">css</p>
<d2-highlight :code="codeCSS"></d2-highlight>
<d2-highlight :code="codeCSS"/>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="d2-mb">
<p slot="title">scss</p>
<d2-highlight :code="codeSCSS"></d2-highlight>
<d2-highlight :code="codeSCSS"/>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="d2-mb">
<p slot="title">html</p>
<d2-highlight :code="codeHTML"></d2-highlight>
<d2-highlight :code="codeHTML"/>
</el-card>
</el-col>
</el-row>

2
src/pages/demo/components/icon/components/IconCell.vue
View File

@@ -54,7 +54,7 @@ export default {
return `<i class="fa fa-${this.icon}" aria-hidden="true"></i>`
},
iconComponent () {
return `<d2-icon name="${this.icon}"></d2-icon>`
return `<d2-icon name="${this.icon}"/>`
}
},
methods: {

8
src/pages/demo/components/icon/icon.vue
View File

@@ -6,10 +6,10 @@
title="图标组件"
url="https://github.com/FairyEver/d2admin-vue-element/blob/master/src/components/core/Icon/index.vue">
</PageHeader>
<d2-icon></d2-icon>
<d2-icon name="github"></d2-icon>
<d2-icon name="github" style="font-size: 100px;"></d2-icon>
<d2-icon name="github" class="icon-class-demo"></d2-icon>
<d2-icon/>
<d2-icon name="github"/>
<d2-icon name="github" style="font-size: 100px;"/>
<d2-icon name="github" class="icon-class-demo"/>
</el-card>
<el-card>
<d2-markdown url="/static/md/组件 - 图标组件.md"/>

4
src/pages/demo/components/icon/select.vue
View File

@@ -16,7 +16,7 @@
<template v-else>未选择</template>
</p>
</div>
<d2-icon-select v-model="icon"></d2-icon-select>
<d2-icon-select v-model="icon"/>
<div class="title-group">
<p class="title">用户可以输入</p>
<p class="sub-title">
@@ -27,7 +27,7 @@
<template v-else>未选择</template>
</p>
</div>
<d2-icon-select v-model="icon2" :user-input="true"></d2-icon-select>
<d2-icon-select v-model="icon2" :user-input="true"/>
</el-card>
<el-card>
<d2-markdown url="/static/md/组件 - 图标选择器.md"/>

2
src/pages/demo/components/icon/svg.vue
View File

@@ -7,7 +7,7 @@
</PageHeader>
<el-row>
<el-col class="icon-card" :span="4" v-for="(icon, index) in $IconSvg" :key="index">
<d2-icon-svg class="icon" :name="icon"></d2-icon-svg>
<d2-icon-svg class="icon" :name="icon"/>
<div class="icon-title">
<span>{{icon}}</span>
</div>

4
src/pages/demo/plugins/export/table.vue
View File

@@ -6,11 +6,11 @@
</PageHeader>
<div class="d2-mb">
<el-button type="primary" @click="exportCsv">
<d2-icon name="download"></d2-icon>
<d2-icon name="download"/>
导出 CSV
</el-button>
<el-button type="primary" @click="exportExcel">
<d2-icon name="download"></d2-icon>
<d2-icon name="download"/>
导出 Excel
</el-button>
</div>

2
src/pages/demo/plugins/export/txt.vue
View File

@@ -12,7 +12,7 @@
</el-input>
<div class="d2-mt d2-mb">
<el-button type="primary" @click="exportTxt">
<d2-icon name="download"></d2-icon>
<d2-icon name="download"/>
保存为 txt
</el-button>
</div>

4
src/pages/demo/plugins/import/csv.vue
View File

@@ -7,14 +7,14 @@
</PageHeader>
<div class="d2-mb">
<el-button @click="download">
<d2-icon name="download"></d2-icon>
<d2-icon name="download"/>
下载演示 .csv 表格
</el-button>
</div>
<div class="d2-mb">
<el-upload :before-upload="handleUpload" action="default">
<el-button type="success">
<d2-icon name="file-o"></d2-icon>
<d2-icon name="file-o"/>
选择要导入的 .csv 表格
</el-button>
</el-upload>

4
src/pages/demo/plugins/import/xlsx.vue
View File

@@ -7,14 +7,14 @@
</PageHeader>
<div class="d2-mb">
<el-button @click="download">
<d2-icon name="download"></d2-icon>
<d2-icon name="download"/>
下载演示 .xlsx 表格
</el-button>
</div>
<div class="d2-mb">
<el-upload :before-upload="handleUpload" action="default">
<el-button type="success">
<d2-icon name="file-o"></d2-icon>
<d2-icon name="file-o"/>
选择要导入的 .xlsx 表格
</el-button>
</el-upload>

4
src/pages/demo/plugins/mock/components/MockDemoCard.vue
View File

@@ -9,12 +9,12 @@
<el-row :gutter="10">
<el-col :span="12">
<div class="col col-l">
<d2-highlight :code="code"></d2-highlight>
<d2-highlight :code="code"/>
</div>
</el-col>
<el-col :span="12">
<div class="col col-r">
<d2-highlight :code="mock"></d2-highlight>
<d2-highlight :code="mock"/>
</div>
</el-col>
</el-row>

2
static/md/组件 - 代码高亮.md
View File

@@ -7,7 +7,7 @@
## 示例
```
<d2-highlight code="alert('Hello')"></d2-highlight>
<d2-highlight code="alert('Hello')"/>
```
> 本框架只是提供代码高亮的简单实现，如需实现更高级的设置请修改组件代码

2
static/md/组件 - 图标组件 - svg.md
View File

@@ -11,7 +11,7 @@
然后使用组件
```
<d2-icon-svg name="刚才的svg文件名"></d2-icon-svg>
<d2-icon-svg name="刚才的svg文件名"/>
```
## 获取已经注册的所有图标

10
static/md/组件 - 图标组件.md
View File

@@ -10,22 +10,22 @@
```
// 这样用没有毛病 但是也没什么用
<d2-icon></d2-icon>
<d2-icon/>
// 指定图标名称
<d2-icon name="github"></d2-icon>
<d2-icon name="github"/>
// 设置行内样式
<d2-icon name="github" style="font-size: 100px;"></d2-icon>
<d2-icon name="github" style="font-size: 100px;"/>
// 设置 class
<d2-icon name="github" class="icon-class-demo"></d2-icon>
<d2-icon name="github" class="icon-class-demo"/>
```
这个组件只是简化了写法而已
```
<d2-icon name="github"></d2-icon>
<d2-icon name="github"/>
// 等同于
<i class="fa fa-github" aria-hidden="true"></i>
```

6
static/md/组件 - 数字动画.md
View File

@@ -13,13 +13,13 @@
```
// 基本使用方法
<d2-count-up :end="100"></d2-count-up>
<d2-count-up :end="100"/>
// 设置始末值
<d2-count-up :start="14" :end="100"></d2-count-up>
<d2-count-up :start="14" :end="100"/>
// 设置动画时间
<d2-count-up :end="100" :decimals="2"></d2-count-up>
<d2-count-up :end="100" :decimals="2"/>
```
组件会在页面上渲染 `<span>` 标签