vue(29) : 时间工具_vue 时间工具类-优快云博客

本文链接：https://blog.youkuaiyun.com/Lxinccode/article/details/129690502
该博客主要讲述基于Element - UI进行开发。Element - UI常用于前端开发，结合Vue.js和JavaScript等技术，可开发出高效的前端界面，时间戳工具也可能在开发中发挥作用。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
基于element-ui开发
<template>
	<el-tabs v-model="activeName" @tab-click="handleClick">
		<el-tab-pane label="时间工具" name="first">
			<h3>当前时间</h3>
			<el-tag type="success" style="width: 200px;font-size: 18px;">{{ currentTime }}</el-tag>
			<el-button class="ml10" type="text" size="medium" v-clipboard:copy="currentTime"
				v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
			<i class="el-icon-bottom" style="cursor:pointer;" @click="timeD()"></i>

			<el-tag type="success" style="width: 153px;font-size: 18px;margin-left: 100px;">{{ currentTimeMillis }}
			</el-tag>
			<el-button class="ml10" type="text" size="medium" v-clipboard:copy="currentTimeMillis"
				v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
			<i class="el-icon-bottom" style="cursor:pointer;" @click="millisD()"></i>
			<h3>时间转时间戳</h3>
			<div>
				<el-input v-model="time1" style="width: 200px;font-size: 16px;" @input="time1c()"></el-input>
				<el-button class="ml10" type="text" size="medium" v-clipboard:copy="time1" v-clipboard:success="onCopy"
					v-clipboard:error="onError">复制</el-button>
				<el-input v-model="millis1" style="width: 200px;margin-left: 100px;font-size: 16px;"></el-input>
				<el-button class="ml10" type="text" size="medium" v-clipboard:copy="millis1"
					v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
			</div>
			<div style="margin-top: 20px;">
				<el-input v-model="time2" style="width: 200px;font-size: 16px;" @input="time2c()"></el-input>
				<el-button class="ml10" type="text" size="medium" v-clipboard:copy="time2" v-clipboard:success="onCopy"
					v-clipboard:error="onError">复制</el-button>
				<el-input v-model="millis2" style="width: 200px;margin-left: 100px;font-size: 16px;"></el-input>
				<el-button class="ml10" type="text" size="medium" v-clipboard:copy="millis2"
					v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
			</div>
			<div style="margin-top: 20px;">
				<el-input v-model="time3" style="width: 200px;font-size: 16px;" @input="time3c()"></el-input>
				<el-button class="ml10" type="text" size="medium" v-clipboard:copy="time3" v-clipboard:success="onCopy"
					v-clipboard:error="onError">复制</el-button>
				<el-input v-model="millis3" style="width: 200px;margin-left: 100px;font-size: 16px;"></el-input>
				<el-button class="ml10" type="text" size="medium" v-clipboard:copy="millis3"
					v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
			</div>
			<h3>时间戳转时间</h3>
			<div>
				<el-input v-model="millis4" style="width: 200px;font-size: 16px;" @input="millis4c()"></el-input>
				<el-button class="ml10" type="text" size="medium" v-clipboard:copy="millis4"
					v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
				<el-input v-model="time4" style="width: 200px;margin-left: 100px;font-size: 16px;"></el-input>
				<el-button class="ml10" type="text" size="medium" v-clipboard:copy="time4" v-clipboard:success="onCopy"
					v-clipboard:error="onError">复制</el-button>
			</div>
			<div style="margin-top: 20px;">
				<el-input v-model="millis5" style="width: 200px;font-size: 16px;" @input="millis5c()"></el-input>
				<el-button class="ml10" type="text" size="medium" v-clipboard:copy="millis5"
					v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
				<el-input v-model="time5" style="width: 200px;margin-left: 100px;font-size: 16px;"></el-input>
				<el-button class="ml10" type="text" size="medium" v-clipboard:copy="time5" v-clipboard:success="onCopy"
					v-clipboard:error="onError">复制</el-button>
			</div>
			<div style="margin-top: 20px;">
				<el-input v-model="millis6" style="width: 200px;font-size: 16px;" @input="millis6c()"></el-input>
				<el-button class="ml10" type="text" size="medium" v-clipboard:copy="millis5"
					v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
				<el-input v-model="time6" style="width: 200px;margin-left: 100px;font-size: 16px;"></el-input>
				<el-button class="ml10" type="text" size="medium" v-clipboard:copy="time6" v-clipboard:success="onCopy"
					v-clipboard:error="onError">复制</el-button>
			</div>
		</el-tab-pane>
		<!-- <el-tab-pane label="配置管理" name="second">1</el-tab-pane>
		<el-tab-pane label="角色管理" name="third">2</el-tab-pane>
		<el-tab-pane label="定时任务补偿" name="fourth">3</el-tab-pane> -->
	</el-tabs>
