test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-11-30 10:18:02 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(components): [input] fix status icon gap (#7228)

Browse Source
This commit is contained in:
Zhongxiang Wang 2022-04-19 12:39:08 +08:00 committed by GitHub
parent 2b47933c8f
commit d2810c867e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/examples/input/mixed-input.vue
View File

@ -16,7 +16,7 @@
class="input-with-select"
>
<template #prepend>
<el-select v-model="select" placeholder="Select" style="width: 110px">
<el-select v-model="select" placeholder="Select" style="width: 115px">
<el-option label="Restaurant" value="1" />
<el-option label="Order No." value="2" />
<el-option label="Tel" value="3" />
@ -37,7 +37,7 @@
<el-button :icon="Search" />
</template>
<template #append>
<el-select v-model="select" placeholder="Select" style="width: 110px">
<el-select v-model="select" placeholder="Select" style="width: 115px">
<el-option label="Restaurant" value="1" />
<el-option label="Order No." value="2" />
<el-option label="Tel" value="3" />

20
packages/components/input/src/input.vue
View File

@ -92,17 +92,17 @@
{{ textLength }} / {{ attrs.maxlength }}
</span>
</span>
<el-icon
v-if="validateState && validateIcon && needStatusIcon"
:class="[
nsInput.e('icon'),
nsInput.e('validateIcon'),
nsInput.is('loading', validateState === 'validating'),
]"
>
<component :is="validateIcon" />
</el-icon>
</span>
<el-icon
v-if="validateState && validateIcon && needStatusIcon"
:class="[
nsInput.e('icon'),
nsInput.e('validateIcon'),
nsInput.is('loading', validateState === 'validating'),
]"
>
<component :is="validateIcon" />
</el-icon>
</span>
</div>

12
packages/theme-chalk/src/input.scss
View File

@ -130,8 +130,6 @@
color: var(--el-input-icon-color);
font-size: map.get($input-font-size, 'default');
cursor: pointer;
transition: var(--el-transition-color) !important;
margin-left: 8px;
&:hover {
color: var(--el-input-clear-hover-color);
@ -149,7 +147,7 @@
background: getCssVar('fill-color', 'blank');
line-height: initial;
display: inline-block;
padding: 0 5px;
padding-left: 8px;
}
}
@ -232,6 +230,13 @@
> :last-child {
margin-right: 8px;
}
> :first-child {
&,
&.#{$namespace}-input__icon {
margin-left: 0;
}
}
} @else {
> :first-child {
margin-left: 8px;
@ -246,6 +251,7 @@
justify-content: center;
align-items: center;
transition: all var(--el-transition-duration);
margin-left: 8px;
}
@include e(validateIcon) {