formulate el ui Descargar - Descargar el código fuente formulate el ui

formulate el ui

Otras categorias

1.0.0

Descargar

VueFormuale

Formular-el-ui

Este proyecto agrega element-ui element-ui vueformulate proyecto vueformulate , que le permite

En comparación con las funciones del paquete el-form y vueformulate en Element-UI, escribí un artículo para su referencia

Versión semántica

Este proyecto sigue a la versión semántica 2.0

Antes de la instalación, debe instalar el siguiente paquete NPM

@Documentación china formular de Braid/Vue
Elemento-ui

Instalar

 yarn add formulate-el-ui

Experiencia rápida

Haga clic para obtener una vista previa

usar

Introducción global

Agregue el siguiente código en la posición apropiada de su archivo main.js :

 import 'formulate-el-ui/dist/element-ui.min.css';
import formulateElementUI from 'formulate-el-ui'

Vue.use(VueFormulate, {
  plugins: [formulateElementUI]
})

Solo usa el estilo

 import {
  theme
} from 'formulate-el-ui'
import 'formulate-el-ui/dist/element-ui.min.css';

Vue.use(VueFormulate, {
  plugins: [theme], // 配合上面引入的样式文件，使用 element-ui 的风格
})

Si necesita usar el formulario interno (todos los dominios de formulario se muestran en una línea), puede agregar un estilo el-formulate__form-inline al componente FormulateForm :

 <FormulateForm
  :form-class="['el-formulate__form-inline']"
>
  <FormulateInput
    label="个性签名"
    type="el-input"
    value="你好，Element-UI"
  />
</FormulateForm>

Para obtener más información, visite la documentación de form-class

Nota bail Cuando se usa el formulario interno, el mensaje de error de visualización usa position:absoulte .

Solo corrige la ubicación de visualización de ayuda del componente de casilla de verificación

 import {
  CheckboxHelp,
} from 'formulate-el-ui'

Vue.use(VueFormulate, {
  plugins: [CheckboxHelp], // CheckboxHelp 用于解决 checkbox 组件中 help 信息展示位置错误的问题
})

Aumentar las reglas de los números de teléfono móvil chino y los números de identificación

Las reglas incluyen:

Móvil: Verificación del formato del número de teléfono móvil
Idcard: verificación de formato de identificación de 18 bits

 import {
  rules,
} from 'formulate-el-ui'

Vue.use(VueFormulate, {
  plugins: [rules],
})

Solo expandir los componentes de dominio de formulario de elemento-ui comúnmente utilizados

 import {
  inputs,
} from 'formulate-el-ui'

Vue.use(VueFormulate, {
  plugins: [inputs],
})

El componente actualmente incluido

Componente	Tipo de FormulateInput	Accesorio compatible
Aporte	`el-input`	Autusizar, claro, maxLength, minLength, filas, deshabilitados Showpassword, showwordlimit, eltype (cuando es `textarea` , es un cuadro de texto de múltiples líneas)
Cascader	`el-cascader`	ANTES DEL FILTER, CLAFABLE, CLACAGSETAGS, DEBOUNE, Desactivado, FilterMethod, Ellabel, Opciones, marcador de posición, PopperClass, accesorios, seccor, blindelas, tamaño, elvalue
Selector de color de colorpicker	`el-color-picker`	Colorformat, predefinir, showalpha
Number de entrada	`el-input-number`	Min, Max, Step, Stepstrictly, Precision, deshabilitado
Tasa	`el-rate`	DESHACHALF, COLORES, DISCABILIDADVOIDCOLOR, DISCABILIDADVOIDICONCLASS , Alto umbral, clases de íconos, máximo, bajo éso urbanal, showscore, showText, Textos, TestColor, VoidColor, VoidiconClass
Seleccionar	`el-select`	Permitir, ClearApsetags, filtrable, deshabilitado, múltiple
Control deslizante	`el-slider`	Formatooltip, min, marcas, max, scoretemplate, showtooltip, step, showstops, showInput, showInputControls, Rango, vertical, altura
Cambiar	`el-switch`	Activetext, inactivExtext, activecolor, inactivecolor, deshabilitado

Must -Fill Field+V0.2.5

el-form-item , al * el accesorio required , required FormulateInput rojo * Indicará que el usuario debe llenarse en este campo. Desea mostrarlo, puede establecer requiredTip en false en FormulateInput , luego puede ::

 <FormulateInput :required-tip="false" />

Problema conocido

Los mantenimientos del proyecto se centran en la compatibilidad de VUE3.
En el formulario formulate-form , si hay un dominio del formulario de imagen, después de llamar a loadForm interfaz, y luego asignar los datos de la imagen al formulario, el formulario no false la imagen v-if="loadForm" se devuelve a los datos y luego establece true para lograr el propósito de transmitir la imagen