vue显示当天日期小组件

<template>
	<view>
		<view class="container" :style="{'color':color}">
			<view class="index-container">
				<text class="index">{{day}}</text>
				<view class="line" :style="{'background-color':color}"></view>
			</view>
			<view class="date-container">
				<text class="month">{{month}}</text>
				<text class="year">{{year}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "zy-date",
		data() {
			return {
				months: [
					'一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月',
				 '十二月'
				],
				year: 0,
				month: '',
				day: ''
			
			};
		},
		props: {
			color: {
				type: String,
				default: '#000'
			}
		},
		mounted() {
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth();
			let day = date.getDate();

			this.year = year;
			this.month = this.months[month];
			this.day = day;
		},
	}
</script>

<style lang="scss">
	.container {
		height: 60rpx;
		display: inline-flex;
		flex-direction: row;
	}

	.index-container {
		display: flex;
		flex-direction: row;
		align-items: baseline;
	}

	.plain {
		font-size: 32rpx;
	}


	.index {
		font-size: 60rpx;
		line-height: 60rpx;
		font-weight: 800;
		margin-right: 14rpx;
	}

	.line {
		width: 2rpx;
		height: 44rpx;
		margin-right: 14rpx;
		// border-left:1px solid #fff;
	}


	.date-container {
		display: flex;
		flex-direction: column;
		margin-top: 6rpx;
	}

	.month {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.year {
		font-size: 20rpx;
	}
</style>

在页面中引用：

<zy-date color='#fff'></zy-date>

//使用自己的正确路径
import zyDate from '../../zy-date/zy-date.vue'


components:{
	zyDate
},