VueはElementUIのフォームサンプルコードを模倣する

<テンプレート>
 <div>
 <input :value="値" @input="onInput" v-bind="$attrs" />
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 inheritAttrs: false, // トップレベルのコンテナがプロパティを継承しないようにする props: {
 価値： {
 タイプ: 文字列、
 デフォルト： ""
 }
 },
 データ（） {
 戻る {};
 },
 メソッド: {
 入力時(e) {
 // 親コンポーネントに値の変更を通知します this.$emit("input", e.target.value);
 
 // FormItem に検証を実行するよう通知します // Input コンポーネントと FormItem コンポーネントの間に世代が存在する可能性があるため、この記述方法は堅牢ではありません this.$parent.$emit("validate");
 }
 }
};
</スクリプト>

<スタイル スコープ></style>

<テンプレート>
 <セクション>
 <input type="checkbox" :checked="チェック済み" @change="onChange" />
 </セクション>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
 小道具: {
 チェック済み:
 タイプ: ブール値、
 デフォルト: false
 }
 },
 モデル： {
 プロパティ: "チェック済み",
 イベント: 「変更」
 },
 メソッド: {
 onChange(e) {
 this.$emit("change", e.target.checked);
 this.$parent.$emit("検証");
 }
 }
};
</スクリプト>
<style スコープ lang="less"></style>

<テンプレート>
 <div class="formItem-wrapper">
 <div class="content">
 <label v-if="label" :style="{ width: labelWidth }">{{ label }}：</label>
 <スロット></スロット>
 </div>
 <p v-if="errorMessage" class="errorStyle">{{ errorMessage }}</p>
 </div>
</テンプレート>

<スクリプト>
「async-validator」からスキ​​ーマをインポートします。

エクスポートデフォルト{
 挿入: ["formModel"],
 小道具: {
 ラベル: {
 タイプ: 文字列、
 デフォルト： ""
 },
 プロパティ: 文字列
 },
 データ（） {
 戻る {
 エラーメッセージ: "",
 ラベル幅: this.formModel.labelWidth
 };
 },
 マウント() {
 // 検証イベントをリッスンし、検証を実行します this.$on("validate", () => {
 これを検証します。
 });
 },
 メソッド: {
 検証() {
 // コンポーネント検証を実行する // 1. データを取得する const values ​​= this.formModel.model[this.prop];
 // 2. 検証ルールを取得する const rules = this.formModel.rules[this.prop];
 // 3. 検証を実行する const schema = new Schema({
 [this.prop]: ルール
 });

 // パラメータ 1 は値、パラメータ 2 は検証エラー オブジェクトの配列です。// 検証は Promise<Boolean> を返します。
 schema.validate({ [this.prop]: values ​​}, errors => { を返します。
 if (エラー) {
 this.errorMessage = エラー[0].メッセージ;
 } それ以外 {
 this.errorMessage = "";
 }
 });
 }
 }
};
</スクリプト>

<style スコープ lang="less">
@ラベル幅: 90px;

.formItemラッパー{
 パディング下部: 10px;
}
。コンテンツ {
 ディスプレイ: フレックス;
}
.errorStyle {
 フォントサイズ: 12px;
 色: 赤;
 マージン: 0;
 左パディング: @labelWidth;
}
</スタイル>

// 1. データを取得する const values ​​= this.formModel.model[this.prop];

// 2. 検証ルールを取得する const rules = this.formModel.rules[this.prop];

<テンプレート>
 <div>
 <スロット></スロット>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 提供する（） {
 戻る {
 formModel: this // 検証データとルールを取得するために、Form インスタンスを FormItem などの子孫に渡します};
 },
 小道具: {
 モデル： {
 タイプ: オブジェクト、
 必須: true
 },
 ルール:
 タイプ: オブジェクト
 },
 ラベル幅: 文字列
 },
 データ（） {
 戻る {};
 },
 メソッド: {
 検証(cb) {
 // グローバル検証を実行します // マップの結果は Promise の配列です const tasks = this.$children.filter(item => item.prop).map(item => item.validate());
 // 検証済みとみなされるには、すべてのタスクが正常に検証される必要があります。Promise.all(tasks)
 .then(() => {
 cb(真);
 })
 .catch(() => {
 cb(偽);
 });
 }
 }
};
</スクリプト>

