formulate el ui

フォーミュラ・エル・ウイ

このプロジェクトは、 element-uiスキンをvueformulateプロジェクトに追加します。これにより、 element-uiプロジェクトでvueformulate使用するときに統一されたスタイルを維持できるようになります。

element-uiにおけるel-formとvueformulateパッケージの機能比較について記事を書きましたのでご参考までに。

セマンティックバージョン

このプロジェクトはセマンティック バージョン 2.0 に従っています。

インストールする前に、次の npm パッケージをインストールする必要があります

• @braid/vue-formulate 中国語ドキュメント
• 要素 ui

インストール

 yarn add formulate-el-ui

クイックエクスペリエンス

クリックしてプレビューします

使用

グローバルな紹介

次のコードをmain.jsファイルの適切な場所に追加します。

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

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

スタイルだけを使用する

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

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

インライン フォーム (すべてのフォーム フィールドが 1 行に表示される) を使用する必要がある場合は、 el-formulate__form-inlineスタイルをFormulateFormコンポーネントに追加できます。

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

詳細については、 form-classのドキュメントを参照してください。

注: インライン フォームを使用する場合、フィールドの検証ルールに複数のエラー メッセージが表示される場合は、 position:absoulteが使用されるため、検証でbailルールを使用する必要があります。 , エラーメッセージのみが表示されるようにします。

チェックボックスコンポーネントのヘルプの配置のみを修正します。

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

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

中国の携帯電話番号とID番号の確認ルールを追加、

ルールには次のものが含まれます:

• mobile: 携帯電話番号形式の検証
• idcard: 18 桁の ID カード形式の検証

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

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

よく使用されるフォーム フィールド コンポーネントの要素 UI のみを拡張します。

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

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

現在含まれているコンポーネント

コンポーネント	Formulate入力タイプ	サポートされている小道具
入力	el-input	自動サイズ、クリア可能、最大長、最小長、行、無効 showPassword、showWordLimit、elType (値がtextareaの場合、複数行のテキスト ボックス)
カスケード	el-cascader	beforeFilter、クリア可能、collapseTags、デバウンス、 無効、filterMethod、elLabel、オプション、プレースホルダー、popperClass、 小道具、セパレーター、showAllLevels、サイズ、elValue
ColorPicker カラーピッカー	el-color-picker	colorFormat、事前定義、アルファを表示
入力番号	el-input-number	最小、最大、ステップ、ステップ厳密、精度、無効
レート	el-rate	allowHalf,colors,disabledVoidColor,disabledVoidIconClass ,highThreshold,iconClasses,max,lowThreshold,showScore,showText, テキスト、テストカラー、voidColor、voidIconClass
選択	el-select	allowCreate、クリア可能、collapseTags、フィルタリング可能、無効、複数
スライダー	el-slider	formatTooltip,min,marks,max,scoreTemplate, showTooltip、ステップ、showStops、showInput、showInputControls、 範囲、垂直、高さ
スイッチ	el-switch	activeText,inactiveText,activeColor,inactiveColor、無効

必須フィールド+v0.2.5

required prop が element-ui のel-form-itemコンポーネントに追加されると、 FormulateInputの検証ルールがサポートしている限り*このフィールドが必須であることをユーザーに通知します。 requiredが含まれている場合は、この赤い*がデフォルトで追加されます。これを表示したくない場合は、 FormulateInputでrequiredTipプロパティをfalseに設定できます。

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

既知の問題

• プロジェクトのメンテナーは vue3 との互換性に重点を置いており、現在問題や PR に対処する時間がありませんが、プロジェクト全体では vue2 をベースにした完全な単体テストが行​​われているため、安心して使用できます。
• 編集フォームに画像フォーム フィールドがある場合、インターフェイスを呼び出して画像データをフォームに割り当てた後、フォームは画像をレンダリングしません。一時的な解決策は、 formulate-formにv-if="loadForm"追加することです。 formulate-formコンポーネントv-if="loadForm" loadFormのデフォルト値はfalseに設定されます。インターフェイスがデータを返した後、イメージをレンダリングする目的を達成するためにtrueに設定します。

書類

vueformulate のドキュメントを表示する

ライセンス

マサチューセッツ工科大学

VS Code コードプロンプトプラグイン

開発を支援する vscode プラグインが起動されました。formula-el-helper をクリックしてインストールできます。

星

役立つと思われる場合は、プロジェクトに星を付けてください^_^

関連する推奨事項

• Vue Formulate Helper : Vue Formulate 用の VS Code コード プロンプト プラグイン