study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2025-06-29 04:12:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

调整VariableInput样式，更加紧凑

Browse Source
This commit is contained in:
fofolee 2025-01-12 11:35:10 +08:00
parent 06938cade1
commit e13f778f2a
2 changed files with 37 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/composer/common/VariableInput.vue
View File

@ -29,10 +29,10 @@
v-if="!hasSelectedVariable" v-if="!hasSelectedVariable"
> >
<q-tooltip>{{ <q-tooltip>{{
isString (isString
? "当前类型是：字符串" ? "当前类型是：字符串"
: "当前类型是：变量、数字、表达式等" + : "当前类型是：变量、数字、表达式等") +
(disableToggleType ? "" : "，点击切换") (disableToggleType ? "" : "，点击切换")
}}</q-tooltip> }}</q-tooltip>
</q-btn> </q-btn>
<!-- 选项下拉按钮 --> <!-- 选项下拉按钮 -->
@ -104,10 +104,7 @@
<q-btn-dropdown <q-btn-dropdown
flat flat
dense dense
:class="{ stretch
'text-primary': hasSelectedVariable,
'text-grey-6': !hasSelectedVariable,
}"
class="variable-dropdown prepend-btn" class="variable-dropdown prepend-btn"
size="sm" size="sm"
@click="variables = getAvailableVariables()" @click="variables = getAvailableVariables()"
@ -398,18 +395,43 @@ export default defineComponent({
.variable-input :deep(.q-field__control) { .variable-input :deep(.q-field__control) {
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 0px;
}
.variable-input :deep(.q-field__append) {
padding-left: 0;
} }
.prepend-btn { .prepend-btn {
min-width: 24px; max-width: 14px;
padding: 4px; display: flex;
opacity: 0.6; align-items: center;
transition: all 0.3s ease; justify-content: center;
margin-left: 5px;
transition: all 0.6s ease;
} }
.prepend-btn:hover { .string-toggle.prepend-btn {
transform: translateX(14px);
max-width: 0;
margin-left: 0;
opacity: 0;
}
.variable-input:hover .string-toggle.prepend-btn {
max-width: 14px;
opacity: 1; opacity: 1;
transform: translateX(0);
margin-left: 5px;
transition: all 0.6s ease;
}
.variable-dropdown.prepend-btn {
background-color: rgba(0, 0, 0, 0.02);
}
.body--dark .variable-dropdown.prepend-btn {
background-color: rgba(255, 255, 255, 0.02);
} }
.clear-btn:hover { .clear-btn:hover {

4
src/components/composer/ui/SelectListEditor.vue
View File

@ -218,7 +218,7 @@ export default defineComponent({
arrayEditorColumns: { arrayEditorColumns: {
id: { id: {
label: "id", label: "id",
width: 3, width: 2,
noIcon: true, noIcon: true,
}, },
title: { title: {
@ -228,7 +228,7 @@ export default defineComponent({
description: { description: {
label: "描述", label: "描述",
noIcon: true, noIcon: true,
width: 4, width: 5,
}, },
}, },
}; };