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
2018-07-16 10:43:14 +08:00
parent c53973a35f
commit 1d310c9c7d
496 changed files with 3 additions and 23673 deletions

View File

@@ -1,106 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,62 +0,0 @@
<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>

View File

@@ -1,145 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,94 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,23 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,135 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,89 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,104 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container class="page">
<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>

View File

@@ -1 +0,0 @@
e8fcb70549e365d73095f6c3f3f3390c018e4b3d

View File

@@ -1,100 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

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

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>

View File

@@ -1,7 +0,0 @@
<template>
<d2-container>
<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>