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

• Changelog
• Installation
• Usage
• Examples
• Props
• Contributions

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 :

• English ( en )
• Thai (th)