先来代码
<script lang="ts">
import { Fragment, Comment, defineComponent, h, isVNode, renderSlot, PropType } from 'vue';
import { ElRow, ElCol } from 'element-plus';
export default defineComponent({
name: 'LayoutForm',
props: {
form: {
type: Boolean,
default: () => false,
},
table: {
type: Boolean,
default: () => false,
},
autoWidth: {
type: Boolean,
default: () => false,
},
grid: {
type: [Number, String],
default: () => '',
},
gutters: {
type: [Number, String, Array] as PropType<number | string | (number | string)[]>,
default: () => '',
},
rowClass: {
type: String,
default: () => '',
},
},
setup(props, { slots }) {
return () => {
const extractChildren = (children: any, extractedChildren: any = []) => {
children.forEach((child: any) => {
if (child.type === Fragment) {
if (Array.isArray(child.children)) {
extractChildren(child.children, extractedChildren);
}
} else {
if (!isVNode(child)) return;
if (child.type === Comment) return;
if (child.type === Fragment) return;
const {
span,
offset,
push,
pull,
xs,
sm,
md,
lg,
xl,
tag,
colBind = {},
colMinWidth = '',
'col-min-width': _colMinWidth = '',
colClass = '',
colStyle = '',
'col-class': _colClass = '',
'col-style': _colStyle = '',
...childProps
} = child.props || {};
let minWidthStyle = '';
if (colMinWidth || _colMinWidth) {
let [colminwidth, minProportion] = (colMinWidth || _colMinWidth).toString().split(',');
minWidthStyle = `flex:${colminwidth};`;
if (parseFloat(colminwidth).toString() === colminwidth) {
colminwidth += 'px';
}
minProportion = minProportion || colminwidth;
minWidthStyle += `min-width:min(max(${colminwidth},${minProportion}),99%);`;
}
extractedChildren.push(
h(
ElCol,
{
span,
offset,
push,
pull,
xs,
sm,
md,
lg,
xl,
tag,
key: child.props?.key || child.props?.prop,
...colBind,
class: colClass || _colClass || colBind.class,
style: `${minWidthStyle};${colStyle || _colStyle || colBind.style}`,
},
{ default: () => ({ ...child, props: childProps }) }
)
);
}
});
return extractedChildren;
};
const children = renderSlot(slots, 'default', { key: 0 }, () => []);
if (Array.isArray(children.children)) {
const extractedChildren = extractChildren(children.children);
return h(
'div',
{
class: `el_row_gutter
${props.form ? 'form' : ''}
${props.table ? 'table' : ''}
${props.autoWidth ? 'autoWidth' : ''}
${props.grid ? 'grid' : ''}
${props.gutters ? 'gutters' : ''}`,
},
h(
ElRow,
{
class: `w_100 ${props.rowClass}`,
},
{ default: () => extractedChildren }
)
);
}
return children.children;
};
},
computed: {
gridMinWidth() {
let minWidth: any = this.grid;
if (parseFloat(minWidth).toString() === minWidth.toString()) {
minWidth = `${minWidth}px`;
}
return minWidth;
},
getters_x() {
let gutter: any = this.gutters;
if (typeof gutter === 'string') {
gutter = gutter.split(',').map((v) => v.trim());
}
if (Array.isArray(gutter)) {
gutter = gutter[1] === undefined ? gutter[0] : gutter[1];
}
if (!gutter && gutter !== 0) {
gutter = 'calc(var(--const-interval) / 2)';
}
if (parseFloat(gutter).toString() === gutter.toString()) {
gutter = `${gutter}px`;
}
return gutter;
},
getters_y() {
let gutter: any = this.gutters;
if (typeof gutter === 'string') {
gutter = gutter.split(',').map((v) => v.trim());
}
if (Array.isArray(gutter)) {
gutter = gutter[0];
}
if (!gutter && gutter !== 0) {
gutter = 'calc(var(--const-interval) / 2)';
}
if (parseFloat(gutter).toString() === gutter.toString()) {
gutter = `${gutter}px`;
}
return gutter;
},
},
});
</script>
<style scoped>
/* 基础属性样式 */
.el_row_gutter {
margin-left: calc(-1 * var(--el_row_gutter_x));
margin-right: calc(-1 * var(--el_row_gutter_x));
margin-top: calc(-1 * var(--el_row_gutter_y));
margin-bottom: calc(-1 * var(--el_row_gutter_y));
}
.el_row_gutter > .el-row > .el-col {
padding-left: var(--el_row_gutter_x);
padding-right: var(--el_row_gutter_x);
padding-top: var(--el_row_gutter_y);
padding-bottom: var(--el_row_gutter_y);
}
.el_row_gutter > .el-row > .el-col > :deep(.el-form-item) {
margin-bottom: unset;
}
.el_row_gutter > .el-row > .el-col > :deep(.el-form-item > .el-form-item__label) {
height: unset;
line-height: unset;
align-items: center;
}
.el_row_gutter > .el-row > .el-col > :deep(.el-form-item > .el-form-item__content) {
line-height: unset;
overflow-wrap: anywhere;
}
.el_row_gutter > .el-row > .el-col > :deep(.el-form-item > .el-form-item__content > *:not(.el_row_gutter)) {
width: 100%;
}
/* form属性样式 */
.el_row_gutter.form {
--el_row_gutter_x: 10px;
--el_row_gutter_y: 10px;
}
.el_row_gutter.form > .el-row > .el-col > :deep(.el-form-item > .el-form-item__label),
.el_row_gutter.form > .el-row > .el-col > :deep(.el-form-item > .el-form-item__label-wrap > .el-form-item__label) {
align-items: center;
padding-right: 25px;
}
/* table属性样式 */
.el_row_gutter.table {
--el_row_gutter_x: 0;
--el_row_gutter_y: 0;
position: relative;
}
.el_row_gutter.table::before {
content: '';
border-right: 1px solid var(--el-border-color);
position: absolute;
height: 100%;
right: -1px;
}
.el_row_gutter.table::after {
content: '';
border-bottom: 1px solid var(--el-border-color);
position: absolute;
width: 100%;
bottom: -1px;
}
.el_row_gutter.table > .el-row > .el-col > :deep(.el-form-item) {
border-top: 1px solid var(--el-border-color);
border-left: 1px solid var(--el-border-color);
position: relative;
min-height: 40px;
height: 100%;
}
/* .el_row_gutter.table > .el-row > .el-col > :deep(.el-form-item)::before {
content: '';
height: 100%;
right: -1px;
position: absolute;
border-right: 1px solid var(--el-border-color);
} */
.el_row_gutter.table > .el-row > .el-col > :deep(.el-form-item)::after {
content: '';
width: 100%;
bottom: -1px;
position: absolute;
border-bottom: 1px solid var(--el-border-color);
}
.el_row_gutter.table > .el-row > .el-col > :deep(.el-form-item > .el-form-item__label) {
align-items: center;
padding-right: unset;
justify-content: center;
background-color: #f2f3f5;
position: relative;
}
.el_row_gutter.table > .el-row > .el-col > :deep(.el-form-item > .el-form-item__label)::after {
content: '';
height: 100%;
right: 0;
position: absolute;
border-right: 1px solid var(--el-border-color);
}
.el_row_gutter.table > .el-row > .el-col > :deep(.el-form-item > .el-form-item__content) {
padding: 5px 5px;
border-left: none;
}
/* autoWidth属性样式 */
.el_row_gutter.autoWidth {
--el_row_gutter_x: 3px;
--el_row_gutter_y: 3px;
}
.el_row_gutter.autoWidth > .el-row > .el-col.el-col-24 {
flex: unset;
}
/* grid属性样式 */
.el_row_gutter.grid > .el-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(v-bind(gridMinWidth), 100%), 1fr));
}
/* gutters属性样式 */
.el_row_gutter.gutters {
--el_row_gutter_x: v-bind(getters_x);
--el_row_gutter_y: v-bind(getters_y);
}
</style>