just now
** minutes ago
** hours ago
** days ago
yyyy-mm-dd hh:mm
Get from npm / yarn:
npm i vue2-timeago
yarn add vue2-timeago
or just include vue2-timeago.js to your view like
<script src='https://cdn.jsdelivr.net/npm/vue2-timeago@1.2.3/dist/vue2-timeago.js'></script>
Use this inside your app:
import TimeAgo from 'vue2-timeago'
export default {
name: 'app',
components: {
TimeAgo,
}
}
####### You don’t need include for version >= “1.2.2”
import 'vue2-timeago/dist/vue2-timeago.css'
or just include vue2-timeago.css
<time-ago :refresh="60" :datetime="new Date(2018, 7, 4, 0, 24, 0)" locale="zh_TW" tooltip></time-ago>
Default locale is en, and the library supports en and zh_TW.
<time-ago locale="en"></time-ago>
<time-ago :locale="locale"></time-ago> use v-bind
export default {
...
data(){
return{
locale:"zh_TW",
}
},
...
<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>
<time-ago refresh></time-ago> Boolean , default refresh time 60/s
<time-ago :refresh="3600"></time-ago> bind value with a number
<time-ago tooltip></time-ago> Show tooltip
<time-ago tooltip="right"></time-ago> Set placement
<time-ago :datetime="datetime"></time-ago> show : 2d
<time-ago :datetime="datetime" long></time-ago> show : 2 days ago
You can do something when time refresh every time
<time-ago :refresh="1" :locale="locale" :todo="()=> count+=1"></time-ago>
<time-ago @click.native="todo"><time-ago/>
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. |
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 :
Thanks for help:
Author: runkids
Demo: https://codesandbox.io/embed/myomwvkojj
Source Code: https://github.com/runkids/vue2-timeago
#vue #vuejs #javascript