formulate el ui

formulieren-el-ui

Dieses Projekt fügt dem vueformulate -Projekt element-ui Skin hinzu, der es Ihnen ermöglicht, einen einheitlichen Stil beizubehalten, wenn Sie vueformulate in element-ui -Projekten verwenden.

Bezüglich des Funktionsvergleichs zwischen el-form und vueformulate Paketen in element-ui habe ich einen Artikel als Referenz geschrieben.

semantische Version

Dieses Projekt folgt Semantic Version 2.0

Vor der Installation müssen Sie die folgenden npm-Pakete installieren

• @braid/vue-formulate chinesische Dokumentation
• element-ui

Installieren

 yarn add formulate-el-ui

Schnelle Erfahrung

Klicken Sie hier, um eine Vorschau anzuzeigen

verwenden

Globale Einführung

Fügen Sie den folgenden Code an der entsprechenden Stelle in Ihrer main.js -Datei hinzu:

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

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

Verwenden Sie einfach Stile

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

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

Wenn Sie ein Inline-Formular verwenden müssen (alle Formularfelder werden in einer Zeile angezeigt), können Sie der FormulateForm Komponente einen el-formulate__form-inline -Stil hinzufügen:

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

Weitere Informationen finden Sie in der Dokumentation für form-class

Hinweis: Wenn Sie ein Inline-Formular verwenden, wird position:absoulte verwendet, um Fehlermeldungen in den Validierungsregeln im Feld anzuzeigen. Daher müssen Sie bei der Validierung die bail -Regel verwenden , sodass nur die Fehlermeldungen angezeigt werden.

Korrigieren Sie nur die Hilfeplatzierung der Kontrollkästchenkomponente

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

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

Überprüfungsregeln für chinesische Mobiltelefonnummern und ID-Nummern hinzugefügt,

Zu den Regeln gehörten:

• mobile: Überprüfung des Mobiltelefonnummernformats
• idcard: 18-stellige Überprüfung des Ausweisformats

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

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

Erweitern Sie in element-ui nur häufig verwendete Formularfeldkomponenten

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

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

Derzeit enthaltene Komponenten

Komponenten	FormuleInput-Typ	Unterstützte Requisiten
Eingang	el-input	Automatische Größe, löschbar, maximale Länge, minimale Länge, Zeilen, deaktiviert showPassword, showWordLimit, elType (wenn der Wert textarea ist, handelt es sich um ein mehrzeiliges Textfeld)
Kaskader	el-cascader	beforeFilter, löschbar, collapTags, entprellen, deaktiviert, filterMethod, elLabel, Optionen, Platzhalter, popperClass, Requisiten, Trennzeichen, showAllLevels, Größe, elValue
ColorPicker-Farbauswahl	el-color-picker	colorFormat, vordefinieren, showAlpha
Eingabenummer	el-input-number	min, max, Schritt, Schritt streng, Präzision, deaktiviert
Rate	el-rate	allowHalf,colors,disabledVoidColor,disabledVoidIconClass ,highThreshold,iconClasses,max,lowThreshold,showScore,showText, texts,testColor,voidColor,voidIconClass
Wählen	el-select	AllowCreate, löschbar, CollapseTags, filterbar, deaktiviert, mehrere
Schieberegler	el-slider	formatTooltip,min,marks,max,scoreTemplate, showTooltip,step,showStops,showInput,showInputControls, Reichweite, Vertikale, Höhe
Schalten	el-switch	activeText,inactiveText,activeColor,inactiveColor, deaktiviert

Erforderliche Felder+v0.2.5

Wenn required Requisite zur el-form-item Komponente von element-ui hinzugefügt wird, wird ein rotes * angezeigt, um den Benutzer daran zu erinnern, dass dieses Feld es nun auch unterstützt, solange die Validierungsregel von FormulateInput Wenn es required enthält, wird dieses rote * standardmäßig hinzugefügt. Wenn Sie es nicht anzeigen möchten, können Sie requiredTip false „requiredTip“ auf FormulateInput setzen.

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

Bekannte Probleme

• Der Projektbetreuer konzentriert sich auf die Vue3-Kompatibilität und hat derzeit keine Zeit, sich mit Problemen und PRs zu befassen. Obwohl dies der Fall ist, verfügt das gesamte Projekt über vollständige Komponententests, die auf Vue2 basieren, sodass Sie es bedenkenlos verwenden können.
• Wenn im Bearbeitungsformular ein Bildformularfeld vorhanden ist, wird das Bild nach dem Aufrufen der Schnittstelle und dem Zuweisen der Bilddaten zum Formular nicht gerendert. Die vorübergehende Lösung besteht darin, dem formulate-form ein v-if="loadForm" hinzuzufügen. formulate-form . v-if="loadForm" Der Standardwert von loadForm ist auf false gesetzt. Nachdem die Schnittstelle die Daten zurückgegeben hat, setzen Sie ihn auf true , um den Zweck des Renderns des Bildes zu erreichen.

dokumentieren

Vueformulate-Dokumentation ansehen

Lizenz

MIT

VS Code-Code-Eingabeaufforderungs-Plug-in

Ein vscode-Plug-in zur Unterstützung der Entwicklung wurde gestartet. Sie können auf „formule-el-helper“ klicken, um es zu installieren.

Stern

Wenn Sie es nützlich finden, geben Sie dem Projekt einen Stern^_^

Verwandte Empfehlungen

• Vue Formulate Helper : VS-Code-Code-Eingabeaufforderungs-Plug-in für Vue Formulate