当前位置: 首页 > article >正文

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>


http://www.kler.cn/a/227777.html

相关文章:

  • three.js+WebGL踩坑经验合集(4.1):THREE.Line2的射线检测问题(注意本篇说的是Line2,同样也不是阈值方面的问题)
  • Ubuntu 18.04安装Emacs 26.2问题解决
  • 数据结构 前缀中缀后缀
  • 线段树 算法
  • 如何用函数去计算x年x月x日是(C#)
  • C++ 堆栈分配的区别
  • nodejs学习计划--(八)MongoDB数据库
  • vue基本理解
  • 09. BI - 数据可视化,如何进行基本图形绘制
  • 基于spring boot实现邮箱发送和邮箱验证
  • C++泛编程(3)
  • 【Linux取经路】进程控制——程序替换
  • Qt之使用Qt内置图标
  • ElementUI Data:Table 表格
  • Photoshop CS6 下载安装教程,保姆级教程,小白也能轻松搞的,附安装包
  • mongodb数据库集合(表)的创建和数据修改
  • Ruby详解及安装流程
  • 项目安全-----加密算法实现
  • 【matplotlib】plt.show() !真没这么简单!
  • 基于python+控制台的车辆信息管理系统
  • 2024美赛数学建模C题思路源码——网球选手的动量
  • 数据分析:当当网书籍数据可视化分析
  • IdleHandler的简单认识
  • canvas设置图形各种混合模式,类似photoshop效果
  • Python爬虫的基本原理
  • 单片机的50个电路