iviewは動的なフォームとカスタム検証期間の重複を実装します

<テンプレート lang="html">
 <divクラス="">

    <フォーム
      ref="フォーム検証"
      :model="フォーム検証"
      :rules="ルールを検証"
      :ラベル幅="100"
      :label-colon="true"
    >
   <フォーム項目
    v-for="(item, index) in formValidate.showTimeDurations"
    :key="インデックス"
    :prop="'showTimeDurations[' + インデックス + '].値'"
    :label="'期間を表示' + (インデックス + 1)"
   >
    <行>
     <タイムピッカー
      タイプ="時間範囲"
      v-model="item.value"
      配置="下端"
      placeholder="期間を選択してください"
      スタイル="幅: 400px;"
      :disabled="編集不可"
      </タイムピッカー>
     <ボタン shape="circle" icon="md-close" @click="handleRemove(index)" style="margin-left: 10px;"></Button>
    </行>
   </フォーム項目>
   <FormItem style="width: 500px;" v-if="formValidate.showTimeDurations.length < 3">
    <Button type="dashed" long @click="handleAddDuration" icon="md-add">表示期間を追加</Button>
   </フォーム項目>
   </フォーム>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前: 'banner_new',
 データ（） {
  戻る {
   フォーム検証: {
    showTimeDurations: [{値: ['','']}]
   }
  }
 },
 メソッド: {
  ハンドル追加期間() {
   this.formValidate.showTimeDurations.push({値: ['','']})
  },
  ハンドル削除(インデックス) {
   this.formValidate.showTimeDurations.splice(インデックス、1)
  }
 }
}
</スクリプト>

<style lang="css" スコープ>
</スタイル> 

 <フォーム項目 label="名前" prop="タイトル" style="幅: 500px;">
    <Input v-model="formValidate.title" :disabled="isDisEdit" :placeholder="'スライドショーの名前を入力してください (最大 50 文字)'" maxlength="50" show-word-limit></Input>
  </フォーム項目>
  ...
  <行タイプ="flex" justify="start" style="margin-top: 20px;">
    <Button type="primary" style="width: 100px; margin-left: 20px;" v-if="isCanSave" @click="handleSubmit('formValidate')">保存</Button>
  </行>

  メソッド: {
    handleSubmit(フォーム) {
      // 検証メソッドを呼び出すと検証が実行されます this.$refs[form].validate(validate => {
        // 検証が成功したかどうかの検証=true/false})
    },
  }

ルール検証: {
  タイトル：
    {
      必須: true、
      メッセージ: 'スライドショーの名前を入力してください'
      トリガー: 'ぼかし'
    },
    {
      タイプ: '文字列',
      最大: 50,
      メッセージ: '50文字以内、中国語/文字/数字/一般文字'、
      トリガー: '変更'
    }
  ]、

タイトル: [{{ 必須: true、メッセージ: '画像名を入力してください'、トリガー: 'ぼかし'}}]

データ（） {
  constdurationValidator = (ルール、値、コールバック) => {
    if(this.isShowTimePicker && value.toString() === ',') {
      callback(new Error('表示期間を選択してください'));
    }そうでない場合(値[0] === 値[1]) {
      callback(新しいエラー('正しい期間を選択してください'))
    }else if(!showTimeDurationsJudge(this.formValidate.showTimeVOS)){
      callback(新しいエラー('期間を繰り返すことはできません'))
    }それ以外 {
      折り返し電話（）
    }
  };
  constdurationValidate = [{ バリデータ:durationValidator, トリガー: 'blur' }];
  戻る {
    ルール検証: {
      'showTimeDurations[0].value': 期間の検証、
      'showTimeDurations[1].value': 期間検証、
      'showTimeDurations[2].value': 期間検証、
    }
  }
}

定数ジャッジ = (a1,a2) => {
 結果 = false とする
  定数 start1 = moment(a1[0],"HH:mm:ss").valueOf()
  定数 end1 = moment(a1[1],"HH:mm:ss").valueOf()
  定数 start2 = moment(a2[0],"HH:mm:ss").valueOf()
  定数 end2 = moment(a2[1],"HH:mm:ss").valueOf()

  開始1 == 開始2の場合
    偽を返す
  }それ以外の場合(開始1 > 開始2) {
    結果 = 開始1 > 終了2
  }それ以外 {
    結果 = 終了1 < 開始2
  }
  結果を返す
}

'moment' から moment をインポートする

エクスポートconst showTimeDurationsJudge = (期間) => {
 judgeResult = true とします
 期間 && 期間.長さ > 1 の場合 {
  for(let i=0;i<durations.length-1;i++){
   for(j=i+1;j < 期間.長さ;j++) {
       判定結果 = 判定結果 && 判定(期間[i].値、期間[j].値)
     }
  }
 }
 判定結果を返す
}

定数ジャッジ = (a1,a2) => {
 結果 = false とする
  定数 start1 = moment(a1[0],"HH:mm:ss").valueOf()
  定数 end1 = moment(a1[1],"HH:mm:ss").valueOf()
  定数 start2 = moment(a2[0],"HH:mm:ss").valueOf()
  定数 end2 = moment(a2[1],"HH:mm:ss").valueOf()

  開始1 == 開始2の場合
    偽を返す
  }それ以外の場合(開始1 > 開始2) {
    結果 = 開始1 > 終了2
  }それ以外 {
    結果 = 終了1 < 開始2
  }
  結果を返す
}