优化 ArrayEditor 组件的栅栏布局样式,优化按钮位置;调整 SelectListEditor 列宽设置

This commit is contained in:
fofolee 2025-01-24 17:31:25 +08:00
parent acf924dc8b
commit 9257faf132
2 changed files with 87 additions and 75 deletions

View File

@ -6,11 +6,8 @@
:model-value="isCollapse"
>
<div class="array-editor">
<div
v-for="(row, index) in rows"
:key="index"
class="row items-center q-gutter-sm"
>
<div v-for="(row, index) in rows" :key="index" class="array-row">
<div class="row-content row q-col-gutter-sm">
<template v-if="!!columns">
<div
v-for="column in processedColumns"
@ -35,7 +32,8 @@
/>
</div>
</template>
<div class="col-auto">
</div>
<div class="btn-container">
<template v-if="rows.length === 1">
<q-btn
@ -78,7 +76,6 @@
</div>
</div>
</div>
</div>
</component>
</template>
@ -271,7 +268,18 @@ export default defineComponent({
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
/*消除q-gutter-sm为第一行带来的额外padding*/
margin-top: -8px;
margin-left: -8px;
}
.array-row {
display: flex;
}
.row-content {
flex: 1;
margin: 0; /* 覆盖 Quasar 的默认 margin */
}
/* 防止输入框换行 */
@ -283,11 +291,12 @@ export default defineComponent({
.btn-container {
position: relative;
width: 32px;
height: 32px;
width: 16px;
padding-top: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.btn-container .q-btn {
@ -296,18 +305,20 @@ export default defineComponent({
height: 16px;
min-height: 16px;
padding: 0;
/*抵消array-editor的margin-left顺便和左边保持距离*/
margin-right: -8px;
}
.btn-container .center-btn {
position: relative;
top: 18px;
}
.btn-container .top-btn {
top: 0;
top: 8px;
}
.btn-container .bottom-btn {
bottom: 0;
top: 28px;
}
.array-editor :deep(.q-btn .q-icon) {

View File

@ -199,11 +199,12 @@ export default defineComponent({
title: {
label: "标题",
noIcon: true,
width: 4,
},
description: {
label: "描述",
noIcon: true,
width: 5,
width: 6,
},
},
subCommands: [