Vue3-Countdown-Clock with Vue2.

Working example https://clockcountdown.web.app/

Navigation

• Features
• Installation
• Usage

Features

• used vue2

• easy to install

• Easy application

• Using provide, inject, ref

• Ability to customize your own styles

• Ability to customize your own time zone

• Ability to customize your own language

• Ability to customize the end time

• Completion message

Installation

npm install @vue/composition-api
# or
yarn add @vue/composition-api

You must install @vue/composition-api as a plugin via Vue.use() before you can use the Composition API to compose your component.

import Vue from 'vue' 
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

npm install --save vue3-countdown-clock

Usage

#default

<template>
    <Vue3CountdownClock/>
<template/>


 <script>
 import { defineComponent, ref, provide } from '@vue/composition-api'
 import Vue3CountdownClock from 'vue3-countdown-clock'
 
 export default defineComponent({
   name: 'HelloWorld',
   components: {
     Vue3CountdownClock
   },
   setup () {
     const deadLine = ref('2020/12/06 10:00:00 GMT-0200')
     provide('deadline', deadLine)
 
     const Title = ref('Online service will be honored through:')
     provide('title', Title)
 
     const timerStyle = ref({
       'text-align': 'center',
       'font-family': 'sans-serif',
       'font-weight': 100
     })
     provide('timerStyle', timerStyle)
 
     const h1Style = ref({
       color: '#396',
       'font-weight': 100,
       'font-size': '40px',
       margin: '40px 0px 20px'
     })
     provide('h1Style', h1Style)
 
     const clockdiv = ref({
       'font-family': 'sans-serif',
       color: '#fff',
       display: 'inline-block',
       'font-weight': 100,
       'text-align': 'center',
       'font-size': '30px'
     })
     provide('clockdiv', clockdiv)
 
     const clockdivDiv = ref({
       padding: '10px',
       'border-radius': '3px',
       background: '#00BF96',
       display: 'inline-block',
       margin: '1px'
     })
     provide('clockdivDiv', clockdivDiv)
 
     const clockdivDivSpan = ref({
       padding: '15px',
       'border-radius': '3px',
       background: '#00816A',
       display: 'inline-block'
     })
     provide('clockdivDivSpan', clockdivDivSpan)
 
     const styleEndTime = ref({
       color: '#fff'
     })
     provide('styleEndTime', styleEndTime)
 
     const smalltext = ref({
       'padding-top': '5px',
       'font-size': '16px'
     })
     provide('smalltext', smalltext)
 
     const titleDays = ref('Days')
     provide('titleDays', titleDays)
 
     const titleHours = ref('Hours')
     provide('titleHours', titleHours)
 
     const titleMinutes = ref('Minutes')
     provide('titleMinutes', titleMinutes)
 
     const titleSeconds = ref('Seconds')
     provide('titleSeconds', titleSeconds)
 
     const titleEndTime = ref('End Time!')
     provide('titleEndTime', titleEndTime)
   }
 })
 </script>

#description Enter your date and time zone

const deadLine = ref('2020/12/06 10:00:00 GMT-0200')
     provide('deadline', deadLine)

Change styles

timerStyle, h1Style, clockdiv, clockdivDiv, clockdivDivSpan, styleEndTime, smalltext

const timerStyle = ref({
       'text-align': 'center',
       'font-family': 'sans-serif',
       'font-weight': 100
     })
     provide('timerStyle', timerStyle)
...

Change the names

Days, Hours, Minutes, Seconds, End Time!

const Title = ref('Online service will be honored through:')
     provide('title', Title)

change to...

const Title = ref('在线服务将通过以下方式兑现:')
     provide('title', Title)

...

const titleDays = ref('Days')
     provide('titleDays', titleDays)

...

"clock-countdown" with Vue3

https://www.npmjs.com/package/vue3-clock-countdown

#Donate (creating code at your request out of turn) I would be very grateful for the star on github.com)))

💰 I can do some feature for you out of turn and at a fast pace or solve your problem, give a quick answers. To do this, you can pay me one-time or make a subscription. We can discuss the details by email, it is written in my profile.