vue-time

0.1.4 • Public • Published

vue-time

vue2 npm download unpkg

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'

Package Sidebar

Install

npm i vue-time

Weekly Downloads

16

Version

0.1.4

License

MIT

Unpacked Size

88.9 kB

Total Files

11

Last publish

Collaborators

  • yunyoujun