Vue-time NPM | npm.io

vue-time

Display current time. Demo (Once Per Second)

In fact, it is just a practice about how to build a lib.

If you want to handle time, you can use dayjs or moment .

How to use

npm install vue-time

Dev

Install

npm install

Example

<template>
  <div>
    <vue-time :show-date="showDate" :show-day="showDay" :show-time="showTime"></vue-time>
  </div>
</template>

import 'vue-time';
export default {
  components: { vueTime },
  data () {
    return {
      showDate: false,
      showDay: true,
      showTime: true,
      locales: 'zh-CN',
      options: {
        hour12: false,
        timeZone: 'Asia/Shanghai',
        era: 'long',
        weekday: 'long',
        year: 'numeric',
        month: 'numeric',
        day: 'numeric'
      }
    }
  }
}

Display

公元2019年1月28日星期一 19:55:13

Options

Attribute	Description	Type	Options	Default
show-date	显示年份日期	Boolean	——	true
show-day	显示星期几	Boolean	——	true
show-time	显示时间	Boolean	——	true
locales	区域	String	-	'zh-CN'
options	设置	Object	-

You can see more info about locales & options from DateTimeFormat - MDN.

Attribute	Description	Type	Default
hour12	12小时制	Boolean	false
timeZone	时区	String	'Asia/Shanghai'
era	公元	String	'long'
weekday	星期几	String	'long' (short:周几)
year	年份	String	'numeric'
month	月份	String	'numeric'
day	星期几	String	'numeric'