vueモバイルフォームコンポーネントのパッケージング

プロジェクトでvant-uiを使ってフォームを書いていると、コンポーネント間の呼び出しが面倒に感じ、ページ内にフォームが増えるとメンテナンス性が少し悪くなり、下の写真のようなフォームに出会った時はクラッシュしましたこの手のフォームはプロジェクト内にたくさんあり、コンポーネント間のデータロジックやチェックなどは自分で対応する必要があります。

必要条件

上記の例では、私はフォームの処理を容易にするために、カプセル化のレイヤーを行うためにフォームコンポーネントをvant-ui、現在の既存の機能は次のとおりです：

1. 現在、統合された入力ボックス、デジタル入力ボックス、ラジオボックス、チェックボックス、時間セレクタ、アドレスセレクタ、ドロップダウンセレクタ、スイッチボタン、プレーンテキスト表示、ファイルアップロード、CAPTCHAコンポーネントを持って、コンポーネントは、コンポーネントの導入を開く2番目のサポートの場合を満たしていません；
2. このコンポーネントは、JSON設定を使用してコンポーネントを呼び出します；
3. 面倒なチェックサム関数の組み込みの統合は、コンポーネントの使用は、チェックサムの問題を考慮することはできません、チェックサムルールも拡張するためにカスタマイズすることができ、関連するフォームのチェックサムを満たしながら；
4. コンポーネント間のデータ依存関係を手で書く必要はなく、コンポーネントが内部でデータを処理し、統一された方法で外部に公開します。

設定パラメータ

const model = {
 // 以下の3つのテキスト入力例は、関連するチェックサムである。
 // 関連するチェックサムは{rule}:@{field},@{field} 
 // フィールドを受け取る@{rule} 
 text1: {
 value: '',
 rules: {
 label: 'テキスト1',
 type: 'VInput',
 vRules: 'required|custom:@text2,@text3',
 placeholder: 'テキストを入力する,
 errMsg: 'テキストを入力する
 }
 },
 text2: {
 value: '',
 rules: {
 label: 'テキスト2',
 type: 'VInput',
 vRules: 'required|@custom',
 placeholder: 'テキストを入力する,
 errMsg: 'テキストを入力する
 }
 },
 text3: {
 value: '',
 rules: {
 label: 'テキスト 3',
 type: 'VInput',
 vRules: 'required|@custom',
 placeholder: 'テキストを入力する,
 errMsg: 'テキストを入力する
 }
 },
 // タイムピッカー
 date: {
 value: Date.now(),
 rules: {
 label: ' ,
 // datetime、year-month、date、timeの4種類がある。
 type: 'VDatePicker|datetime',
 // データフォーマットの処理：タイムスタンプ timestamp、その他の用途：https://.com/xuanmos/datejs
 valueFormat: 'yyyy-MM-dd'
 }
 },
 // イメージのアップロード
 file: {
 // リストを表示する
 value: [{ path: 'https://..xin/test/.png' }],
 rules: {
 label: 'ファイルのアップロード',
 type: 'VUpload',
 action: 'xxx',
 accept: 'image/png',
 multiple: true,
 name: 'file',
 headers: {},
 // 追加データをアップロードする
 data: {
 dir: 'test'
 },
 // urlフィールドを特定の属性値として指定するカスタム設定項目
 props: {
 url: 'path'
 }
 }
 }
}

コンポーネント別の使用方法：

Github

Npm

オンライン・プレビューは編集可能：