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

View File

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

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1 +0,0 @@
96116cf6cd5a5755048348977ceaffcc3ab7b0c9

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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