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

cli3改版基本完成

Browse Source 
Former-commit-id: 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly fc66dcb2e437ff46b2c36ec1e3bcce71a6461250 [formerly b6451dc60d4c1e6006a9fcd380656d2023436e64]]]]]
Former-commit-id: c791410cda91e2df1b9808bfb032f0d3d68106ef
Former-commit-id: 0c5197800cfae6f27f7ab792c887fb25a73a23e0
Former-commit-id: 208a8e77c0fada6e9d191a7d495615ec2ef9704d [formerly af8c1367ed65b626196ac156c8521257cc804d60]
Former-commit-id: 1fdb571cea6ed9dba9ea02f4ba6ebfb5d89e1b2f
Former-commit-id: 774a145ae0694612edf988d9992ef797ddf4f21d
Former-commit-id: 03fc24d70365836d60360aa24e24dc7cb4520b91
Former-commit-id: bba4fd5552fa42da029fd6b310f5ee48558d5508
Former-commit-id: 2de81d34fb07248965677e8a3866c13089fa95e7
This commit is contained in:
liyang
2018-07-16 22:22:55 +08:00
parent db72c5b7f5
commit 1d1634bf8e
421 changed files with 18421 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/views/demo/element/basic-button/index.vue Normal file
View File

@@ -0,0 +1,106 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">基础用法</h1>
<el-row class="d2-mb">
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<el-row class="d2-mb">
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<el-row class="d2-mb">
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
<h1>禁用状态</h1>
<el-row class="d2-mb">
<el-button disabled>默认按钮</el-button>
<el-button type="primary" disabled>主要按钮</el-button>
<el-button type="success" disabled>成功按钮</el-button>
<el-button type="info" disabled>信息按钮</el-button>
<el-button type="warning" disabled>警告按钮</el-button>
<el-button type="danger" disabled>危险按钮</el-button>
</el-row>
<el-row>
<el-button plain disabled>朴素按钮</el-button>
<el-button type="primary" plain disabled>主要按钮</el-button>
<el-button type="success" plain disabled>成功按钮</el-button>
<el-button type="info" plain disabled>信息按钮</el-button>
<el-button type="warning" plain disabled>警告按钮</el-button>
<el-button type="danger" plain disabled>危险按钮</el-button>
</el-row>
<h1>文字按钮</h1>
<el-row>
<el-button type="text">文字按钮</el-button>
<el-button type="text" disabled>文字按钮</el-button>
</el-row>
<h1>图标按钮</h1>
<el-row>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
</el-row>
<h1>按钮组</h1>
<el-row>
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<el-button-group>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>
</el-row>
<h1>加载中</h1>
<el-row>
<el-button type="primary" :loading="true">加载中</el-button>
</el-row>
<h1>不同尺寸</h1>
<el-row>
<el-row class="d2-mb">
<el-button>默认按钮</el-button>
<el-button size="medium">中等按钮</el-button>
<el-button size="small">小型按钮</el-button>
<el-button size="mini">超小按钮</el-button>
</el-row>
<el-row>
<el-button round>默认按钮</el-button>
<el-button size="medium" round>中等按钮</el-button>
<el-button size="small" round>小型按钮</el-button>
<el-button size="mini" round>超小按钮</el-button>
</el-row>
</el-row>
</d2-container>
</template>

62
src/views/demo/element/basic-color/components/info.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<div class="info" :class="theme">
<p class="name">{{name}}</p>
<p class="sass">{{sass}}</p>
<p class="color">{{color}}</p>
</div>
</template>
<script>
export default {
props: {
theme: {
type: String,
required: false,
default: 'light' // dark
},
name: {
type: String,
required: false,
default: ''
},
sass: {
type: String,
required: false,
default: ''
},
color: {
type: String,
required: false,
default: ''
}
}
}
</script>
<style lang="scss" scoped>
.info {
padding: 10px;
p {
margin: 0px;
}
.name {
font-size: 16px;
font-weight: bold;
}
.sass {
font-size: 12px;
margin-top: 4px;
}
.color {
font-size: 12px;
opacity: .7;
margin-top: 2px;
}
&.dark {
color: #333;
}
&.light {
color: #FFF;
}
}
</style>

