mirror of
https://github.com/element-plus/element-plus.git
synced 2025-01-24 11:05:17 +08:00
fix(components): [el-form] fix form style (#5145)
* style: fix form style * feat: update * feat: update * feat: update * feat: update spell * feat: update
This commit is contained in:
kooriookami
GitHub
parent
2ae9c9759e
commit
f5b7e3accc
@ -1,13 +1,24 @@
|
||||
<template>
|
||||
<div style="margin-left: 1rem">
|
||||
<div>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio :label="'large'">large</el-radio>
|
||||
<el-radio :label="'default'">default</el-radio>
|
||||
<el-radio :label="'small'">small</el-radio>
|
||||
<el-radio-button label="large">large</el-radio-button>
|
||||
<el-radio-button label="default">default</el-radio-button>
|
||||
<el-radio-button label="small">small</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-radio-group v-model="labelPosition">
|
||||
<el-radio-button label="left">Left</el-radio-button>
|
||||
<el-radio-button label="right">Right</el-radio-button>
|
||||
<el-radio-button label="top">Top</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<br />
|
||||
<el-form ref="form" :model="sizeForm" label-width="120px" :size="size">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="sizeForm"
|
||||
label-width="auto"
|
||||
:label-position="labelPosition"
|
||||
:size="size"
|
||||
>
|
||||
<el-form-item label="Activity name">
|
||||
<el-input v-model="sizeForm.name"></el-input>
|
||||
</el-form-item>
|
||||
@ -67,6 +78,7 @@
|
||||
import { reactive, ref } from 'vue'
|
||||
|
||||
const size = ref('default')
|
||||
const labelPosition = ref('right')
|
||||
|
||||
const sizeForm = reactive({
|
||||
name: '',
|
||||
@ -83,3 +95,9 @@ function onSubmit() {
|
||||
console.log('submit!')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-radio-group {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,5 @@
|
||||
<template>
|
||||
<form
|
||||
class="el-form"
|
||||
:class="[
|
||||
labelPosition ? 'el-form--label-' + labelPosition : '',
|
||||
{ 'el-form--inline': inline },
|
||||
]"
|
||||
>
|
||||
<form :class="formKls">
|
||||
<slot></slot>
|
||||
</form>
|
||||
</template>
|
||||
@ -22,6 +16,7 @@ import {
|
||||
} from 'vue'
|
||||
import { elFormKey } from '@element-plus/tokens'
|
||||
import { debugWarn } from '@element-plus/utils/error'
|
||||
import { useSize } from '@element-plus/hooks'
|
||||
import type { ValidateFieldsError } from 'async-validator'
|
||||
|
||||
import type { PropType } from 'vue'
|
||||
@ -123,6 +118,18 @@ export default defineComponent({
|
||||
}
|
||||
)
|
||||
|
||||
const formSize = useSize()
|
||||
const prefix = 'el-form'
|
||||
const formKls = computed(() => {
|
||||
const { labelPosition, inline } = props
|
||||
return [
|
||||
prefix,
|
||||
`${prefix}--${formSize.value}`,
|
||||
labelPosition ? `${prefix}--label-${labelPosition}` : '',
|
||||
inline ? `${prefix}--inline` : '',
|
||||
]
|
||||
})
|
||||
|
||||
const addField = (field: FormItemCtx) => {
|
||||
if (field) {
|
||||
fields.push(field)
|
||||
@ -239,6 +246,7 @@ export default defineComponent({
|
||||
provide(elFormKey, elForm)
|
||||
|
||||
return {
|
||||
formKls,
|
||||
validate, // export
|
||||
resetFields,
|
||||
clearValidate,
|
||||
|
||||
@ -91,7 +91,7 @@
|
||||
</span>
|
||||
</span>
|
||||
<el-icon
|
||||
v-if="validateState && validateIcon"
|
||||
v-if="validateState && validateIcon && needStatusIcon"
|
||||
class="el-input__icon el-input__validateIcon"
|
||||
>
|
||||
<component :is="validateIcon" />
|
||||
@ -461,6 +461,7 @@ export default defineComponent({
|
||||
passwordVisible,
|
||||
inputOrTextarea,
|
||||
suffixVisible,
|
||||
needStatusIcon,
|
||||
|
||||
resizeTextarea,
|
||||
handleInput,
|
||||
|
||||
@ -5,29 +5,81 @@
|
||||
@use 'mixins/var' as *;
|
||||
@use 'common/var' as *;
|
||||
|
||||
$form-item-margin-bottom: () !default;
|
||||
$form-item-margin-bottom: map.merge(
|
||||
(
|
||||
'large': 22px,
|
||||
'default': 18px,
|
||||
'small': 18px,
|
||||
),
|
||||
$form-item-margin-bottom
|
||||
);
|
||||
|
||||
$form-item-line-height: () !default;
|
||||
$form-item-line-height: map.merge(
|
||||
(
|
||||
'large': 40px,
|
||||
'default': 32px,
|
||||
'small': 24px,
|
||||
),
|
||||
$form-item-line-height
|
||||
);
|
||||
|
||||
$form-item-error-padding-top: () !default;
|
||||
$form-item-error-padding-top: map.merge(
|
||||
(
|
||||
'large': 4px,
|
||||
'default': 2px,
|
||||
'small': 2px,
|
||||
),
|
||||
$form-item-error-padding-top
|
||||
);
|
||||
|
||||
$form-item-label-top-line-height: () !default;
|
||||
$form-item-label-top-line-height: map.merge(
|
||||
(
|
||||
'large': 22px,
|
||||
'default': 22px,
|
||||
'small': 20px,
|
||||
),
|
||||
$form-item-label-top-line-height
|
||||
);
|
||||
|
||||
$form-item-label-top-margin-bottom: () !default;
|
||||
$form-item-label-top-margin-bottom: map.merge(
|
||||
(
|
||||
'large': 12px,
|
||||
'default': 8px,
|
||||
'small': 4px,
|
||||
),
|
||||
$form-item-label-top-margin-bottom
|
||||
);
|
||||
|
||||
@include b(form) {
|
||||
@include set-component-css-var('form', $form);
|
||||
|
||||
@include m(label-left) {
|
||||
& .#{$namespace}-form-item__label {
|
||||
.#{$namespace}-form-item__label {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@include m(label-top) {
|
||||
& .#{$namespace}-form-item {
|
||||
.#{$namespace}-form-item {
|
||||
display: block;
|
||||
}
|
||||
& .#{$namespace}-form-item__label {
|
||||
display: block;
|
||||
text-align: left;
|
||||
padding: 0 0 10px 0;
|
||||
|
||||
.#{$namespace}-form-item__label {
|
||||
display: block;
|
||||
text-align: left;
|
||||
margin-bottom: #{map.get($form-item-label-top-margin-bottom, 'default')};
|
||||
line-height: #{map.get($form-item-label-top-line-height, 'default')};
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(inline) {
|
||||
& .#{$namespace}-form-item {
|
||||
.#{$namespace}-form-item {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
&.#{$namespace}-form--label-top {
|
||||
@ -39,18 +91,31 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $size in (large, default, small) {
|
||||
@include m($size) {
|
||||
&.#{$namespace}-form--label-top {
|
||||
.#{$namespace}-form-item {
|
||||
.#{$namespace}-form-item__label {
|
||||
margin-bottom: #{map.get($form-item-label-top-margin-bottom, $size)};
|
||||
line-height: #{map.get($form-item-label-top-line-height, $size)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(form-item) {
|
||||
display: flex;
|
||||
--font-size: #{map.get($input-font-size, 'default')};
|
||||
margin-bottom: calc(var(--font-size) + 8px);
|
||||
margin-bottom: #{map.get($form-item-margin-bottom, 'default')};
|
||||
|
||||
& .#{$namespace}-form-item {
|
||||
.#{$namespace}-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& .#{$namespace}-input__validateIcon {
|
||||
.#{$namespace}-input__validateIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -58,10 +123,23 @@
|
||||
@include m($size) {
|
||||
--font-size: #{map.get($input-font-size, $size)};
|
||||
--el-form-label-font-size: var(--font-size);
|
||||
margin-bottom: #{map.get($form-item-margin-bottom, $size)};
|
||||
|
||||
@include e(label) {
|
||||
line-height: #{map.get($form-item-line-height, $size)};
|
||||
}
|
||||
@include e(content) {
|
||||
line-height: #{map.get($form-item-line-height, $size)};
|
||||
}
|
||||
@include e(error) {
|
||||
padding-top: #{map.get($form-item-error-padding-top, $size)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(label-wrap) {
|
||||
display: flex;
|
||||
|
||||
.#{$namespace}-form-item__label {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -72,7 +150,7 @@
|
||||
text-align: right;
|
||||
font-size: var(--el-form-label-font-size);
|
||||
color: var(--el-text-color-regular);
|
||||
line-height: calc(var(--el-form-label-font-size) * 2 + 4px);
|
||||
line-height: #{map.get($form-item-line-height, 'default')};
|
||||
padding: 0 12px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -81,7 +159,7 @@
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
line-height: calc(var(--font-size) * 2 + 4px);
|
||||
line-height: #{map.get($form-item-line-height, 'default')};
|
||||
position: relative;
|
||||
font-size: var(--font-size);
|
||||
min-width: 0;
|
||||
@ -94,7 +172,7 @@
|
||||
color: var(--el-color-danger);
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding-top: 4px;
|
||||
padding-top: #{map.get($form-item-error-padding-top, 'default')};
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
@ -110,9 +188,8 @@
|
||||
|
||||
@include when(required) {
|
||||
@include pseudo('not(.is-no-asterisk)') {
|
||||
& > .#{$namespace}-form-item__label:before,
|
||||
&
|
||||
> .#{$namespace}-form-item__label-wrap
|
||||
> .#{$namespace}-form-item__label:before,
|
||||
> .#{$namespace}-form-item__label-wrap
|
||||
> .#{$namespace}-form-item__label:before {
|
||||
content: '*';
|
||||
color: var(--el-color-danger);
|
||||
@ -122,17 +199,17 @@
|
||||
}
|
||||
|
||||
@include when(error) {
|
||||
& .#{$namespace}-select-v2__wrapper,
|
||||
& .#{$namespace}-input__inner,
|
||||
& .#{$namespace}-textarea__inner {
|
||||
.#{$namespace}-select-v2__wrapper,
|
||||
.#{$namespace}-input__inner,
|
||||
.#{$namespace}-textarea__inner {
|
||||
&,
|
||||
&:focus {
|
||||
border-color: var(--el-color-danger);
|
||||
}
|
||||
}
|
||||
& .#{$namespace}-input-group__append,
|
||||
& .#{$namespace}-input-group__prepend {
|
||||
& .#{$namespace}-input__inner {
|
||||
.#{$namespace}-input-group__append,
|
||||
.#{$namespace}-input-group__prepend {
|
||||
.#{$namespace}-input__inner {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user