1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
| // 父组件 <template> <div> 盛大活动 <Date v-model="time" /> </div> </template>
<script> import Date from "./date"; export default { components: { Date }, data() { return { time: "2023-08-31 10:08:00", }; }, }; </script> // 子组件 <template> <div>{{ str }}</div> </template> <script> export default { props: { value: { type: String, default: "", }, }, data() { return { str: "", }; }, created() { this.cutTime(this.value); }, mounted() {}, methods: { cutTime(str) { setInterval(() => { let endStr = new Date(str).getTime(); let nowStr = new Date().getTime(); let time = (endStr - nowStr) / 1000; let day = parseInt(time / 60 / 60 / 24); let hour = parseInt((time / 60 / 60) % 24); let minu = parseInt((time / 60) % 60); let second = parseInt(time % 60); if (time <= 0) { this.str = "开始抢购了!"; } else { this.str = `剩余 ${day}天${hour}小时${minu}分${second}秒 开抢`; } }, 1000); }, }, }; </script>
|