全局属性处理时间

爱吃葡萄的皮皮
67 阅读1分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情

在项目中，各个模块经常需要对时间进行处理，从后端返回的时间戳需要转化为标准时间格式。

1.png

过滤器处理时间

在Vue2中，可以使用过滤器完成对时间的处理。

过滤器

  定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：

1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}

2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"

下图使用局部过滤器对事件进行处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/dayjs.min.js"></script>
	</head>
	<body>
		<div id="root">
			<h3>现在是：{{time | timeFormater}}</h3>
			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		new Vue({
			el:'#root',
                        data:{
                            time:1621561377603, //时间戳
			},
			//局部过滤器
			filters:{
                            timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
                                    // console.log('@',value)
                                    return dayjs(value).format(str)
                            }
			}
		})
	</script>
</html>

但是在Vue3中取消了过滤器的概念。局部过滤器被完全移除，全局过滤器虽然被移除，但是可以使用全局属性替代全局过滤器

2.png

全局属性处理时间

安装dayjs

npm i dayjs@1.10.6

新建utils/filters，定义全局属性

import dayjs from 'dayjs'

const dateFilter = (val, format = 'YYYY-MM-DD') => {
  // 判断是否为非数字
  if (!isNaN(val)) {
    val = parseInt(val)
  }
  // 转化为标准时间格式
  return dayjs(val).format(format)
}

export default app => {
  app.config.globalProperties.$filters = {
    dateFilter
  }
}

isNaN()  函数用来确定一个值是否为NaN

全局属性 NaN 是一个表示非数字的值。

接下来在main.js中导入

import installFilters from '@/filters'

installFilters(app)

最后在时间对应的模板处使用全局属性对时间进行处理

<el-table-column :label="$t('msg.excel.openTime')">
  <template #default="{ row }">
    {{ $filters.dateFilter(row.openTime) }}
  </template>
</el-table-column>
avatar
文章
阅读
粉丝