<スタイル スコープ></style>

<テンプレート>
 <div>
 <フォーム:model="formModel":rules="rules"ref="loginForm"label-width="90px">
 <FormItem label="ユーザー名" prop="ユーザー名">
 <Input v-model="formModel.username"></Input>
 </フォーム項目>
 <FormItem label="パスワード" prop="パスワード">
 <入力タイプ="パスワード" v-model="formModel.パスワード"></入力>
 </フォーム項目>
 <FormItem label="パスワードを記憶する" prop="記憶する">
 <チェックボックス v-model="formModel.remember"></チェックボックス>
 </フォーム項目>
 <フォーム項目>
 <button @click="onLogin">ログイン</button>
 </フォーム項目>
 </フォーム>
 </div>
</テンプレート>

<スクリプト>
「@/components/form/Input」からInputをインポートします。
'@/components/form/CheckBox' から CheckBox をインポートします。
"@/components/form/FormItem" から FormItem をインポートします。
"@/components/form/Form" からフォームをインポートします。

エクスポートデフォルト{
 データ（） {
 const validName = (ルール、値、コールバック) => {
 if (!値) {
 callback(new Error("ユーザー名は空にできません"));
 } そうでない場合 (値 !== "admin") {
 callback(new Error("ユーザー名エラー - admin"));
 } それ以外 {
 折り返し電話（）;
 }
 };
 const validatePass = (ルール、値、コールバック) => {
 if (!値) {
 コールバック(false);
 } それ以外 {
 折り返し電話（）;
 }
 };
 戻る {
 フォームモデル: {
 ユーザー名: "",
 パスワード: "",
 覚えておいてください: 間違いです
 },
 ルール:
 ユーザー名: [{ 必須: true、バリデータ: validatorName }],
 パスワード: [{ 必須: true, メッセージ: "パスワードが必要です" }],
 記憶: [{ 必須: true、メッセージ: "パスワードを記憶する必要があります", 検証: v​​alidator: validPass }]
 }
 };
 },
 メソッド: {
 ログイン時() {
 this.$refs.loginForm.validate(isValid => {
 有効かどうか
 alert("ログインに成功しました");
 } それ以外 {
 alert("ログインに失敗しました");
 }
 });
 }
 },
 コンポーネント:
 入力、
 チェックボックス、
 フォーム項目、
 形状
 }
};
</スクリプト>

<スタイル スコープ></style>

ディスパッチ(イベント名、データ) {
 親を this.$parent とします。
 // 親要素を検索する while (parent) {
 // 親要素は $emit parent.$emit(eventName, data); によってトリガーされます。
 // 親要素を再帰的に検索します。parent = parent.$parent;
 }
}

エクスポートデフォルト{
 メソッド: {
 ディスパッチ(イベント名、データ) {
 親を this.$parent とします。
 // 親要素を検索する while (parent) {
 // 親要素は $emit parent.$emit(eventName, data); によってトリガーされます。
 // 親要素を再帰的に検索します。parent = parent.$parent;
 }
 }
 }
};

<テンプレート>
 <div>
 <input :value="値" @input="onInput" v-bind="$attrs" />
 </div>
</テンプレート>

<スクリプト>
emmiter を "@/mixins/emmiter" からインポートします。

エクスポートデフォルト{
 inheritAttrs: false, // トップレベルのコンテナ継承属性を避ける mixins: [emmiter],
 小道具: {
 価値： {
 タイプ: 文字列、
 デフォルト： ""
 }
 },
 データ（） {
 戻る {};
 },
 メソッド: {
 入力時(e) {
 // 親コンポーネントに値の変更を通知します this.$emit("input", e.target.value);
 
 // FormItem に検証を実行するように通知します // Input コンポーネントと FormItem コンポーネントの間に世代が存在する可能性があるため、この方法は堅牢ではありません // this.$parent.$emit("validate");
 
 this.dispatch("validate"); // レベル間の問題を解決するために、mixin で emmiter のディスパッチを使用します}
 }
};
</スクリプト>

<スタイル スコープ></style>