A digital clock simulation build on Vue.
without seconds:
You can also use the digital-number component.
via NPM:
npm install --save digital-clock-vuevia Yarn:
yarn add digital-clock-vueimport DigitalClockVue, { DigitalNumber } from 'digital-clock-vue'
export default {
components: {
DigitalClockVue,
DigitalNumber
}
}| Prop | Type | Desc |
|---|---|---|
color |
String | CSS color for digital number and twink. |
showSeconds |
Boolean | Determine whether to show seconds, default is false. |
<!-- recommend aspect ratio 4:1 -->
<digital-clock-vue
color="red"
showSeconds
style="background: black; width: 400px; height: 100px;"
/>
<!-- recommend aspect ratio when without seconds 8:3 -->
<digital-clock-vue
color="#39af78"
style="background: #2f4053; width: 240px; height: 90px;"
/>
<!-- digital number -->
<div>
<digital-number
:key="item"
:num="item"
color="#1973de"
style="width: 45px; height:75px; margin-left: 2px;"
v-for="item in Array.apply(null, {length: 10}).map((_, i) => i)"
></digital-number>
</div>