欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue封裝DateRangePicker組件流程詳細(xì)介紹

 更新時(shí)間:2022年11月14日 08:42:15   作者:騎上我心愛的小摩托  
在后端管理項(xiàng)目中使用vue來進(jìn)行前端項(xiàng)目的開發(fā),但我們都知道Vue實(shí)際上無法監(jiān)聽由第三方插件所引起的數(shù)據(jù)變化。也無法獲得JQuery這樣的js框架對(duì)元素值的修改的。而日期控件daterangepicker又基于JQuery來實(shí)現(xiàn)的

前言

日期選擇器在實(shí)際使用中,可能會(huì)要求默認(rèn)固定日期、回顯日期或者是時(shí)間固定點(diǎn)(00:00:00到23:59:59)

一、封裝el-date-picker

<template>
	<div>
		<el-date-picker
			@change="handleChange"
			v-model="dateValue"
			type="daterange"
			align="right"
			unlink-panels
			:clearable=false
			value-format="timestamp"
			range-separator="至"
			start-placeholder="開始日期"
			end-placeholder="結(jié)束日期"
			:picker-options="pickerOptions"
			:default-time="['00:00:00', '23:59:59']">
		</el-date-picker>
	</div>
</template>
<script>
	export default {
		name: 'DateRangePicker',
		props: {
			defaultTimeRange: {
				type: Object,
				default() {
				return {};
			}
		}
	},
	data() {
		return {
		dateValue: '',
		pickerOptions: {
			shortcuts: [{
				text: '最近一周',
				onClick(picker) {
					const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
					const start = new Date(new Date().toLocaleDateString()); ;
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
					picker.$emit('pick', [start, end]);
				}
			}, 
			{
				text: '最近一個(gè)月',
				onClick(picker) {
					const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
					const start = new Date(new Date().toLocaleDateString()); ;
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
					picker.$emit('pick', [start, end]);
				}
			}, 
			{
				text: '最近三個(gè)月',
				onClick(picker) {
					const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
					const start = new Date(new Date().toLocaleDateString()); ;
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
					picker.$emit('pick', [start, end]);
					}
				}]
			}
		};
	},
	mounted() {
		this.dateValue = [new Date(this.defaultTimeRange.from), new Date(this.defaultTimeRange.to)];
	},
	methods: {
		handleChange(time) {
			time = time || [];
			this.$emit('handleChange', {start_time: time[0], end_time: time[1]});
		}
	}
};
</script>

二、父組件中進(jìn)行引用

父組件index.vue

<DateRangePicker @handleChange="handleTime" :default-time-range="defaultTimeRange"/>
<script>
import { generateTodayDefaultTimeRange } from '@/utils/utils';
export default {
	data () {
		return {
			defaultTimeRange: { ...generateTodayDefaultTimeRange() }
		}
	}
	methods:{
		handleTime(time) {
			//console.log(time)獲取選擇時(shí)間
		}
	}
}
</script>

引用JSutils.js

// 今日默認(rèn)時(shí)間范圍
export function generateTodayDefaultTimeRange(date = new Date()) {
  const to = formatDateTime(new Date(date.getTime()));
  const from = formatDateTime(new Date(date.getTime()));
  return { from, to };
}

總結(jié)

  • 綜上所述,可見當(dāng)前日期范圍選擇器默認(rèn)時(shí)間是今天
  • default-time設(shè)置時(shí)間點(diǎn)固定為起始的00:00:00到23:59:59
  • 快捷項(xiàng)也設(shè)置成當(dāng)前模式,自定義起始和結(jié)束時(shí)間文案
  • 當(dāng)前的獲取時(shí)間格式為時(shí)間戳形式value-format="timestamp"

到此這篇關(guān)于Vue封裝DateRangePicker組件流程詳細(xì)介紹的文章就介紹到這了,更多相關(guān)Vue DateRangePicker內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue使用echarts實(shí)現(xiàn)地圖的方法詳解

    vue使用echarts實(shí)現(xiàn)地圖的方法詳解

    這篇文章主要為大家詳細(xì)介紹了vue使用echarts實(shí)現(xiàn)地圖的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-03-03
  • Vue.directive 自定義指令的問題小結(jié)

    Vue.directive 自定義指令的問題小結(jié)

    這篇文章主要介紹了Vue.directive 自定義指令的問題小結(jié),需要的朋友可以參考下
    2018-03-03
  • vue3.0 的 Composition API 的使用示例

    vue3.0 的 Composition API 的使用示例

    這篇文章主要介紹了vue3.0 的 Composition API 的使用示例,幫助大家更好的理解和學(xué)習(xí)vue,感興趣的朋友可以了解下
    2020-10-10
  • vue全局引入公共的scss和@mixin與@include的使用方式

    vue全局引入公共的scss和@mixin與@include的使用方式

    這篇文章主要介紹了vue全局引入公共的scss和@mixin與@include的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • vue中?$forceUpdate的使用解析

    vue中?$forceUpdate的使用解析

    這篇文章主要介紹了vue中?$forceUpdate的使用解析,該方案是比較好的一種方式,比如說我們嘗試直接給某個(gè)??object??增加一個(gè)屬性,發(fā)現(xiàn)頁面上沒有效果;直接將length變成0來清空數(shù)組,下文詳細(xì)資料需要的小伙伴可以參考一下
    2022-04-04
  • vue-cli腳手架的.babelrc文件用法說明

    vue-cli腳手架的.babelrc文件用法說明

    這篇文章主要介紹了vue-cli腳手架的.babelrc文件用法說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中各屬性的詳解

    vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中各屬性的詳解

    這篇文章主要介紹了vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中的immediate、handler和deep屬性詳解,本文大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2018-09-09
  • 基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問題解決

    基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問題解決

    這篇文章主要介紹了基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問題解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • 在vue項(xiàng)目中使用Swiper插件詳解

    在vue項(xiàng)目中使用Swiper插件詳解

    這篇文章主要介紹了在vue項(xiàng)目中使用Swiper插件詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue2使用eventbus踩坑解決

    vue2使用eventbus踩坑解決

    這篇文章主要為大家介紹了vue2使用eventbus踩坑解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06

最新評(píng)論