</template>
<script>
	export default {
		data() {
			return {
				activeName: 'first',
				currentTime: null,
				currentTimeMillis: null,
				time1: null,
				millis1: null,
				time2: null,
				millis2: null,
				time3: null,
				millis3: null,
				time4: null,
				millis4: null,
				time5: null,
				millis5: null,
				time6: null,
				millis6: null,
			};
		},
		created() {
			this.getNow()
			setInterval(() => {
				this.getNow()
			}, 1000);
			let time = new Date();
			this.millis1 = time.getTime().toString()
			this.time1 = this.dateFtt("yyyy-MM-dd hh:mm:ss", time);
			this.millis4 = time.getTime().toString()
			this.time4 = this.dateFtt("yyyy-MM-dd hh:mm:ss", time);
		},
		methods: {
			timeD() {
				let time = this.currentTime
				this.time1 = time
				this.millis1 = new Date(time).getTime().toString();
			},
			millisD() {
				let millis = this.currentTimeMillis
				this.millis4 = millis
				this.time4 = this.dateFtt("yyyy-MM-dd hh:mm:ss", new Date(parseInt(millis)));
			},
			time1c() {
				this.millis1 = new Date(this.time1).getTime().toString();
			},
			time2c() {
				this.millis2 = new Date(this.time2).getTime().toString();
			},
			time3c() {
				this.millis3 = new Date(this.time3).getTime().toString();
			},
			millis4c() {
				console.log(new Date(parseInt(this.millis4)))
				this.time4 = this.dateFtt("yyyy-MM-dd hh:mm:ss", new Date(parseInt(this.millis4)));
			},
			millis5c() {
				this.time5 = this.dateFtt("yyyy-MM-dd hh:mm:ss", new Date(parseInt(this.millis5)));
			},
			millis6c() {
				this.time6 = this.dateFtt("yyyy-MM-dd hh:mm:ss", new Date(parseInt(this.millis6)));
			},
			// 复制成功
			onCopy(e) {
				this.$message({
					message: '复制成功',
					type: 'success'
				});
			},
			// 复制失败
			onError(e) {
				this.$message.error('复制失败');
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			getNow() {
				let time = new Date();
				this.currentTime = this.dateFtt("yyyy-MM-dd hh:mm:ss", time);
				this.currentTimeMillis = time.getTime().toString()
			},
			crtTimeFtt(value) {
				var crtTime = new Date(value);
				return this.dateFtt("yyyy-MM-dd hh:mm:ss", crtTime); //转化成需要的格式     
			},
			dateFtt(fmt, date) { //author: meizz   
				var o = {
					"M+": date.getMonth() + 1, //月份   
					"d+": date.getDate(), //日   
					"h+": date.getHours(), //小时   
					"m+": date.getMinutes(), //分   
					"s+": date.getSeconds(), //秒   
					"q+": Math.floor((date.getMonth() + 3) / 3), //季度   
					"S": date.getMilliseconds() //毫秒   
				};
				if (/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
				for (var k in o)
					if (new RegExp("(" + k + ")").test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k])
							.length)));
				return fmt;
			}
		}
	};
</script>