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

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

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" />

View File

@ -92,7 +92,6 @@
{{ textLength }} / {{ attrs.maxlength }}
</span>
</span>
</span>
<el-icon
v-if="validateState && validateIcon && needStatusIcon"
:class="[
@ -104,6 +103,7 @@
<component :is="validateIcon" />
</el-icon>
</span>
</span>
</div>
<!-- append slot -->

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) {