1.0.0 • Published 5 years ago

vue-emitting-analog-clock v1.0.0

Weekly downloads
16
License
MIT
Repository
-
Last release
5 years ago

vue-emitting-analog-clock

emitting analog clock component for vuejs

Vue wrapper of emitting-analog-clock

Props

PropTypeDefaultUsage
idString'clock'id attribute of the dom element
shapeString'circle'Shape of the clock. 'square' and 'circle' can be selected.
sizeNumber200Size of the clock in pixels.
colorString'#28d1fa'Color of the clock.
backgroundColorString'#09303aff'Background color of the clock.
backgroundImageStringnullBackground image url.
visibleSecondHandBooleantrueSet true to show the second hand.
shadowingBooleantrueSet true to show the shadow of the clock.
showDigitalBooleanfalseSet true to show the text of the time in the clock.
smoothBooleanfalseSet true to move hands smoothly.
dateObjectnullShow stopped clock. The value should be Date object or the string that represents the date.
dateFuncFunction (date: Date) => Datenow => nowLambda that gets the current Date object and returns the Date object to show.
nextFuncFunction (date: Date) => Numberdate => ((1500 - date.getMilliseconds()) % 1000) + 500,Lambda that gets the current Date object and returns the next rendering time in ms.

Usage

<template>
    <emitting-analog-clock id='main-clock' :size='260' :showDigital="true"></emitting-analog-clock>
</template>
<script>
import EmittingAnalogClock from 'vue-emitting-analog-clock';
export default {
  components: {EmittingAnalogClock}
};
</script>