vue3 通过计算属性和methods代替 filter 过滤器实现组件中作用域插槽时间格式化

在vue3中没有了 filter 过滤器，想要实现时间格式化，就需要我们另辟蹊径，所以我尝试了用

计算属性代替它去格式化时间。

第一部分：给封装的函数设置单独的js文件，导入组件格式化时间（computed）

第一步：网上查找能格式化时间的代码

// 用于格式化时间
// 设置按需导出
export function formatDate(value, format) {
  //value: 需要格式化的数据
  //format: 指定格式 yyyy-MM-dd hh:mm:ss

  let date = new Date(value);
  // 获取年份
  let year = date.getFullYear();

  if (/(y+)/.test(format)) {
    // 获取匹配组的内容
    let content = RegExp.$1;
    format = format.replace(content, year.toString().slice(4 - content.length));
  }

 let o = {
   // y: date.getFullYear(),  // 用这一句也行，但只适用于四位数显示时候用
   M: date.getMonth() + 1,
   d: date.getDate(),
   h: date.getHours(),
   m: date.getMinutes(),
   s: date.getSeconds()
 };

 for (let key in o) {
   // 构造动态正则
   let reg = new RegExp(`(${key}+)`);

   if (reg.test(format)) {
     // 获取匹配组的内容
     let content = RegExp.$1;
     let k = o[key] >= 10 ? o[key] : content.length == 2 ? '0' + o[key] : o[key];
     format = format.replace(content, k);
   }
 }
 return format;
}

第二步：在页面按需导入

import { formatDate } from '@/utils/index'

computed: {
 formatDate() {
   return formatDate
  }
 },

第三步：在作用域插槽中的使用

//在插槽中格式化时间
// row.timeOfEntry是我想要格式化的时间
<template v-slot="{row}"><span>{{ formatDate(row.timeOfEntry, "yyyy-MM-dd") }}</span></template>
//在页面上使用
formatDate('2021.3.6', "hh:mm dd/MM/yyyy")

提示
formatDate(value, format)
  //value: 需要格式化的数据
  //format: 指定格式 yyyy-MM-dd hh:mm:ss

 第二部分:直接在组件中格式化作用域插槽的时间（methods）

//methods中写入
methods: {
  dateFormat: function(time) {
    const data = new Date(time)
    //data.getDate()获取日
    return data.getDate()
  }
}

//结构作用域插槽中使用 
//data.day为想要格式化的时间
{{ dateFormat(data.day) }}