mirror of
https://github.com/element-plus/element-plus.git
synced 2025-03-07 15:47:57 +08:00
feat(form): label-width supports number type (#2396)
* feat(form): label-width supports number type * perf: update * feat: update
This commit is contained in:
kooriookami
GitHub
parent
8cc2ff6977
commit
7daac762a7
@ -42,14 +42,15 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, getCurrentInstance, inject, nextTick, onBeforeUnmount, onMounted, provide, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { NOOP } from '@vue/shared'
|
||||
import { addUnit, getPropByPath, useGlobalConfig } from '@element-plus/utils/util'
|
||||
import { computed, defineComponent, getCurrentInstance, inject, nextTick, onBeforeUnmount, onMounted, provide, reactive, ref, toRefs, watch } from 'vue'
|
||||
import AsyncValidator from 'async-validator'
|
||||
import LabelWrap from './label-wrap'
|
||||
import { getPropByPath, useGlobalConfig } from '@element-plus/utils/util'
|
||||
import { isValidComponentSize } from '@element-plus/utils/validators'
|
||||
import mitt from 'mitt'
|
||||
import LabelWrap from './label-wrap'
|
||||
import { elFormEvents, elFormItemKey, elFormKey } from './token'
|
||||
|
||||
import type { PropType } from 'vue'
|
||||
import type { ElFormContext, ValidateFieldCallback } from './token'
|
||||
import type { FormItemRule } from './form.type'
|
||||
@ -62,7 +63,7 @@ export default defineComponent({
|
||||
},
|
||||
props: {
|
||||
label: String,
|
||||
labelWidth: String,
|
||||
labelWidth: [String, Number],
|
||||
prop: String,
|
||||
required: {
|
||||
type: Boolean,
|
||||
@ -130,7 +131,7 @@ export default defineComponent({
|
||||
const labelFor = computed(() => props.for || props.prop)
|
||||
const labelStyle = computed(() => {
|
||||
if (elForm.labelPosition === 'top') return {}
|
||||
const labelWidth = props.labelWidth || elForm.labelWidth
|
||||
const labelWidth = addUnit(props.labelWidth) || addUnit(elForm.labelWidth)
|
||||
if (labelWidth) {
|
||||
return {
|
||||
width: labelWidth,
|
||||
@ -145,7 +146,7 @@ export default defineComponent({
|
||||
if (!props.label && !props.labelWidth && isNested.value) {
|
||||
return {}
|
||||
}
|
||||
const labelWidth = props.labelWidth || elForm.labelWidth
|
||||
const labelWidth = addUnit(props.labelWidth) || addUnit(elForm.labelWidth)
|
||||
const ret: Partial<CSSStyleDeclaration> = {}
|
||||
if (!props.label && !slots.label) {
|
||||
ret.marginLeft = labelWidth
|
||||
|
||||
@ -11,18 +11,15 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent, provide, watch, ref,
|
||||
computed, reactive, toRefs, PropType,
|
||||
} from 'vue'
|
||||
import { computed, defineComponent, provide, reactive, ref, toRefs, watch } from 'vue'
|
||||
import mitt from 'mitt'
|
||||
import {
|
||||
elFormKey, ElFormItemContext as FormItemCtx,
|
||||
elFormEvents, ValidateFieldCallback,
|
||||
} from './token'
|
||||
import { elFormEvents, elFormKey } from './token'
|
||||
import { FieldErrorList } from 'async-validator'
|
||||
import type { FormRulesMap } from './form.type'
|
||||
|
||||
import type { PropType } from 'vue'
|
||||
import type { ElFormItemContext as FormItemCtx, ValidateFieldCallback } from './token'
|
||||
|
||||
function useFormLabelWidth() {
|
||||
const potentialLabelWidthArr = ref([])
|
||||
const autoLabelWidth = computed(() => {
|
||||
@ -52,6 +49,7 @@ function useFormLabelWidth() {
|
||||
const index = getLabelWidthIndex(val)
|
||||
index > -1 && potentialLabelWidthArr.value.splice(index, 1)
|
||||
}
|
||||
|
||||
return {
|
||||
autoLabelWidth,
|
||||
registerLabelWidth,
|
||||
@ -69,7 +67,7 @@ export default defineComponent({
|
||||
model: Object,
|
||||
rules: Object as PropType<FormRulesMap>,
|
||||
labelPosition: String,
|
||||
labelWidth: String,
|
||||
labelWidth: [String, Number],
|
||||
labelSuffix: {
|
||||
type: String,
|
||||
default: '',
|
||||
@ -159,7 +157,7 @@ export default defineComponent({
|
||||
// if no callback, return promise
|
||||
if (typeof callback !== 'function') {
|
||||
promise = new Promise((resolve, reject) => {
|
||||
callback = function(valid, invalidFields) {
|
||||
callback = function (valid, invalidFields) {
|
||||
if (valid) {
|
||||
resolve(true)
|
||||
} else {
|
||||
@ -189,7 +187,7 @@ export default defineComponent({
|
||||
return promise
|
||||
}
|
||||
|
||||
const validateField = (props: string|string[], cb: ValidateFieldCallback) => {
|
||||
const validateField = (props: string | string[], cb: ValidateFieldCallback) => {
|
||||
props = [].concat(props)
|
||||
const fds = fields.filter(field => props.indexOf(field.prop) !== -1)
|
||||
if (!fields.length) {
|
||||
|
||||
@ -597,7 +597,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
|
||||
| rules | validation rules of form | object | — | — |
|
||||
| inline | whether the form is inline | boolean | — | false |
|
||||
| label-position | position of label. If set to 'left' or 'right', `label-width` prop is also required | string | left / right / top | right |
|
||||
| label-width | width of label, e.g. '50px'. All its direct child form items will inherit this value. Width `auto` is supported. | string | — | — |
|
||||
| label-width | width of label, e.g. '50px'. All its direct child form items will inherit this value. Width `auto` is supported. | string / number | — | — |
|
||||
| label-suffix | suffix of the label | string | — | — |
|
||||
| hide-required-asterisk | whether required fields should have a red asterisk (star) beside their labels | boolean | — | false |
|
||||
| show-message | whether to show the error message | boolean | — | true |
|
||||
@ -627,7 +627,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
|
||||
| ---- | ----| ---- | ---- | ---- |
|
||||
| prop | a key of `model`. In the use of validate and resetFields method, the attribute is required | string | keys of model that passed to `form` |
|
||||
| label | label | string | — | — |
|
||||
| label-width | width of label, e.g. '50px'. Width `auto` is supported. | string | — | — |
|
||||
| label-width | width of label, e.g. '50px'. Width `auto` is supported. | string / number | — | — |
|
||||
| required | whether the field is required or not, will be determined by validation rules if omitted | boolean | — | false |
|
||||
| rules | validation rules of form, see the following table, more advanced usage at [async-validator](https://github.com/yiminghe/async-validator) | object / array | — | — |
|
||||
| error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |
|
||||
|
||||
@ -611,7 +611,7 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
|
||||
| rules | Reglas de validación | object | — | — |
|
||||
| inline | Si el form es inline | boolean | — | false |
|
||||
| label-position | Posición de la etiqueta | string | left / right / top | right |
|
||||
| label-width | anchura de la etiqueta, por ejemplo, "50px". Todos sus elementos de formulario hijo directo heredarán este valor. El valor `auto` está soportado. | string | — | — |
|
||||
| label-width | anchura de la etiqueta, por ejemplo, "50px". Todos sus elementos de formulario hijo directo heredarán este valor. El valor `auto` está soportado. | string / number | — | — |
|
||||
| label-suffix | sufijo de la etiqueta | string | — | — |
|
||||
| hide-required-asterisk | si los campos obligatorios deben tener un asterisco rojo (estrella) al lado de sus etiquetas | boolean | — | false |
|
||||
| show-message | si mostrar o no el mensaje de error | boolean | — | true |
|
||||
@ -643,7 +643,7 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
|
||||
| -------------- | ------------------------------------------------------------ | ------- | ------------------------------------------- | ----------- |
|
||||
| prop | un clave del modelo. En el uso del método `validate` y `resetFields`, el atributo es obligatorio. | string | Clave del modelo que se ha pasado a `form` | |
|
||||
| label | etiqueta | string | — | — |
|
||||
| label-width | ancho de la etiqueta, Ejemplo: '50px'. El valor `auto` esta soportado | string | — | — |
|
||||
| label-width | ancho de la etiqueta, Ejemplo: '50px'. El valor `auto` esta soportado | string / number | — | — |
|
||||
| required | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | boolean | — | false |
|
||||
| rules | reglas de validación del form, ver más información en [async-validator](https://github.com/yiminghe/async-validator) | object / array | — | — |
|
||||
| error | mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente. | string | — | — |
|
||||
|
||||
@ -596,7 +596,7 @@ Tout les composants d'un formulaire héritent leur attribut `size` de ce formula
|
||||
| rules | Règles de validation du formulaire. | object | — | — |
|
||||
| inline | Si le formulaire est horizontal. | boolean | — | false |
|
||||
| label-position | Position des labels. Si 'left' ou 'right', `label-width` est aussi requis. | string | left / right / top | right |
|
||||
| label-width | Largeur des labels, tout les enfants directs hériteront de cette valeur. La largeur `auto` est supportée. | string | — | — |
|
||||
| label-width | Largeur des labels, tout les enfants directs hériteront de cette valeur. La largeur `auto` est supportée. | string / number | — | — |
|
||||
| label-suffix | Suffixe de labels. | string | — | — |
|
||||
| hide-required-asterisk | Si les champs obligatoires doivent avoir une astérisque rouge (étoile) à coté de leurs labels. | boolean | — | false |
|
||||
| show-message | Si le message d'erreur doit apparaître. | boolean | — | true |
|
||||
@ -627,7 +627,7 @@ Tout les composants d'un formulaire héritent leur attribut `size` de ce formula
|
||||
| ---- | ----| ---- | ---- | ---- |
|
||||
| prop | Une des clés de `model`. Utilisés par les méthodes validate et resetFields. Requis. | string | Clés du model passé à `form`. |
|
||||
| label | Le label. | string | — | — |
|
||||
| label-width | Largeur du label, e.g. '50px'. La largeur `auto` est supportée. | string | — | — |
|
||||
| label-width | Largeur du label, e.g. '50px'. La largeur `auto` est supportée. | string / number | — | — |
|
||||
| required | Si le champ est requis ou non. Si omis, sera déterminé par les règles de validation. | boolean | — | false |
|
||||
| rules | Règles de validation du formulaire, voir table suivante, plus d'informations ici: [async-validator](https://github.com/yiminghe/async-validator) | object / array | — | — |
|
||||
| error | Message d'erreur du champ. S'il est modifié, le champ l'affichera immédiatement. | string | — | — |
|
||||
|
||||
@ -598,7 +598,7 @@ The component has been upgraded with a flex layout to replace the old float layo
|
||||
| rules | フォームのバリデーションルール | object | — | — |
|
||||
| inline | フォームがインラインであるかどうか | boolean | — | false |
|
||||
| label-position | ラベルの位置。’left'、’right’ もしくは`label-width`が設定されている場合は propも必要です。 | string | left / right / top | right |
|
||||
| label-width | ラベルの幅、例えば '50px'。直接の子フォーム項目はすべてこの値を継承します。Width `auto` がサポートされています。 | string | — | — |
|
||||
| label-width | ラベルの幅、例えば '50px'。直接の子フォーム項目はすべてこの値を継承します。Width `auto` がサポートされています。 | string / number | — | — |
|
||||
| label-suffix | ラベルの接尾辞 | string | — | — |
|
||||
| hide-required-asterisk | 必須フィールドのラベルの横に赤いアスタリスク（星）を付けるかどうか | boolean | — | false |
|
||||
| show-message | エラーメッセージを表示するかどうか | boolean | — | true |
|
||||
@ -628,7 +628,7 @@ The component has been upgraded with a flex layout to replace the old float layo
|
||||
| ---- | ----| ---- | ---- | ---- |
|
||||
| prop | `model` のキーです。validateメソッドとresetFieldsメソッドを利用する際には、この属性が必須です。 | string | keys of model that passed to `form` |
|
||||
| label | ラベル | string | — | — |
|
||||
| label-width | ラベルの幅。Width `auto` がサポートされています。 | string | — | — |
|
||||
| label-width | ラベルの幅。Width `auto` がサポートされています。 | string / number | — | — |
|
||||
| required | フィールドが必須かどうか、省略された場合はバリデーションルールによって決定されます。 | boolean | — | false |
|
||||
| rules | フォームのバリデーションルール | object / array | — | — |
|
||||
| error | フィールドのエラーメッセージ、値を設定すると、フィールドはエラーを検証し、このメッセージをすぐに表示します。 | string | — | — |
|
||||
|
||||
@ -591,8 +591,8 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
|
||||
| model | 表单数据对象 | object | — | — |
|
||||
| rules | 表单验证规则 | object | — | — |
|
||||
| inline | 行内表单模式 | boolean | — | false |
|
||||
| label-position | 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 `label-width` | string | right/left/top | right |
|
||||
| label-width | 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 `auto`。 | string | — | — |
|
||||
| label-position | 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 `label-width` | string | right / left / top | right |
|
||||
| label-width | 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 `auto`。 | string / number | — | — |
|
||||
| label-suffix | 表单域标签的后缀 | string | — | — |
|
||||
| hide-required-asterisk | 是否显示必填字段的标签旁边的红色星号 | boolean | — | false |
|
||||
| show-message | 是否显示校验错误信息 | boolean | — | true |
|
||||
@ -622,7 +622,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| prop | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string | 传入 Form 组件的 `model` 中的字段 | — |
|
||||
| label | 标签文本 | string | — | — |
|
||||
| label-width | 表单域标签的的宽度，例如 '50px'。支持 `auto`。 | string | — | — |
|
||||
| label-width | 表单域标签的的宽度，例如 '50px'。支持 `auto`。 | string / number | — | — |
|
||||
| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | — | false |
|
||||
| rules | 表单验证规则, 具体配置见下表, 更多内容参考[async-validator](https://github.com/yiminghe/async-validator) | object / array | — | — |
|
||||
| error | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user