uniapp 组件封装

uniapp 10 月前 0 4

本文介绍: 【代码】uniapp 组件封装。

1. uniapp 组件封装时间戳格式化为星期

1.1. components/m-week.vue

在这里插入图片描述

<template>
	<text>{{week}}</text>
</template>
<script>
	export default {
		props: {
			'time': String
		},
		mounted(e) {
			this.week = this.getWeek(Number(this.time))
		},
		data() {
			return {
				week: ''
			}
		},
		methods: {
			// 通过时间戳计算星期，如 getWeek(1706190315813)，得到 周三  
			getWeek(strDate, type) {
				let index = new Date(strDate).getDay();
				let weekList = []
				if (type === '星期') {
					weekList = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				} else {
					weekList = ["周天", "周一", "周二", "周三", "周四", "周五", "周六"];
				}
				return weekList[index];
			}
		}
	}
</script>

1.2. 使用

 import M_week from '../../components/m-week.vue'

  components: {
            M_week
    },

 <M_week :time='item.time'></M_week>

1.3. 完整代码

<template>
    <view>
        <M_week :time='item.time'></M_week>
    </view>
</template>

<script>
    import M_week from '../../components/m-week.vue'

    export default {
        components: {
            M_week
        },
        data() {
            return {}
        },
        methods: {}
    }
</script>

<style>

</style>