获取当前时间，当前天气，全屏显示

显示的时间

<template>
	<div class="time-wrapper">{{ time }}</div>
</template>
<script>
import moment from 'moment'
export default {
data() {
	return {
	time: '',
		}
	},
created() {
	this.time = moment().format('YYYY-MM-DD HH:mm:ss') // 2022-07-15 16:49:27
	},
}

</script>

<style lang="scss" scoped>
.time-wrapper {
	color: #fff;
}
</style>

获取当前的天气状态

<template>
	<div>{{ info }}</div>
</template>
<script>
import axios from 'axios'
export default {
	data() {
		return {
			info: '',
		}
	},
	created() {
		axios.get('http://www.nmc.cn/rest/weather?stationid=58012').then(r => {
			const {
				data: { data },
			} = r
			// console.log(data)
			this.info = data.real.weather.info
		})
	},
}
</script>
<style scoped></style>

是否全屏显示

• 点击svg里面的小图片，isFullscreen默认状态是false，，如果是true就正常显示，如果是false就全屏显示。

<template>
	<div>
		<svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="click" />
	</div>
</template>

<script>
import screenfull from 'screenfull'

export default {
	name: 'screenfull',
	data() {
		return {
			isFullscreen: false,
		}
	},
	mounted() {
		this.init()
	},
	beforeDestroy() {
		this.destroy()
	},
	methods: {
		click() {
			if (!screenfull.isEnabled) {
				this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })
				return false
			}
			let refDiv = this.$parent.$refs.compreScreenFull || this.$parent.$refs.industryScreenFull
			if (refDiv) return screenfull.toggle(refDiv)
		},
		change() {
			this.isFullscreen = screenfull.isFullscreen
			this.$emit('isFullscreenSon', this.isFullscreen)
		},
		init() {
			if (screenfull.isEnabled) {
				screenfull.on('change', this.change)
			}
		},
		destroy() {
			if (screenfull.isEnabled) {
				screenfull.off('change', this.change)
			}
		},
	},
}
</script>

<style scoped>
.screenfull-svg {
	display: inline-block;
	cursor: pointer;
	fill: #5a5e66;
	width: 20px;
	height: 20px;
	vertical-align: 10px;
}
</style>