formulate el ui Télécharger - formulate el ui Téléchargement du code source

formulate el ui

Autres catégories

1.0.0

Télécharger

VueFormulate

formuler-el-ui

Ce projet ajoute le skin element-ui au projet vueformulate , ce qui vous permet de conserver un style unifié lors de l'utilisation vueformulate dans les projets element-ui .

Concernant la comparaison fonctionnelle entre les packages el-form et vueformulate dans element-ui, j'ai écrit un article pour votre référence.

version sémantique

Ce projet suit Semantic Version 2.0

Avant l'installation, vous devez installer les packages npm suivants

@braid/vue-formulate Documentation chinoise
élément-ui

Installer

 yarn add formulate-el-ui

Expérience rapide

Cliquez pour prévisualiser

utiliser

Présentation mondiale

Ajoutez le code suivant à l'emplacement approprié dans votre fichier main.js :

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

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

Utilisez simplement des styles

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

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

Si vous devez utiliser un formulaire en ligne (tous les champs du formulaire sont affichés sur une seule ligne), vous pouvez ajouter un style el-formulate__form-inline au composant FormulateForm :

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

Pour en savoir plus, visitez la documentation de form-class

Remarque : Lors de l'utilisation d'un formulaire en ligne, position:absoulte est utilisé pour afficher les messages d'erreur. S'il y a plusieurs messages d'erreur dans les règles de validation dans le champ, l'affichage sera source de confusion. Vous devrez donc utiliser la règle bail dans la validation. , afin que seuls les messages d'erreur soient affichés.

Corrigez uniquement le placement de l'aide du composant case à cocher

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

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

Ajout de règles de vérification du numéro de téléphone mobile chinois et du numéro d'identification,

Règles incluses :

mobile : vérification du format du numéro de téléphone portable
carte d'identité : vérification du format de la carte d'identité à 18 chiffres

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

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

Étendre uniquement les composants de champ de formulaire couramment utilisés par element-ui

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

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

Composants actuellement inclus

composants	FormuleType d'entrée	Accessoires pris en charge
Saisir	`el-input`	taille automatique, effaçable, longueur maximale, longueur minimale, lignes, désactivé showPassword, showWordLimit, elType (lorsque la valeur est `textarea` , il s'agit d'une zone de texte multiligne)
Cascadeur	`el-cascader`	beforeFilter, clearable, collapsusTags, anti-rebond, désactivé, filterMethod, elLabel, options, espace réservé, popperClass, accessoires, séparateur, showAllLevels, taille, elValue
Sélecteur de couleurs ColorPicker	`el-color-picker`	colorFormat, prédéfinir, showAlpha
Numéro d'entrée	`el-input-number`	min, max, pas, pas strictement, précision, désactivé
Taux	`el-rate`	AllowHalf, couleurs, désactivéVoidColor, désactivéVoidIconClass ,highThreshold,iconClasses,max,lowThreshold,showScore,showText, textes, testColor, voidColor, voidIconClass
Sélectionner	`el-select`	AllowCreate, clearable, collapseTags, filtrable, désactivé, multiple
Curseur	`el-slider`	formatTooltip,min,marques,max,scoreTemplate, showTooltip, étape, showStops, showInput, showInputControls, plage, verticale, hauteur
Changer	`el-switch`	activeText, inactiveText, activeColor, inactiveColor, désactivé

Champs obligatoires+v0.2.5

Lorsque required est ajouté au composant el-form-item d'element-ui, un * rouge s'affichera pour rappeler à l'utilisateur que ce champ est désormais obligatoire, tant que la règle de validation de FormulateInput contient required , ce sera Ce rouge * est ajouté par défaut Si vous ne souhaitez pas l'afficher, vous pouvez définir requiredTip sur false sur FormulateInput , c'est tout :

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

Problèmes connus

Le responsable du projet se concentre sur la compatibilité de vue3 et n'a actuellement pas le temps de gérer les problèmes et les PR. Bien que ce soit le cas, l'ensemble du projet dispose de tests unitaires complets basés sur vue2, vous pouvez donc l'utiliser en toute confiance.
Dans le formulaire d'édition, s'il y a un champ de formulaire d'image, après avoir appelé l'interface et attribué les données d'image au formulaire, le formulaire ne restituera pas l'image. La solution temporaire consiste à ajouter un v-if="loadForm" sur la formulate-form composant formulate-form v-if="loadForm" La valeur par défaut de loadForm est définie sur false . Une fois que l'interface a renvoyé les données, définissez-la sur true pour atteindre l'objectif de rendu de l'image.