vue2-timeago-l
Use Composition Api
- 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
- less than 1 minute , show
Navigation
Live Demo
Installation
Get from npm / yarn:
npm i vue2-timeago-l
yarn add vue2-timeago-l
or just include vue2-timeago-l.js to your view like
<script src='https://cdn.jsdelivr.net/npm/vue2-timeago-l@1.2.3/dist/vue2-timeago-l.js'></script>
Usage
Use this inside your app:
name: 'app'components:TimeAgo
With Default CSS
You don't need include for version >= "1.2.2"
or just include vue2-timeago-l.css
HTML
Examples
1. locale
Default locale is en, and the library supports en and zh_TW.
use v-bind
... { return locale:"zh_TW" } ...
2. datetime
use v-bind timestamp
-
Note. Don't bind with
new Date()
when you use refresh property. Because every time refresh will get a new date value.--> OK--> not OKIf you want use new Date() , just remove datetime property.
3. refresh
Boolean , default refresh time 60/s bind value with a number
4. tooltip
- Base on v-tooltip, you can use placement attribute that are allowed in v-tooltip.
Show tooltip Set placement
5. long
show : 2d show : 2 days ago
6. todo
You can do something when time refresh every time
7. native event
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 :
- English ( en )
- 繁體中文 ( zh_TW )
- 简体中文 ( zh_CN )
- 日本語 ( jp )
- Portugal(Brazil) ( pt_BR )
- Spain ( es )
- Arabia ( ar )
- French ( fr )
- Polish ( pl )
- Turkish ( tr )
Thanks for help: