v3hooks --useDate

import { ref, readonly } from 'vue';
import dayjs from 'dayjs';


const defaultOptions ={
    format: 'YYYY-MM-DD HH:mm:ss',
    method: 'format'
};

type Value =  string | number | Date;

interface Options{
    format?: string
    method?: 'format' | 'millisecond' | 'second' | 'minute' | 'hour' | 'date' |'day'  | 'month' | 'year',
    methodParam?: number 
}

function useDate(
    value?: Value | undefined, 
    options?: Options
): {
    readonly data: any,
    refresh: (refreshValue?: Value) => void;
}

function useDate( initialValue?:Value, options?: Options ){
    
    const state = ref<string>();
    
    let value = initialValue || +new Date();
    const {
        format,
        method,
        methodParam
    } = { ...defaultOptions, ...options }


    const refresh = ( refreshValue?:Value )=>{
        console.log(refreshValue);
        value = refreshValue || +new Date();
        switch( method ){
            case 'format':
                state.value = dayjs(value).format(format);
                break;
            case undefined :
                break;
            default:
                let data: any = dayjs(value);
                if( methodParam ){
                    data = data[method](methodParam);
                    if( options && options.format ){
                        data = data.format(format);
                    }
                }
                state.value = data
        }
       
    };

    refresh();

    const data = readonly( state);

    return {
        data,
        refresh
    }
};


export default useDate

useDate

一个用来操作时间的 Hook 。

内部使用了 dayjs 作为format工具

使用Demo

<template>
  <div class="hello">
    <div> value:{{ data }}</div>
    <button @click="handleUpdateTime">无参数刷新</button>
    <button @click="handleUpdateTimeParam">有参数刷新</button>
  </div>
</template>

<script lang="ts">
import { useDate } from "v3hooks";

export default {
  
  setup() {
    const { data, refresh } = useDate(+new Date(),{
        format: 'YYYY-MM-DD HH:mm:ss',
        method: 'hour',
        methodParam: 3
    });

    const handleUpdateTime = ()=>{
        refresh();
    }

    const handleUpdateTimeParam = ()=>{
        refresh('2021-7-16 12:17:00');
    }

    return {
      data,
      refresh,
      handleUpdateTime,
      handleUpdateTimeParam
    };
  },
};
</script>

useDate接受一个时间并根据options来返回格式化后的数据。 可根据返回的refresh来进行更新调用.

其中method的参数具体使用可以参考dayjs的 取值/赋值

Api

interface Options{
    format?: string
    method?: 'format' | 'millisecond' | 'second' | 'minute' | 'hour' | 'date' |'day'  | 'month' | 'year',
    methodParam?: number 
}

function useDate(
    value?: Value | undefined, 
    options?: Options
): {
    readonly data: any,
    refresh: () => void;
}

Params

参数	说明	类型	默认值
initialValue	初始化的时间值	string - number - Date	Date
options	可选项，配置时间属性，详见 Options	Options	-

Options

参数	说明	类型	默认值
format	针对日期格式化	string	YYYY-MM-DD HH:mm:ss
method	获取时间的操作方法	见Api Options.method	format
methodParam	针对日期格式化的操作方法的参数	number	-

Result

参数	说明	类型
data	格式化后的时间值	Ref
refresh	格式化后的时间值	(refreshValue)=> void