Vue2 キューブUI 時間セレクターの詳細な説明

序文

Vue2 は、cube-ui タイムセレクターを統合します (基本的な知識がある人向け)

1. 需要と効果

必要

元の検索に検索時間を追加する必要があります。

効果

ここに画像の説明を挿入

2. コードの実装

index.vue(html)

<div class="header">
      <cube-input v-on:focus="showMinPicker('startTime')" v-model="startTime" placeholder="開始時間" :maxlength=30 style="width: 50%;"></cube-input>
      <span>宛</span>
      <cube-input v-on:focus="showMinPicker('endTime')" v-model="endTime" placeholder="終了時間" :maxlength=30 style="width: 50%;"></cube-input>
</div>

分析：

cube-input キューブに付属する入力ボックス。
v-on:focus="showMinPicker('startTime')" v-on はイベントをリッスンします。フォーカスとは、入力ボックスにフォーカスが当てられた後にこのイベントがトリガーされることを意味します。無効になっている場合は、トリガーされません。
v-model 双方向バインディング（時間表示用）
maxlength 最大長

日付

データ （） {
    戻る {
      // 開始時刻 startTime: ''、
      // 終了時刻 endTime: ''、
      // 時間識別: ''
    }
  }

方法

メソッド: {
    // 選択開始時刻をリッスンする showMinPicker (time) {
      if (!this.minPicker) {
        this.minPicker = this.$createDatePicker({
          タイトル: 「時間を選択」
          表示: true、
          // 最小時間 min: new Date(2000, 0, 1),
          // 最大時間 max: new Date(2099, 12, 1),
          // 現在の時刻値: new Date(),
          // 表示形式 format: {
            年: 'YYYY'、
            月: 'MM'、
            日付: 'DD'
          },
          //表示する列数 columnCount: 3,
          // 選択された時間が決定された後 onSelect: this.selectHandler,
          // キャンセルする時間を選択した後 onCancel: this.cancelHandler
        })
      }
      // 時間識別を選択 this.timeIdentifying = time
      // this.minPicker.show() を表示します
    },
    // 選択された時間の後の 3 つのパラメータは異なる時間形式であり、必要に応じて決定できます。selectHandler (selectedTime、selectedText、formatedTime) {
      時間を = '' にする
      for (let index = 0; index < selectedText.length; index++) {
        if (index === (selectedText.length - 1)) {
          時間 += 選択されたテキスト[インデックス]
        } それ以外 {
          時間 += 選択されたテキスト[インデックス] + '-'
        }
      }
      console.log('変更を開始します')
      if (this.timeIdentifying === 'startTime') {
        console.log('開始時刻の変更')
        this.startTime = 時間
      } そうでない場合 (this.timeIdentifying === 'endTime') {
        console.log('終了時間の変更')
        this.endTime = 時間
      }
      console.log('変更終了')
    },
    // イベントをキャンセル cancelHandler () {
      // 選択した時間をクリアします this.startTime = ''
      this.endTime = ''
    }
  }