MyHeader.vue

<template>
	<div class="layout-header-container d-flex justify-content-between align-items-center p-3">
		<!-- 左侧 logo 和 标题区域 -->
		<div class="layout-header-left d-flex align-items-center user-select-none">
			<!-- logo -->
			<img class="layout-header-left-img" src="../../assets/kwan.png" alt="" />
			<!-- 标题 -->
			<h4 class="layout-header-left-title ml-3">kwan的解忧杂货铺</h4>
		</div>
		<h2 class="layout-header-left-title ml-3" :style="{ color: textColor }">{{ randomAlgorithmic.poetryText }}</h2>
		<el-row>
			<el-col :inline="true" :span="24">
				<el-button class="el-button-header" type="success" round @click="myHome">我的主页</el-button>
				<el-button class="el-button-header" type="primary" round @click="logout">退出登录</el-button>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import axios from 'axios'
export default {
	name: 'MyHeader',
	data() {
		return {
			randomAlgorithmic: {
				poetryText: '',
			},
			color: [
				'red',
				'blue',
				'green',
				'yellow',
				'purple',
				'orange',
				'pink',
				'brown',
				'cyan',
				'magenta',
				'maroon',
				'navy',
				'olive',
				'teal',
				'lime',
				'aqua',
				'silver',
				'gray',
				'white',
				'indigo',
				'violet',
				'lavender',
				'coral',
				'gold',
				'salmon',
				'turquoise',
				'orchid',
				'khaki',
				'slategray',
				'thistle',
				'burlywood',
				'cadetblue',
				'chartreuse',
				'chocolate',
				'crimson',
				'darkblue',
				'darkcyan',
				'darkgoldenrod',
				'darkgray',
				'darkgreen',
				'darkkhaki',
				'darkmagenta',
				'darkolivegreen',
				'darkorange',
				'darkorchid',
				'darkred',
				'darksalmon',
				'darkseagreen',
				'darkslateblue',
				'darkslategray',
				'darkturquoise',
				'darkviolet',
				'deeppink',
				'deepskyblue',
				'dodgerblue',
				'firebrick',
				'forestgreen',
				'fuchsia',
				'gold',
				'greenyellow',
				'hotpink',
				'indianred',
				'lawngreen',
				'lightcoral',
				'lightgreen',
				'lightpink',
				'lightsalmon',
				'lightseagreen',
				'lightskyblue',
				'lightslategray',
				'lightsteelblue',
				'mediumaquamarine',
				'mediumblue',
				'mediumorchid',
				'mediumpurple',
				'mediumseagreen',
				'mediumslateblue',
				'mediumspringgreen',
				'mediumturquoise',
				'mediumvioletred',
				'midnightblue',
				'orangered',
				'palegoldenrod',
				'palegreen',
				'paleturquoise',
				'palevioletred',
				'peru',
				'powderblue',
				'rosybrown',
				'saddlebrown',
				'seagreen',
				'sienna',
				'skyblue',
				'slateblue',
				'springgreen',
				'tan',
				'thistle',
				'tomato',
				'turquoise',
				'violet',
			],
			textColor: 'skyblue', // 初始字体颜色为黑色
			loading: false,
		}
	},
	watch: {
		'randomAlgorithmic.poetryText': {
			handler(newValue, oldValue) {
				if (newValue !== oldValue) {
					// 当值改变时，根据条件设置不同的字体颜色
					this.textColor = this.getRandomColor()
				}
			},
			deep: true,
		},
	},
	created() {
		//获取问题类型的枚举
		this.startInterviewRandomTimer()
	},
	destroyed() {
		//销毁的时候需要清理定时器
		this.stopInterviewRandomTimer()
	},
	methods: {
		logout() {
			// 1. 清空 token
			localStorage.removeItem('token')
			// 2. 跳转到登录页面
			this.$router.push('/login')
		},
		myHome() {
			// 新页面打开
			window.open('http://qinyingjie.top/')
		},
		async interviewRandom() {
			this.loading = true
			const { data: res } = await axios.get('http://localhost:8888/aphorismPoetry/random', { params: {} })
			if (res.code === 200) {
				this.randomAlgorithmic.poetryText = res.result.poetryText
			}
			this.loading = false
		},

		// 定时执行 interviewRandom 方法
		startInterviewRandomTimer() {
			this.interviewRandom() // 首次调用方法
			this.interviewRandomTimer = setInterval(() => {
				this.interviewRandom()
			}, 10000) // 5000 毫秒（5秒）为间隔
		},

		// 停止定时执行 interviewRandom 方法
		stopInterviewRandomTimer() {
			clearInterval(this.interviewRandomTimer)
		},
		getRandomColor() {
			// 从颜色数组中随机选取一个颜色
			const randomIndex = Math.floor(Math.random() * this.color.length)
			return this.color[randomIndex]
		},
	},
}
</script>

<style lang="less" scoped>
.layout-header-container {
	height: 60px;
	border-bottom: 1px solid #eaeaea;
}

.layout-header-left-img {
	height: 50px;
}
</style>