@pureadmin/utils

Appearance

支持任意 JavaScript 环境或框架

时间、日期

getCurrentWeek ​

获取当前是星期几

​

查看代码
vue
<script setup lang="ts">
import { ref } from "vue";
import { getCurrentWeek } from "@pureadmin/utils";

let currentWeek = ref("");
</script>

<template>
  <naive-theme>
    <n-space className="flex items-center mt-2">
      <n-button @click="currentWeek = getCurrentWeek()">
        获取当前是星期几
      </n-button>
      <n-button @click="currentWeek = getCurrentWeek('周')">
        获取当前是周几
      </n-button>
      <n-gradient-text type="info">
        {{ currentWeek }}
      </n-gradient-text>
    </n-space>
  </naive-theme>
</template>

​

接收一个参数 prefix ，返回值类型为 string

参数属性说明类型默认值
prefix自定义前缀string星期

monthDays ​

获取指定日期月份的总天数

​

查看代码
vue
<script setup lang="ts">
import { ref } from "vue";
import { monthDays } from "@pureadmin/utils";

let days = ref();
</script>

<template>
  <naive-theme>
    <n-space className="flex items-center mt-2">
      <n-button @click="days = monthDays(new Date())">
        获取指定日期月份的总天数
      </n-button>
      <n-gradient-text type="info">
        {{ days }}
      </n-gradient-text>
    </n-space>
  </naive-theme>
</template>

​

接收一个参数 time ，返回值类型为 number

参数属性说明类型
time指定日期月份Date/string

createYear ​

获取从当前年份到开始年份的数组

​

查看代码
vue
<script setup lang="ts">
import { ref } from "vue";
import { createYear } from "@pureadmin/utils";

let yearsList = ref([]);
</script>

<template>
  <naive-theme>
    <n-space className="flex items-center mt-2">
      <n-button @click="yearsList = createYear(2012)">
        获取从当前年份到指定开始年份的数组
      </n-button>
      <n-button v-show="yearsList.length > 0" @click="yearsList.reverse()">
        数组反转
      </n-button>
      <n-gradient-text v-show="yearsList.length > 0" type="info">
        {{ yearsList }}
      </n-gradient-text>
    </n-space>
  </naive-theme>
</template>

​

接收一个参数 start ，返回值类型为 Array<number>

参数属性说明类型
start开始年份number

getCurrentDate ​

获取当前的日期

​

查看代码
vue
<script setup lang="ts">
import { ref } from "vue";
import { getCurrentDate } from "@pureadmin/utils";

let currentDate = ref();
</script>

<template>
  <naive-theme>
    <n-space className="flex items-center mt-2">
      <n-button @click="currentDate = getCurrentDate()">
        当前的日期（年月日模式）
      </n-button>
      <n-button @click="currentDate = getCurrentDate({ type: 2 })">
        当前的日期（ - 连接符模式）
      </n-button>
      <n-button @click="currentDate = getCurrentDate({ type: 3 })">
        当前的日期（ / 连接符模式）
      </n-button>
      <n-gradient-text type="info">
        {{ currentDate }}
      </n-gradient-text>
    </n-space>
  </naive-theme>
</template>

​

接收一个参数 options ，返回值类型为 currentDateType

参数属性说明类型
options拥有两个属性，具体看下面的 options 详情currentDateOpt

​

参数属性说明类型默认值
type当前返回的年月日和时分秒的格式 1：年月日模式、2：- 连接符、3：/ 连接符number1
prefix自定义 week 返回格式前缀string星期

​

ts
export interface currentDateType {
  /** 当前年月日 */
  ymd: string;
  /** 当前时分秒 */
  hms: string;
  /** 当前周几 */
  week: string;
}
export type dateType = 1 | 2 | 3;
export interface currentDateOpt {
  /** 当前返回的年月日和时分秒的格式 1：汉字模式（默认） 2：- 连接符 3：/ 连接符  */
  type?: dateType;
  /** 自定义 `week` 返回格式前缀，默认 `星期` */
  prefix?: string;
}

dateFormat ​

获取格式化后的当前日期

​

查看代码
vue
<script setup lang="ts">
import { ref } from "vue";
import { useIntervalFn } from "@vueuse/core";
import { dateFormat } from "@pureadmin/utils";

let time1 = ref();
let time2 = ref();
let time3 = ref();

useIntervalFn(() => {
  time1.value = dateFormat("YYYY年MM月DD日 HH时mm分ss秒");
  time2.value = dateFormat("YYYY-MM-DD HH:mm:ss");
  time3.value = dateFormat("YYYY/MM/DD HH:mm:ss");
}, 1000);
</script>

<template>
  <naive-theme>
    <n-space vertical class="mt-2">
      <n-gradient-text type="info">
        {{ time1 }}
      </n-gradient-text>
      <n-gradient-text type="info">
        {{ time2 }}
      </n-gradient-text>
      <n-gradient-text type="info">
        {{ time3 }}
      </n-gradient-text>
    </n-space>
  </naive-theme>
</template>

​

接收一个参数 format

参数属性说明类型
format日期格式化string

getTime ​

作用：将秒转换为时、分、秒

​

查看代码
vue
<script setup lang="ts">
import { getTime } from "@pureadmin/utils";
</script>

<template>
  <naive-theme>
    <n-space className="flex items-center mt-2">
      <n-gradient-text type="info">
        60 秒等于 {{ getTime(60, false).m }} 分钟
      </n-gradient-text>
    </n-space>

    <n-space className="flex items-center mt-2">
      <n-gradient-text type="info">
        4233600 秒等于 {{ getTime(4233600).h }} 小时
      </n-gradient-text>
    </n-space>

    <n-space className="flex items-center mt-2">
      <n-gradient-text type="info">
        299.099375 秒等于 {{ getTime(299.099375).h }}:{{
          getTime(299.099375).m
        }}:{{ getTime(299.099375).s }}
      </n-gradient-text>
    </n-space>
  </naive-theme>
</template>

​

接收二个参数，第一个参数 seconds，第二个参数 bool，返回值类型为 hmsType

参数属性说明类型
seconds要转换的秒数（可以是小数，会向下取整）number
bool是否补0，true 为补0，false 为不补0，默认true。当时、分、秒小于10时，会向前补0，如01:02:09boolean

​

ts
export interface hmsType {
  /** 小时 */
  h: number | string;
  /** 分钟 */
  m: number | string;
  /** 秒 */
  s: number | string;
}

Released under the MIT License

Copyright © 2022-present pure-admin