vue开发 status组件 根据参数显示不同的内容

/**
* @Author: 858834013@qq.com
* @Name: status
* @Date: 2022-04-23
* @Desc: 1. 待审核, 2.审核中, 3.出库中, 4.已完成
*/
<template>
	<div>
		<div v-if="status==1" class="statuscom1 ">
			待审核
		</div>
		<div v-if="status==2" class="statuscom1 statuscom2">
			审核中
		</div>
		<div v-if="status==3" class="statuscom1 statuscom3">
			出库中
		</div>
		<div v-if="status==4" class="statuscom1 statuscom4">
			已完成
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: ['']
			}
		},
		props: {
			status: {
				type: String | Number,
				default () {
					return 1;
				}
			},
		},
		computed: {
			now: function() {
				return Date.now()
			}
		},
		methods: {}
	}
</script>

<style scoped lang="scss">
	.statuscom1 {
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FA8C16;
	}

	.statuscom2 {
		color: #73A1F8 !important;
	}

	.statuscom3 {
		color: #57BA77 !important;
	}

	.statuscom4 {
		color: #A4A8AB !important;
	}
</style>