feat: ✨ 简化 d2-crud-plus 演示
This commit is contained in:
FairyEver
parent
c4f85c9f00
commit
bcf3ffa7d0
|
|
@ -0,0 +1,31 @@
|
||||||
|
export default `columns: [
|
||||||
|
{
|
||||||
|
title: '日期', //字段名称
|
||||||
|
key: 'date', //字段key
|
||||||
|
type: 'date', //字段类型，添加、修改、查询将自动生成相应表单组件
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
key: 'status',
|
||||||
|
type: 'select', //选择框，默认单选
|
||||||
|
dict: { url: '/dicts/OpenStatusEnum' }//远程数据字典
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '地区',
|
||||||
|
key: 'address',
|
||||||
|
type: 'select', //选择框
|
||||||
|
form: { //表单组件自定义配置
|
||||||
|
component: { //支持任何v-model组件
|
||||||
|
props: { multiple: true } // 此处配置选择框为多选
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dict: {
|
||||||
|
data: [ //本地数据字典
|
||||||
|
{ value: 'sz', label: '深圳' },
|
||||||
|
{ value: 'gz', label: '广州' },
|
||||||
|
{ value: 'wh', label: '武汉' },
|
||||||
|
{ value: 'sh', label: '上海' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]`
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
export default {
|
|
||||||
crud: ` columns: [
|
|
||||||
{
|
|
||||||
title: '日期', //字段名称
|
|
||||||
key: 'date', //字段key
|
|
||||||
type: 'date', //字段类型，添加、修改、查询将自动生成相应表单组件
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '状态',
|
|
||||||
key: 'status',
|
|
||||||
type: 'select', //选择框，默认单选
|
|
||||||
dict: { url: '/dicts/OpenStatusEnum' }//远程数据字典
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '地区',
|
|
||||||
key: 'address',
|
|
||||||
type: 'select', //选择框
|
|
||||||
form: { //表单组件自定义配置
|
|
||||||
component: { //支持任何v-model组件
|
|
||||||
props: { multiple: true } // 此处配置选择框为多选
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dict: {
|
|
||||||
data: [ //本地数据字典
|
|
||||||
{ value: 'sz', label: '深圳' },
|
|
||||||
{ value: 'gz', label: '广州' },
|
|
||||||
{ value: 'wh', label: '武汉' },
|
|
||||||
{ value: 'sh', label: '上海' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
@ -1,29 +1,24 @@
|
||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container type="ghost">
|
||||||
<d2-module-index-banner slot="header" v-bind="banner"/>
|
<d2-module-index-banner slot="header" v-bind="banner"/>
|
||||||
<!-- <d2-module-index-menu :menu="menu"/>-->
|
<el-tabs>
|
||||||
|
<el-tab-pane label="效果" name="result">
|
||||||
<div class="exampleBox d2-mt-20 ">
|
<img src="./image/gif.webp" style="width: 600px; border: 1px solid #E4E7ED; border-radius: 4px;">
|
||||||
<div class="left">
|
</el-tab-pane>
|
||||||
<d2-highlight :code="helper.crud" lang="javascript"/>
|
<el-tab-pane label="code" name="code">
|
||||||
</div>
|
<d2-highlight :code="code" lang="javascript"/>
|
||||||
<div class="icon">
|
</el-tab-pane>
|
||||||
<i class="el-icon-right"></i>
|
</el-tabs>
|
||||||
</div>
|
|
||||||
<div class="right">
|
|
||||||
<img src="./image/gif.webp">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import helper from './helper'
|
import code from './code'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
helper,
|
code,
|
||||||
banner: {
|
banner: {
|
||||||
title: 'D2 CRUD PLUS',
|
title: 'D2 CRUD PLUS',
|
||||||
subTitle: 'D2 Crud Plus 是一个面向配置的Crud开发框架，辅助d2-crud和d2-crud-x，让开发crud更简单',
|
subTitle: 'D2 Crud Plus 是一个面向配置的Crud开发框架，辅助d2-crud和d2-crud-x，让开发crud更简单',
|
||||||
|
|
@ -33,37 +28,3 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.exampleBox{
|
|
||||||
display: flex;
|
|
||||||
align-items:center;
|
|
||||||
height:420px;
|
|
||||||
width:90%;
|
|
||||||
padding:5px;
|
|
||||||
margin:auto;
|
|
||||||
justify-content: center;
|
|
||||||
.left{
|
|
||||||
height:100%;
|
|
||||||
overflow-y: hidden;
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
}
|
|
||||||
.icon{
|
|
||||||
width:120px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items:center;
|
|
||||||
i{font-size: 50px;}
|
|
||||||
}
|
|
||||||
.right{
|
|
||||||
height:100%;
|
|
||||||
img{
|
|
||||||
height:100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.d2-highlight{
|
|
||||||
font-size: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue