可阅读时间

将时间格式化可阅读的格式

指令方式、组合函数方式

vue

<script setup lang="ts">
import { dayjs } from "iking-utils";

const tableData = [
  {
    title: "文章标题1",
    date: dayjs().subtract(1, "hour").format("YYYY-MM-DD HH:mm:ss"),
  },
  {
    title: "文章标题2",
    date: dayjs().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss"),
  },
  {
    title: "文章标题3",
    date: dayjs().subtract(1, "week").format("YYYY-MM-DD HH:mm:ss"),
  },
  {
    title: "文章标题4",
    date: dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss"),
  },
  {
    title: "文章标题5",
    date: dayjs().subtract(1, "year").format("YYYY-MM-DD HH:mm:ss"),
  },
];

const tableData2 = [
  {
    title: "文章标题1",
    date: dayjs().format("YYYY-MM-DD HH:mm:ss"),
  },
  {
    title: "文章标题2",
    date: dayjs().subtract(1, "minute").format("YYYY-MM-DD HH:mm:ss"),
  },
];

const { format, render, cancel } = useTimeago();

const timeRef = ref();

onMounted(() => {
  render(timeRef.value, { minInterval: 2 });
});
onBeforeMount(() => {
  cancel(timeRef.value);
});
</script>
<template>
  <ik-page-main title="指令（基础使用）">
    <el-table :data="tableData" style="width: 100%;">
      <el-table-column prop="title" label="标题" />
      <el-table-column label="发布时间" width="180">
        <template #default="{ row }">
          <span v-timeago="row.date" :title="row.date" />
        </template>
      </el-table-column>
    </el-table>
  </ik-page-main>
  <ik-page-main title="指令（定时器）">
    <el-table :data="tableData2" style="width: 100%;">
      <el-table-column prop="title" label="标题" />
      <el-table-column label="发布时间（注意看）" width="180">
        <template #default="{ row }">
          <span v-timeago.interval="row.date" :title="row.date" />
        </template>
      </el-table-column>
    </el-table>
  </ik-page-main>
  <ik-page-main title="组合式函数（相对时间）">
    2020-01-01 相对于 2020-01-03 是
    <b>{{ format("2020-01-01", { relativeDate: "2020-01-03" }) }}</b>
  </ik-page-main>
  <ik-page-main title="组合式函数（定时器）">
    每隔2秒更新 <b ref="timeRef" :datetime="dayjs().format()" />
  </ik-page-main>
</template>

可阅读时间 ​

可阅读时间