- inject("data-v-f23539f2_0", { source: "\n.clock[data-v-f23539f2] {\n background: #fff;\n border: 0.3rem solid #fff;\n border-radius: 0.5rem;\n display: inline-block;\n margin-bottom: 1em;\n}\n.clock__hours[data-v-f23539f2],\n.clock__minutes[data-v-f23539f2],\n.clock__seconds[data-v-f23539f2] {\n background: linear-gradient(to bottom, #26303b 50%, #2c3540 50%);\n display: inline-block;\n color: #fff;\n font-family: 'Nunito', sans-serif;\n font-size: 3rem;\n font-weight: 300;\n padding: 0.5rem 1rem;\n text-align: center;\n position: relative;\n}\n.clock__hours[data-v-f23539f2] {\n border-right: 0.15rem solid #fff;\n}\n.clock__minutes[data-v-f23539f2] {\n border-right: 0.15rem solid #fff;\n}\n.clock__hourtime[data-v-f23539f2] {\n font-size: 1rem;\n position: absolute;\n top: 2px;\n left: 8px;\n}\n", map: {"version":3,"sources":["/Users/dangvanthanh/Code/Github/vue-clock/src/VueClock.vue"],"names":[],"mappings":";AAwDA;EACA,gBAAA;EACA,yBAAA;EACA,qBAAA;EACA,qBAAA;EACA,kBAAA;AACA;AAEA;;;EAGA,gEAAA;EACA,qBAAA;EACA,WAAA;EACA,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,oBAAA;EACA,kBAAA;EACA,kBAAA;AACA;AAEA;EACA,gCAAA;AACA;AAEA;EACA,gCAAA;AACA;AAEA;EACA,eAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;AACA","file":"VueClock.vue","sourcesContent":["<template>\n <div class=\"clock\" v-if=\"hourtime != ''\">\n <div class=\"clock__hours\" v-if=\"isHour\">\n <span class=\"clock__hourtime\" v-text=\"hourtime\"></span>\n <span v-text=\"hours\"></span>\n </div>\n <div class=\"clock__minutes\" v-text=\"minutes\" v-if=\"isMinute\"></div>\n <div class=\"clock__seconds\" v-text=\"seconds\" v-if=\"isSecond\"></div>\n </div>\n</template>\n\n<script>\nimport { SECOND, HOUR, getHourTime, getZeroPad } from './filters';\n\nexport default {\n props: {\n isHour: {\n type: Boolean,\n default: true\n },\n isMinute: {\n type: Boolean,\n default: true\n },\n isSecond: {\n type: Boolean,\n default: true\n }\n },\n data() {\n return {\n hours: 0,\n minutes: 0,\n seconds: 0,\n hourtime: '',\n };\n },\n mounted() {\n const timer = window.setTimeout(this.updateDateTime, SECOND);\n this.$on('hook:destroyed', () => window.clearTimeout(timer))\n },\n methods: {\n updateDateTime() {\n const now = new Date();\n this.hours = now.getHours();\n this.minutes = getZeroPad(now.getMinutes());\n this.seconds = getZeroPad(now.getSeconds());\n this.hourtime = getHourTime(this.hours);\n this.hours = this.hours % HOUR || HOUR;\n this.$options.timer = window.setTimeout(this.updateDateTime, SECOND);\n },\n },\n};\n</script>\n\n<style scoped>\n.clock {\n background: #fff;\n border: 0.3rem solid #fff;\n border-radius: 0.5rem;\n display: inline-block;\n margin-bottom: 1em;\n}\n\n.clock__hours,\n.clock__minutes,\n.clock__seconds {\n background: linear-gradient(to bottom, #26303b 50%, #2c3540 50%);\n display: inline-block;\n color: #fff;\n font-family: 'Nunito', sans-serif;\n font-size: 3rem;\n font-weight: 300;\n padding: 0.5rem 1rem;\n text-align: center;\n position: relative;\n}\n\n.clock__hours {\n border-right: 0.15rem solid #fff;\n}\n\n.clock__minutes {\n border-right: 0.15rem solid #fff;\n}\n\n.clock__hourtime {\n font-size: 1rem;\n position: absolute;\n top: 2px;\n left: 8px;\n}\n</style>\n"]}, media: undefined });
0 commit comments