Vue Stage Play

Appearance

Voice Over Customizing ​

This example demonstrates the utilization of a customized tooltip.

vue
<script setup>
  const emit = defineEmits(['prev', 'next', 'done']);

  defineProps({
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      required: true
    },
    hasPrevScene: {
      type: Boolean,
      required: true
    },
    hasNextScene: {
      type: Boolean,
      required: true
    }
  });
</script>

<template>
  <div class="demo-card">
    <button
      :disabled="!hasPrevScene"
      @click="emit('prev')"
    >
      ←
    </button>

    <div>
      <h3>{{ title }}</h3>
      <p>{{ content }}</p>
    </div>

    <button
      v-show="hasNextScene"
      @click="emit('next')"
    >
      →
    </button>

    <button
      v-show="!hasNextScene"
      @click="emit('done')"
    >
      X
    </button>
  </div>
</template>
<script setup>
  const emit = defineEmits(['prev', 'next', 'done']);

  defineProps({
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      required: true
    },
    hasPrevScene: {
      type: Boolean,
      required: true
    },
    hasNextScene: {
      type: Boolean,
      required: true
    }
  });
</script>

<template>
  <div class="demo-card">
    <button
      :disabled="!hasPrevScene"
      @click="emit('prev')"
    >
      ←
    </button>

    <div>
      <h3>{{ title }}</h3>
      <p>{{ content }}</p>
    </div>

    <button
      v-show="hasNextScene"
      @click="emit('next')"
    >
      →
    </button>

    <button
      v-show="!hasNextScene"
      @click="emit('done')"
    >
      X
    </button>
  </div>
</template>
vue
<script setup>
import MyVoiceOver from "./components/MyVoiceOver"
import { StagePlaySpotlight, StagePlayScene, useStagePlay } from 'vue-stage-play'

const { action } = useStagePlay()
</script>

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

    <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="1">
      <h3>Step1</h3>

      <template #voiceOver="scopedProps">
        <MyVoiceOver
          :title="'Step1'"
          :content="'Open the door of the refrigerator.'"
          :has-prev-scene="scopedProps.hasPrevScene"
          :has-next-scene="scopedProps.hasNextScene"
          @prev="scopedProps.prevScene()"
          @next="scopedProps.nextScene()"
          @done="scopedProps.cut()"
        />
      </template>
    </StagePlayScene>

    <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="2">
      <h3>Step2</h3>

      <template #voiceOver="scopedProps">
        <MyVoiceOver
          :title="'Step2'"
          :content="'Extract the elephant from the refrigerator.'"
          :has-prev-scene="scopedProps.hasPrevScene"
          :has-next-scene="scopedProps.hasNextScene"
          @prev="scopedProps.prevScene()"
          @next="scopedProps.nextScene()"
          @done="scopedProps.cut()"
        />
      </template>
    </StagePlayScene>

    <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="3">
      <h3>Step3</h3>

      <template #voiceOver="scopedProps">
        <MyVoiceOver
          :title="'Step3'"
          :content="'Place the giraffe inside the refrigerator.'"
          :has-prev-scene="scopedProps.hasPrevScene"
          :has-next-scene="scopedProps.hasNextScene"
          @prev="scopedProps.prevScene()"
          @next="scopedProps.nextScene()"
          @done="scopedProps.cut()"
        />
      </template>
    </StagePlayScene>

    <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="4">
      <h3>Step4</h3>

      <template #voiceOver="scopedProps">
        <MyVoiceOver
          :title="'Step4'"
          :content="'Close the door of the refrigerator.'"
          :has-prev-scene="scopedProps.hasPrevScene"
          :has-next-scene="scopedProps.hasNextScene"
          @prev="scopedProps.prevScene()"
          @next="scopedProps.nextScene()"
          @done="scopedProps.cut()"
        />
      </template>
    </StagePlayScene>

    <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="5">
       <template #voiceOver="scopedProps">
        <MyVoiceOver
          :title="'Success!'"
          :content="'You place an giraffe into a refrigerator.'"
          :has-prev-scene="scopedProps.hasPrevScene"
          :has-next-scene="scopedProps.hasNextScene"
          @prev="scopedProps.prevScene()"
          @next="scopedProps.nextScene()"
          @done="scopedProps.cut()"
        />
      </template>
    </StagePlayScene>
  </StagePlaySpotlight>
</template>
<script setup>
import MyVoiceOver from "./components/MyVoiceOver"
import { StagePlaySpotlight, StagePlayScene, useStagePlay } from 'vue-stage-play'

const { action } = useStagePlay()
</script>

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

    <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="1">
      <h3>Step1</h3>

      <template #voiceOver="scopedProps">
        <MyVoiceOver
          :title="'Step1'"
          :content="'Open the door of the refrigerator.'"
          :has-prev-scene="scopedProps.hasPrevScene"
          :has-next-scene="scopedProps.hasNextScene"
          @prev="scopedProps.prevScene()"
          @next="scopedProps.nextScene()"
          @done="scopedProps.cut()"
        />
      </template>
    </StagePlayScene>

    <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="2">
      <h3>Step2</h3>

      <template #voiceOver="scopedProps">
        <MyVoiceOver
          :title="'Step2'"
          :content="'Extract the elephant from the refrigerator.'"
          :has-prev-scene="scopedProps.hasPrevScene"
          :has-next-scene="scopedProps.hasNextScene"
          @prev="scopedProps.prevScene()"
          @next="scopedProps.nextScene()"
          @done="scopedProps.cut()"
        />
      </template>
    </StagePlayScene>

    <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="3">
      <h3>Step3</h3>

      <template #voiceOver="scopedProps">
        <MyVoiceOver
          :title="'Step3'"
          :content="'Place the giraffe inside the refrigerator.'"
          :has-prev-scene="scopedProps.hasPrevScene"
          :has-next-scene="scopedProps.hasNextScene"
          @prev="scopedProps.prevScene()"
          @next="scopedProps.nextScene()"
          @done="scopedProps.cut()"
        />
      </template>
    </StagePlayScene>

    <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="4">
      <h3>Step4</h3>

      <template #voiceOver="scopedProps">
        <MyVoiceOver
          :title="'Step4'"
          :content="'Close the door of the refrigerator.'"
          :has-prev-scene="scopedProps.hasPrevScene"
          :has-next-scene="scopedProps.hasNextScene"
          @prev="scopedProps.prevScene()"
          @next="scopedProps.nextScene()"
          @done="scopedProps.cut()"
        />
      </template>
    </StagePlayScene>

    <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="5">
       <template #voiceOver="scopedProps">
        <MyVoiceOver
          :title="'Success!'"
          :content="'You place an giraffe into a refrigerator.'"
          :has-prev-scene="scopedProps.hasPrevScene"
          :has-next-scene="scopedProps.hasNextScene"
          @prev="scopedProps.prevScene()"
          @next="scopedProps.nextScene()"
          @done="scopedProps.cut()"
        />
      </template>
    </StagePlayScene>
  </StagePlaySpotlight>
</template>

How to place an giraffe into a refrigerator? ​

Step1 ​

Step2 ​

Step3 ​

Step4 ​