Timer 計時器

引入元件

import Timer from '@polyv/interactions-launch-sdk-ui-default/lib/Timer';

程式碼範例

<template>
    <button v-if="isTeacher" @click="timerVisible = true">计时器</button>
  <div id="pane" class="c-interactions-pane">
    <timer
      v-if="timerCore"
      :lang="lang"
      :visible="timerVisible"
      :main-area-id="'pane'"
      :position="isTeacher ? 'center' : 'bottomLeft'"
      :is-teacher="isTeacher"
      :core="timerCore"
      @close="handleTimerClose"
      @update-visible="timerVisible = true"
    />
  </div>
</template>

<script>
import * as InteractionsLaunchSDK from '@polyv/interactions-launch-sdk';
import Timer from '@polyv/interactions-launch-sdk-ui-default/lib/Timer';

export default {
  components: {
    Timer,
  },
  data() {
    return {
      // 中英文设置 'zh_CN'/'en'
      lang: 'zh_CN',
      // 计时器 SDK 实例
      timerCore: null,
      timerVisible: false,
    };
  },
  mounted() {
    // TODO: 关于初始化 InteractionsLaunchSDK 的其他设置
    this.timerCore = new InteractionsLaunchSDK.Timer();
  },
  methods: {
    // 关闭计时器需要二次确认
    handleTimerClose(isOngoing) {
      if (!isOngoing) {
        this.timerVisible = false;
        return;
      }
      if (window.confirm(this.$t('timerCloseTips'))) {
        this.timerVisible = false;
      }
    },
  }
};
</script>

Attributes

Events