目次
プロジェクト シナリオ: Data TimePicker 日付ピッカーの使用
問題の説明:日付セレクターのショートカット選択操作
理由分析:この点とオブジェクト インスタンス メソッド
最終エフェクト:コードとエフェクト
プロジェクトのシナリオ:
最近のプロジェクトでは、時間を処理するために多数の日付と時刻のセレクターを使用する必要があります。その中で最も重要なのは、(指定された時間の) 過去 1 時間、過去 2 時間など、既存の特定の時間データに基づいて迅速な選択操作を実行することです。
問題の説明:
要素内の DateTimePicker 日時ピッカーの時間範囲のショートカット選択は、現在の時刻 new Date() の時間範囲のクイック選択の操作にすぎません。これは現在のプロジェクト要件と一致しませんが、ショートカットはピッカー オプション で直接設定されており 、現在時刻 new Data() に対してのみ有効ですが、取得した時間設定にエラーがあります
エラーは次のように書かれます。
1. 直接代入はDataのインスタンスメソッドを使用します。
// 创建时间选择快捷方式
selectTime() {
// var _this = this
this.pickerOptions.shortcuts = [{
text: '最近半小时',
onClick(picker) {
const end = this.newTime
const start = this.newTime
start.setTime(start.getTime() - 1800 * 1000 * 0.5)
end.setTime(end.getTime() + 1800 * 1000 * 0.5)
picker.$emit('pick', [start, end])
}
},次のエラーが発生します。
2. Dataのインスタンスメソッドを使用して日付オブジェクトに変換します。
// 创建时间选择快捷方式
selectTime() {
// var _this = this
this.pickerOptions.shortcuts = [{
text: '最近半小时',
onClick(picker) {
const end = new Data(this.newTime)
const start = new Data(this.newTime)
start.setTime(start.getTime() - 1800 * 1000 * 0.5)
end.setTime(end.getTime() + 1800 * 1000 * 0.5)
picker.$emit('pick', [start, end])
}
},インターフェースから返された時刻を取得できません:
原因分析:
分析の結果、次の 2 つのエラーがあることがわかりました。
1:これは問題を示しています(クリックして詳細を表示)
pickerOptions観察すると、オブジェクトのメソッドshortcuts のこの点とpickerOptions，外部関数のこの点が異なることがわかります。selectTime()
2: オブジェクトメソッドの問題
このインターフェイスは Data オブジェクトではなく文字列を返します。Data オブジェクトのメソッドを呼び出す方法はありません。object オブジェクトと同様に、そのプロトタイプには対応するメソッドがあり、そのインスタンスによってのみ呼び出すことができます。インターフェイスによって返された文字列が存在しない場合、Data オブジェクトのプロトタイプ チェーンにはメソッドは存在しません。
解決：
1: これを次を指すように変更します。
var _this = これ
2: 文字列形式の日付を日付オブジェクトに変換する (例)
var strTime=”2011-04-16”; // 文字列の日付形式
var date= new Date(strTime); //Data() に変換します。
上記の変更により、要素内の DateTimePicker 日付時刻セレクターと同じショートカット を構成して、時間範囲の素早い選択を実現できます 。コードは次のようになります。
html部分:
<el-date-picker
v-model="fortTimeValue"
size="small"
type="datetimerange"
:picker-options="pickerOptions" //当前时间日期选择器特有的选项参考
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss" //绑定值的格式
format="yyyy-MM-dd HH:mm:ss"
@change="fortTimeChangeView" //用户确认选定的值时触发
align="center"
style="margin-bottom: 20px"
>
</el-date-picker>js部分：
//data() 中对应数据
// 卡点时间
fortTimeValue: [],
// 存储当前卡点时间
newTime: '',
// 时间选择器参数
pickerOptions: {
// 时间选择快捷方式
shortcuts: [],
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6
}
},
// methods 方法中对应处理函数
// 创建时间选择快捷方式
selectTime() {
var _this = this
_this.pickerOptions.shortcuts = [{
text: '最近半小时',
onClick(picker) {
const end = new Date(_this.newTime)
const start = new Date(_this.newTime)
start.setTime(start.getTime() - 1800 * 1000 * 0.5)
end.setTime(end.getTime() + 1800 * 1000 * 0.5)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一小时',
onClick(picker) {
const end = new Date(_this.newTime)
const start = new Date(_this.newTime)
start.setTime(start.getTime() - 3600 * 1000 * 0.5)
end.setTime(end.getTime() + 3600 * 1000 * 0.5)
picker.$emit('pick', [start, end])
}
}, {
text: '最近两小时',
onClick(picker) {
const end = new Date(_this.newTime)
const start = new Date(_this.newTime)
start.setTime(start.getTime() - 3600 * 1000)
end.setTime(end.getTime() + 3600 * 1000)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三小时',
onClick(picker) {
const end = new Date(_this.newTime)
const start = new Date(_this.newTime)
start.setTime(start.getTime() - 3600 * 1000 * 1.5)
end.setTime(end.getTime() + 3600 * 1000 * 1.5)
picker.$emit('pick', [start, end])
}
}]
},
最終的な効果:
上記のショートカット の構成により 、時間範囲をすばやく選択でき、その効果は次のようになります。
バックグラウンドから返された時間データを時間セレクターに表示し、時間に対してショートカット操作を実行します。
「過去 2 時間以内に高速」ショートカット操作効果をクリックします。
上記は、プロジェクト中に私が遭遇した需要の問題と簡単な解決策です。少し単純なところもあります。お役に立てば幸いです。何か問題がある場合は、ご連絡ください...