Vue Stage Play

Appearance

Event Hooks ​

This example demonstrates how to bind events. VueStagePlay provides events for four stages; detailed information can be found in the StagePlayScene section.

vue
<script setup>
import { ref } from 'vue'
import { StagePlaySpotlight, StagePlayScene, useStagePlay } from 'vue-stage-play'

const { action } = useStagePlay()
const consoleText = ref("log....")

function eventHandler(hookName) {
  return ({ currentActName, currentScene}) => {
    consoleText.value = `[${hookName}] Act: ${currentActName}; Scene: ${currentScene}\n` + consoleText.value;
  }
}
</script>

<template>
  <StagePlaySpotlight>
    <h2>How to place an elephant into a refrigerator?</h2>
    <button @click="action('event')">Start</button>

    <StagePlayScene 
      :act-name="'event'"
      :scene="1"
      :voice-over-title="'Step1'"
      :voice-over-content="'Open the door of the refrigerator.'"
      :on-before-cut="eventHandler('Before Cut')"
      :on-after-cut="eventHandler('After Cut')"
      :on-activated="eventHandler('Activated')"
      :on-deactivated="eventHandler('Deactivated')"
    >
      <h3>Step1</h3>
    </StagePlayScene>

     <!-- ... Omitted -->

  </StagePlaySpotlight>
</template>
<script setup>
import { ref } from 'vue'
import { StagePlaySpotlight, StagePlayScene, useStagePlay } from 'vue-stage-play'

const { action } = useStagePlay()
const consoleText = ref("log....")

function eventHandler(hookName) {
  return ({ currentActName, currentScene}) => {
    consoleText.value = `[${hookName}] Act: ${currentActName}; Scene: ${currentScene}\n` + consoleText.value;
  }
}
</script>

<template>
  <StagePlaySpotlight>
    <h2>How to place an elephant into a refrigerator?</h2>
    <button @click="action('event')">Start</button>

    <StagePlayScene 
      :act-name="'event'"
      :scene="1"
      :voice-over-title="'Step1'"
      :voice-over-content="'Open the door of the refrigerator.'"
      :on-before-cut="eventHandler('Before Cut')"
      :on-after-cut="eventHandler('After Cut')"
      :on-activated="eventHandler('Activated')"
      :on-deactivated="eventHandler('Deactivated')"
    >
      <h3>Step1</h3>
    </StagePlayScene>

     <!-- ... Omitted -->

  </StagePlaySpotlight>
</template>

How to place an elephant into a refrigerator? ​

Step1 ​

Step2 ​

Step3 ​