mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-09 23:16:18 +08:00
优化 ArrayEditor 组件的栅栏布局样式,优化按钮位置;调整 SelectListEditor 列宽设置
This commit is contained in:
parent
acf924dc8b
commit
9257faf132
@ -6,11 +6,8 @@
|
|||||||
:model-value="isCollapse"
|
:model-value="isCollapse"
|
||||||
>
|
>
|
||||||
<div class="array-editor">
|
<div class="array-editor">
|
||||||
<div
|
<div v-for="(row, index) in rows" :key="index" class="array-row">
|
||||||
v-for="(row, index) in rows"
|
<div class="row-content row q-col-gutter-sm">
|
||||||
:key="index"
|
|
||||||
class="row items-center q-gutter-sm"
|
|
||||||
>
|
|
||||||
<template v-if="!!columns">
|
<template v-if="!!columns">
|
||||||
<div
|
<div
|
||||||
v-for="column in processedColumns"
|
v-for="column in processedColumns"
|
||||||
@ -35,7 +32,8 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div class="col-auto">
|
</div>
|
||||||
|
|
||||||
<div class="btn-container">
|
<div class="btn-container">
|
||||||
<template v-if="rows.length === 1">
|
<template v-if="rows.length === 1">
|
||||||
<q-btn
|
<q-btn
|
||||||
@ -78,7 +76,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</component>
|
</component>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -271,7 +268,18 @@ export default defineComponent({
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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 {
|
.btn-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 32px;
|
width: 16px;
|
||||||
height: 32px;
|
padding-top: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-container .q-btn {
|
.btn-container .q-btn {
|
||||||
@ -296,18 +305,20 @@ export default defineComponent({
|
|||||||
height: 16px;
|
height: 16px;
|
||||||
min-height: 16px;
|
min-height: 16px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
/*抵消array-editor的margin-left,顺便和左边保持距离*/
|
||||||
|
margin-right: -8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-container .center-btn {
|
.btn-container .center-btn {
|
||||||
position: relative;
|
top: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-container .top-btn {
|
.btn-container .top-btn {
|
||||||
top: 0;
|
top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-container .bottom-btn {
|
.btn-container .bottom-btn {
|
||||||
bottom: 0;
|
top: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.array-editor :deep(.q-btn .q-icon) {
|
.array-editor :deep(.q-btn .q-icon) {
|
||||||
|
@ -199,11 +199,12 @@ export default defineComponent({
|
|||||||
title: {
|
title: {
|
||||||
label: "标题",
|
label: "标题",
|
||||||
noIcon: true,
|
noIcon: true,
|
||||||
|
width: 4,
|
||||||
},
|
},
|
||||||
description: {
|
description: {
|
||||||
label: "描述",
|
label: "描述",
|
||||||
noIcon: true,
|
noIcon: true,
|
||||||
width: 5,
|
width: 6,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
subCommands: [
|
subCommands: [
|
||||||
|
Loading…
x
Reference in New Issue
Block a user