laravel - Vue 倒计时在 IOS 浏览器上不起作用

Question

使用 Laravel 在 Vue 中进行倒计时

嗨，我在 Vue.js 和 Laravel 中创建了一个倒计时，它在所有浏览器中都能完美运行，但在 IOS 浏览器上却不行。

在这里你可以看到我的代码：

刀片文件上的 Vue 组件

<countdown-button
          until="{{ $active->ends_at }}"
          url='{{ route('dashboard.active.show', $active->uuid) }}' />

正如你所看到的，它是一个使用 props 的普通组件，我必须不使用“：”，因为如果我添加它，我会得到一个错误，它说它必须是 String 的数字实例，当使用 props 时。

这是我的 Vue.js 组件

<template>
    <div class="countdown__container">
        <div v-if="finished">{{ endsAt }}</div>

        <div v-else class="countdown__date--container">
            <div class="countdown__date--item2">
                <span>{{ remaining.days }} days</span>
                <span>{{ remaining.hours }} hours </span>
                <span>{{ remaining.minutes }} minutes </span>
                <span>{{ remaining.seconds }} seconds </span>
            </div>
        </div>
        <div :show="butt" class="lower-box">
            <a :href="url" class="theme-btn style-one">
                <i class="fas fa-user"></i>PLAY NOW
            </a>
        </div>
    </div>
</template>

<script>
    import moment from 'moment';

    export default {
        props: {
            url: String,
            until: {
                type: String,
                required: true,
            },
            endsAt: { default: 'Game finished!' },

        },
        data () {
            return {
                now: new Date(),
                butt: true,
            };
        },
        created () {
            this.refreshEverySecond();
        },
        computed: {

            finished () {
                return this.remaining.total <= 0;
            },
            remaining () {

                let remaining = moment.duration(Date.parse(this.until) - this.now);

                if (remaining <= 0) this.$emit('finished');

                return {
                    total: remaining,
                    years: this.pad(remaining.years(),2),
                    months: this.pad(remaining.months(),2),
                    days: this.pad(remaining.days(),2),
                    hours: this.pad(remaining.hours(),2),
                    minutes: this.pad(remaining.minutes(),2),
                    seconds: this.pad(remaining.seconds(),2)
                };
            }
        },
        methods: {

            pad(num, size) {
                var s = "000000000" + num;
                return s.substr(s.length-size);
            },
            refreshEverySecond () {
                let interval = setInterval(() => this.now = new Date(), 1000);
                this.$on('finished', () => {
                    clearInterval(interval);
                    this.butt = false;
                });
            }
        }
    }
</script>

<style lang="scss">
   .countdown__date--item2 {
       font-size: 16px;
       color: orange;
       font-weight: bold;
   }
</style>

这个组件只有两个 props，它们是 url 和 endsAt。它只显示倒计时。

它在桌面浏览器和 Android 上 100% 运行

但在 IOS 浏览器上显示如下：

标签： laravelvue.js

Answer 1

diff()我认为你应该在 computed 中使用 moment remaining：

remaining () {

  let until = moment().from(this.until);
  let now = moment().from(this.now);

  let remaining = moment().duration(until.diff(now));

  if (remaining <= 0) this.$emit('finished');

  return {
    total: remaining,
    years: this.pad(remaining.years(),2),
    months: this.pad(remaining.months(),2),
    days: this.pad(remaining.days(),2),
    hours: this.pad(remaining.hours(),2),
    minutes: this.pad(remaining.minutes(),2),
    seconds: this.pad(remaining.seconds(),2)
  };
}