|
|
<template>
|
|
|
<!-- 使用v-bind指令绑定class属性，根据条件动态添加class -->
|
|
|
<div :class="[prefixCls, lastCls, blockCls, gridCls]">
|
|
|
<!-- 如果title存在，则显示title -->
|
|
|
<div v-if="title" class="antd-pro-components-standard-form-row-index-label">
|
|
|
<span>{{ title }}</span>
|
|
|
</div>
|
|
|
<!-- 显示slot内容 -->
|
|
|
<div class="antd-pro-components-standard-form-row-index-content">
|
|
|
<slot></slot>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// 定义一个数组，包含三个类名
|
|
|
const classes = [
|
|
|
'antd-pro-components-standard-form-row-index-standardFormRowBlock',
|
|
|
'antd-pro-components-standard-form-row-index-standardFormRowGrid',
|
|
|
'antd-pro-components-standard-form-row-index-standardFormRowLast'
|
|
|
]
|
|
|
export default {
|
|
|
name: 'StandardFormRow',
|
|
|
// 定义组件的属性
|
|
|
props: {
|
|
|
prefixCls: {
|
|
|
type: String,
|
|
|
default: 'antd-pro-components-standard-form-row-index-standardFormRow'
|
|
|
},
|
|
|
title: {
|
|
|
type: String,
|
|
|
default: undefined
|
|
|
},
|
|
|
last: {
|
|
|
type: Boolean
|
|
|
},
|
|
|
block: {
|
|
|
type: Boolean
|
|
|
},
|
|
|
grid: {
|
|
|
type: Boolean
|
|
|
}
|
|
|
},
|
|
|
// 计算属性
|
|
|
computed: {
|
|
|
// 如果last属性为true，则返回classes数组中的第三个类名，否则返回null
|
|
|
lastCls () {
|
|
|
return this.last ? classes[2] : null
|
|
|
},
|
|
|
// 如果block属性为true，则返回classes数组中的第一个类名，否则返回null
|
|
|
blockCls () {
|
|
|
return this.block ? classes[0] : null
|
|
|
},
|
|
|
// 如果grid属性为true，则返回classes数组中的第二个类名，否则返回null
|
|
|
gridCls () {
|
|
|
return this.grid ? classes[1] : null
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
@import '../index.less';
|
|
|
|
|
|
// 导入index.less文件
|
|
|
|
|
|
.antd-pro-components-standard-form-row-index-standardFormRow {
|
|
|
display: flex;
|
|
|
margin-bottom: 16px;
|
|
|
padding-bottom: 16px;
|
|
|
border-bottom: 1px dashed @border-color-split;
|
|
|
|
|
|
// 深度选择器，用于选择子组件中的样式
|
|
|
/deep/ .ant-form-item {
|
|
|
margin-right: 24px;
|
|
|
}
|
|
|
/deep/ .ant-form-item-label label {
|
|
|
margin-right: 0;
|
|
|
color: @text-color;
|
|
|
}
|
|
|
/deep/ .ant-form-item-label,
|
|
|
.ant-form-item-control {
|
|
|
padding: 0;
|
|
|
line-height: 32px;
|
|
|
}
|
|
|
|
|
|
// 标签样式
|
|
|
.antd-pro-components-standard-form-row-index-label {
|
|
|
flex: 0 0 auto;
|
|
|
margin-right: 24px;
|
|
|
color: @heading-color;
|
|
|
font-size: @font-size-base;
|
|
|
text-align: right;
|
|
|
& > span {
|
|
|
display: inline-block;
|
|
|
height: 32px;
|
|
|
line-height: 32px;
|
|
|
&::after {
|
|
|
content: '：';
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 内容样式
|
|
|
.antd-pro-components-standard-form-row-index-content {
|
|
|
flex: 1 1 0;
|
|
|
/deep/ .ant-form-item:last-child {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 最后一个表单行样式
|
|
|
&.antd-pro-components-standard-form-row-index-standardFormRowLast {
|
|
|
margin-bottom: 0;
|
|
|
padding-bottom: 0;
|
|
|
border: none;
|
|
|
}
|
|
|
|
|
|
// 块级表单行样式
|
|
|
&.antd-pro-components-standard-form-row-index-standardFormRowBlock {
|
|
|
/deep/ .ant-form-item,
|
|
|
div.ant-form-item-control-wrapper {
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 网格表单行样式
|
|
|
&.antd-pro-components-standard-form-row-index-standardFormRowGrid {
|
|
|
/deep/ .ant-form-item,
|
|
|
div.ant-form-item-control-wrapper {
|
|
|
display: block;
|
|
|
}
|
|
|
/deep/ .ant-form-item-label {
|
|
|
float: left;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</style> |