143
src/views/demo/element/basic-color/index.vue Normal file
View File

@@ -0,0 +1,143 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">主色</h1>
<el-row :gutter="20">
<el-col :span="6">
<div class="color color-primary">
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
</div>
</el-col>
</el-row>
<h1>辅助色</h1>
<el-row :gutter="20">
<el-col :span="6">
<div class="color color-info">
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
</div>
</el-col>
<el-col :span="6">
<div class="color color-success">
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
</div>
</el-col>
<el-col :span="6">
<div class="color color-warning">
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
</div>
</el-col>
<el-col :span="6">
<div class="color color-danger">
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
</div>
</el-col>
</el-row>
<h1>中性色</h1>
<el-row :gutter="20" class="d2-mb">
<el-col :span="6">
<div class="color color-text-main">
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
</div>
</el-col>
<el-col :span="6">
<div class="color color-text-normal">
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
</div>
</el-col>
<el-col :span="6">
<div class="color color-text-sub">
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
</div>
</el-col>
<el-col :span="6">
<div class="color color-text-placehoder">
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="color color-border-1">
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
</div>
</el-col>
<el-col :span="6">
<div class="color color-border-2">
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
</div>
</el-col>
<el-col :span="6">
<div class="color color-border-3">
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
</div>
</el-col>
<el-col :span="6">
<div class="color color-border-4">
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
</div>
</el-col>
</el-row>
</d2-container>
</template>
<script>
export default {
components: {
'd2-element-basic-color-info': () => import('./components/info.vue')
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/unit/_color.scss';
.color {
border-radius: 4px;
height: 90px;
}
.color-primary {
background-color: $color-primary;
}
.color-info {
background-color: $color-info;
}
.color-success {
background-color: $color-success;
}
.color-warning {
background-color: $color-warning;
}
.color-danger {
background-color: $color-danger;
}
.color-text-main {
background-color: $color-text-main;
}
.color-text-normal {
background-color: $color-text-normal;
}
.color-text-sub {
background-color: $color-text-sub;
}
.color-text-placehoder {
background-color: $color-text-placehoder;
}
.color-border-1 {
background-color: $color-border-1;
}
.color-border-2 {
background-color: $color-border-2;
}
.color-border-3 {
background-color: $color-border-3;
}
.color-border-4 {
background-color: $color-border-4;
}
</style>

93
src/views/demo/element/basic-container/index.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<d2-container type="full">
<el-container class="d2-mb">
<el-header>顶栏</el-header>
<el-main>主体</el-main>
</el-container>
<el-container class="d2-mb">
<el-header>顶栏</el-header>
<el-main>主体</el-main>
<el-footer>底栏</el-footer>
</el-container>
<el-container class="d2-mb">
<el-aside width="200px">侧边栏</el-aside>
<el-main>主体</el-main>
</el-container>
<el-container class="d2-mb">
<el-header>顶栏</el-header>
<el-container>
<el-aside width="200px">侧边栏</el-aside>
<el-main>主体</el-main>
</el-container>
</el-container>
<el-container class="d2-mb">
<el-header>顶栏</el-header>
<el-container>
<el-aside width="200px">侧边栏</el-aside>
<el-container>
<el-main>主体</el-main>
<el-footer>底栏</el-footer>
</el-container>
</el-container>
</el-container>
<el-container class="d2-mb">
<el-aside width="200px">侧边栏</el-aside>
<el-container>
<el-header>顶栏</el-header>
<el-main>主体</el-main>
</el-container>
</el-container>
<el-container>
<el-aside width="200px">侧边栏</el-aside>
<el-container>
<el-header>顶栏</el-header>
<el-main>主体</el-main>
<el-footer>底栏</el-footer>
</el-container>
</el-container>
</d2-container>
</template>
<style lang="scss" scoped>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>

23
src/views/demo/element/basic-icon/index.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<d2-container type="full">
<template slot="header">图标</template>
<h1 class="d2-mt-0">
d2admin 已经集成 FontAwesome 图表库，提供约 1,000 个图标；并且准备好了图标组件
</h1>
<p>如果你愿意，你还可以随意使用 SVG 图标</p>
<el-button-group>
<el-button @click="$router.push({ path: '/demo/components/icon/list' })">
<d2-icon name="link"/>
图标列表
</el-button>
<el-button @click="$router.push({ path: '/demo/components/icon/icon' })">
<d2-icon name="link"/>
图标组件
</el-button>
<el-button @click="$router.push({ path: '/demo/components/icon/svg' })">
<d2-icon name="link"/>
svg 图标组件
</el-button>
</el-button-group>
</d2-container>
</template>

135
src/views/demo/element/basic-layout/index.vue Normal file
View File

@@ -0,0 +1,135 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">基础布局</h1>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<h1>分栏间隔</h1>
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<h1>混合布局</h1>
<el-row :gutter="20">
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<h1>分栏偏移</h1>
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<h1>对齐方式</h1>
<el-row type="flex" class="row-bg">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="center">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="end">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<h1>响应式布局</h1>
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
</d2-container>
</template>
<style lang="scss" scoped>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>

89
src/views/demo/element/basic-typography/index.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">中文字体</h1>
<el-row :gutter="10">
<el-col :span="6">
<el-card shadow="never">
<template slot="header">PingFang SC</template>
<p class="basic-typography-text typography-style-1">和畅惠风</p>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never">
<template slot="header">Hiragino Sans GB</template>
<p class="basic-typography-text typography-style-2">和畅惠风</p>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never">
<template slot="header">Microsoft YaHei</template>
<p class="basic-typography-text typography-style-3">和畅惠风</p>
</el-card>
</el-col>
</el-row>
<h1>英文／数字字体</h1>
<el-row :gutter="10">
<el-col :span="6">
<el-card shadow="never">
<template slot="header">Helvetica Neue</template>
<p class="basic-typography-text typography-style-4">RGag</p>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never">
<template slot="header">Helvetica</template>
<p class="basic-typography-text typography-style-5">RGag</p>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never">
<template slot="header">Arial</template>
<p class="basic-typography-text typography-style-6">RGag</p>
</el-card>
</el-col>
</el-row>
<h1>Font-family 代码</h1>
<d2-highlight :code="code"/>
</d2-container>
</template>
<script>
export default {
data () {
return {
code: 'font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;'
}
}
}
</script>
<style lang="scss" scoped>
.basic-typography-text {
font-size: 48px;
margin: 0px;
padding: 0px;
line-height: 80px;
&.typography-style-1 {
font-family: PingFang SC;
}
&.typography-style-2 {
font-family: Hiragino Sans GB;
}
&.typography-style-3 {
font-family: Microsoft YaHei;
}
&.typography-style-4 {
font-family: Helvetica Neue;
}
&.typography-style-5 {
font-family: Helvetica;
}
&.typography-style-6 {
font-family: Arial;
}
}
</style>

7
src/views/demo/element/data-badge/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/data-pagination/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/data-progress/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/data-table/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/data-tag/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/data-tree/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/form-cascader/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

104
src/views/demo/element/form-checkbox/index.vue Normal file
View File

@@ -0,0 +1,104 @@
<template>
<d2-container type="full">
<el-row>
<el-col :span="12">
<h1 class="d2-mt-0">基础用法</h1>
<el-row>
<el-checkbox v-model="checked1">备选项1</el-checkbox>
<el-checkbox v-model="checked2">备选项2</el-checkbox>
</el-row>
<h1>禁用状态</h1>
<el-row>
<el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>
<el-checkbox v-model="checked2" disabled>备选项2</el-checkbox>
</el-row>
<h1>多选框组</h1>
<el-checkbox-group v-model="checkList">
<el-checkbox label="复选框 A"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用" disabled></el-checkbox>
<el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>
<h1>indeterminate 状态</h1>
<el-checkbox :indeterminate="true" label="复选框"></el-checkbox>
<h1>可选项目数量的限制</h1>
<el-checkbox-group
v-model="checkedCities"
:min="1"
:max="2">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-col>
<el-col :span="12">
<h1>按钮样式</h1>
<div>
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup1" size="medium">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup1" size="small">
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup1" size="mini" disabled>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<h1>带有边框</h1>
<div>
<el-checkbox v-model="checked1" label="备选项1" border></el-checkbox>
<el-checkbox v-model="checked2" label="备选项2" border></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox v-model="checked1" label="备选项1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked2" label="备选项2" border size="medium"></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup2" size="small">
<el-checkbox label="备选项1" border></el-checkbox>
<el-checkbox label="备选项2" border disabled></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
<el-checkbox label="备选项1" border></el-checkbox>
<el-checkbox label="备选项2" border></el-checkbox>
</el-checkbox-group>
</div>
</el-col>
</el-row>
</d2-container>
</template>
<script>
export default {
data () {
return {
checked1: true,
checked2: false,
checkList: ['选中且禁用', '复选框 A'],
checkedCities: ['上海', '北京'],
cities: ['上海', '北京', '广州', '深圳'],
checkboxGroup1: ['上海'],
checkboxGroup2: []
}
}
}
</script>

7
src/views/demo/element/form-color-picker/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/form-date-picker/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/form-datetime-picker/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/form-form/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/form-input-number/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

1
src/views/demo/element/form-input/index.vue.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
90a3104a58b6654c6323fe8f698255dfaf2f76da

99
src/views/demo/element/form-radio/index.vue Normal file
View File

@@ -0,0 +1,99 @@
<template>
<d2-container type="full">
<el-row>
<el-col :span="12">
<h1 class="d2-mt-0">基础用法</h1>
<el-row>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</el-row>
<h1>禁用状态</h1>
<el-row>
<el-radio disabled v-model="radio" label="1">备选项</el-radio>
<el-radio disabled v-model="radio" label="2">备选项</el-radio>
</el-row>
<h1>单选框组</h1>
<el-row>
<el-radio-group v-model="radio">
<el-radio label="1">备选项1</el-radio>
<el-radio label="2">备选项2</el-radio>
</el-radio-group>
</el-row>
<h1>带有边框</h1>
<div>
<el-radio v-model="radio" label="1" border>备选项1</el-radio>
<el-radio v-model="radio" label="2" border>备选项2</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio v-model="radio" label="1" border size="medium">备选项1</el-radio>
<el-radio v-model="radio" label="2" border size="medium">备选项2</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio" size="small">
<el-radio label="1" border>备选项1</el-radio>
<el-radio label="2" border disabled>备选项2</el-radio>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio" size="mini" disabled>
<el-radio label="1" border>备选项1</el-radio>
<el-radio label="2" border>备选项2</el-radio>
</el-radio-group>
</div>
</el-col>
<el-col :span="12">
<h1>单选框组</h1>
<div>
<el-radio-group v-model="radio2">
<el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio2" size="medium">
<el-radio-button label="上海" ></el-radio-button>
<el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio2" size="small">
<el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京" disabled ></el-radio-button>
<el-radio-button label="广州"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio2" disabled size="mini">
<el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button>
</el-radio-group>
</div>
</el-col>
</el-row>
</d2-container>
</template>
<script>
export default {
data () {
return {
radio: '1',
radio2: '上海'
}
}
}
</script>

7
src/views/demo/element/form-rate/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/form-select/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/form-slider/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/form-switch/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/form-time-picker/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/form-transfer/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/form-upload/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

9
src/views/demo/element/index/index.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<d2-container type="full">
<d2-demo-page-cover
title="基础组件库"
sub-title="D2Admin 集成由饿了么出品的 ElementUI">
<img src="@/assets/image/icon/page-cover/element.png">
</d2-demo-page-cover>
</d2-container>
</template>

7
src/views/demo/element/navigation-breadcrumb/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/navigation-dropdown/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/navigation-menu/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/navigation-steps/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/navigation-tabs/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/notice-alert/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/notice-loading/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/notice-message-box/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/notice-message/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/notice-notification/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/others-card/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/others-carousel/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/others-collapse/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/others-dialog/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/others-popover/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>

7
src/views/demo/element/others-tooltip/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<d2-container type="full">
<h1 class="d2-mt-0">该页面尚未完成组件示例搬运</h1>
<p>D2Admin 的构建依托于由饿了么出品的 ElementUI，欲了解更多该组件的信息请查阅以下链接</p>
<d2-demo-link-btn title="Element" link="http://element.eleme.io/#/zh-CN"/>
</d2-container>
</template>