Dhouse-vuetimeago NPM

dhouse-vuetimeago Timeago ภาษาไทย

A timeago component Vue.js

ปรับปรุงมากจาก vue2-timeago กะว่าจะเพิ่มภาษาไทยให้ใน pagekage ให้แต่อัพเข้าไม่ได้เลยต้องเอาโค๊ดมาแก้ไขแล้วสร้าง pagekage มาใหม่ โดยการเพิ่มภาษาไทยเข้าไป ทั้งนี้เพื่อใช้ในการพัฒนาเว็บไซต์ ดีเฮ้าส์ แต่คิดว่าอาจจะเป็นประโยชน์สำหรับเพื่อน ๆ

ทดสอบการใช้งานจริง

ทดสอบการใช้งานแล้ว พอใช้งานได้ ตัวอย่างดูได้ที่ ดีเฮ้าส์ไทม์ไลน์

Localization supported
Show tooltip
Auto refresh time
When time refresh call a customizable function
Formats a date/timestamp to:
- just now
- 5m
- 3h
- 2 days ago
- 2017-08-03
Rules:
- less than 1 minute , show just now
- 1 minute ~ 1 hour , show ** minutes ago
- 1 hour ~ 1 day , show ** hours ago
- 1 day ~ 1 month( 31 days ) , show ** days ago
- more than 1 month( 31 days ) , show yyyy-mm-dd hh:mm

Navigation

Live Demo

Installation

Get from npm / yarn:

npm i dhouse-vuetimeago

yarn add dhouse-vuetimeago

Usage

Use this inside your app:

import TimeAgo from 'dhouse-vuetimeago'

export default {
  name: 'app',
  components: {
    TimeAgo,
  }
}

HTML

<time-ago :refresh="60" :datetime="new Date(2018, 7, 4, 0, 24, 0)" locale="th" tooltip></time-ago>

Examples

1. locale

Default locale is en, and the library supports en and th.

<time-ago locale="th"></time-ago> 
<time-ago :locale="locale"></time-ago> use v-bind

export default {
  ...
  data(){
    return{
      locale:"th",
    }
  },
  ...

2. datetime

<time-ago datetime="2018-08-03 15:47:00"></time-ago> 
<time-ago :datetime="new Date(2018, 7, 4, 0, 24, 0)"></time-ago> use v-bind
<time-ago :datetime="1533286641826"></time-ago> timestamp

Note. Don't bind with new Date() when you use refresh property. Because every time refresh will get a new date value.
```
<time-ago :datetime="new Date(2018, 7, 4, 0, 24, 0)"></time-ago>  --> OK
<time-ago refresh :datetime="new Date()"></time-ago> --> not OK
```
If you want use new Date() , just remove datetime property.
```
<time-ago refresh></time-ago>
```

3. refresh

<time-ago refresh></time-ago> Boolean , default refresh time 60/s
<time-ago :refresh="3600"></time-ago> bind value with a number

4. tooltip

Base on v-tooltip, you can use placement attribute that are allowed in v-tooltip.

<time-ago tooltip></time-ago> Show tooltip 
<time-ago tooltip="right"></time-ago> Set placement

5. long

<time-ago :datetime="datetime"></time-ago> show : 2d
<time-ago :datetime="datetime" long></time-ago> show : 2 days ago

6. todo

You can do something when time refresh every time

<time-ago :refresh="1" :locale="locale" :todo="()=> count+=1"></time-ago>

7. native event

<time-ago @click.native="todo"><time-ago/>

Props

Property	Type	Default	Description
datetime	Date, String, Number	new Date()	The datetime to be formatted.
locale	String	en	message language
refresh	Boolean, Number	false	The period to update the component, in seconds. When true it will be 60s. Also you can bind a number.
long	Boolean	false	Show long string with time message . ex. 3h -> 3 hours age
tooltip	Boolean, String	false	Show tooltip.
todo	Function	false	You can call a function when time refresh every time.

Contributions

locale translations: The component needs more locale translations. You can Open an issue to write the locale translations, or submit a pull request. See example here.

locale support list :