formulate el ui Download - formulate el ui Download do código-fonte

formulate el ui

Outras categorias

1.0.0

Baixar

VueFormular

formular-el-ui

Este projeto adiciona skin element-ui ao projeto vueformulate , o que permite manter um estilo unificado ao usar vueformulate em projetos element-ui .

Com relação à comparação funcional entre os pacotes el-form e vueformulate no element-ui, escrevi um artigo para sua referência.

versão semântica

Este projeto segue a versão semântica 2.0

Antes da instalação, você precisa instalar os seguintes pacotes npm

@braid/vue-formulate Documentação chinesa
elemento-ui

Instalar

 yarn add formulate-el-ui

Experiência rápida

Clique para visualizar

usar

Introdução global

Adicione o seguinte código ao local apropriado em seu arquivo main.js :

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

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

Basta usar estilos

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

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

Se precisar usar um formulário embutido (todos os campos do formulário são exibidos em uma linha), você pode adicionar um estilo el-formulate__form-inline ao componente FormulateForm :

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

Para saber mais, visite a documentação da form-class

Nota: Ao usar um formulário inline, position:absoulte é usado para exibir mensagens de erro. Se houver várias mensagens de erro nas regras de validação no campo, a exibição será confusa. Portanto, você precisará usar a regra bail na validação. , para que apenas as mensagens de erro sejam exibidas.

Corrija apenas o posicionamento da ajuda do componente checkbox

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

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

Adicionadas regras de verificação de número de celular chinês e número de identificação,

Regras incluídas:

celular: verificação do formato do número do celular
idcard: verificação do formato do cartão de identificação de 18 dígitos

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

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

Estenda apenas componentes de campo de formulário comumente usados do element-ui

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

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

Componentes atualmente incluídos

componentes	Tipo FormulateInput	Adereços suportados
Entrada	`el-input`	dimensionamento automático, eliminável, comprimento máximo, comprimento mínimo, linhas, desabilitado showPassword, showWordLimit, elType (quando o valor é `textarea` , é uma caixa de texto com várias linhas)
Cascata	`el-cascader`	beforeFilter, eliminável, colapsoTags, debounce, desativado, filterMethod, elLabel, opções, espaço reservado, popperClass, adereços, separador, showAllLevels, tamanho, elValue
Seletor de cores ColorPicker	`el-color-picker`	colorFormat, predefinir, mostrarAlpha
Número de entrada	`el-input-number`	min,max,passo,passoEstritamente,precisão,desativado
Avaliar	`el-rate`	permitirHalf, cores, desativadoVoidColor, desativadoVoidIconClass ,highThreshold,iconClasses,max,lowThreshold,showScore,showText, textos,testColor,voidColor,voidIconClass
Selecione	`el-select`	permitirCreate, eliminável, colapsoTags, filtrável, desativado, vários
Controle deslizante	`el-slider`	formatTooltip,min,marcas,max,scoreTemplate, showTooltip,passo,showStops,showInput,showInputControls, alcance, vertical, altura
Trocar	`el-switch`	activeText,inactiveText,activeColor,inactiveColor, desabilitado

Campos obrigatórios+v0.2.5

Quando required é adicionada ao componente el-form-item do element-ui, um * vermelho será exibido para lembrar ao usuário que este campo é obrigatório. Agora, este projeto também o suporta, desde que a regra de validação de FormulateInput contém required , este * vermelho é adicionado por padrão. Se você não quiser exibi-lo, você pode definir requiredTip como false em FormulateInput , é isso:

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

Problemas conhecidos

O mantenedor do projeto está focado na compatibilidade do vue3 e atualmente não tem tempo para lidar com problemas e PRs. Embora seja esse o caso, todo o projeto possui testes de unidade completos baseados no vue2, para que você possa usá-lo com confiança.
No formulário de edição, se houver um campo de formulário de imagem, após chamar a interface e atribuir os dados da imagem ao formulário, o formulário não renderizará a imagem. A solução temporária é adicionar um v-if="loadForm" na formulate-form componente formulate-form . v-if="loadForm" O valor padrão de loadForm é definido como false . Depois que a interface retornar os dados, defina-o como true para atingir o objetivo de renderizar a imagem.