如何使 introjs 与幻灯片保持一致？

Question

我有一个包含多张幻灯片的模态框。每张幻灯片都有自己的表格。

<v-bottom-sheet v-model="showCreateRecordModal" inset max-width="600px" class="rounded-t-xl" scrollable persistent>

    <v-card v-if="slide === 1">
        <v-btn @click="explain()">Explain Form Input</v-btn>

        <div data-intro="Hello World! " ref='input1'>
            <label class="font-weight-bold black--text" for="">Form input 1</label>
            <v-textarea
                placeholder="Describe the input1"
                required
                v-model="input1"
                rows="1"
                auto-grow
            ></v-textarea>
        </div>
    </v-card>

     <v-card v-if="slide === 2">
        <v-btn @click="explain()">Explain Form Input2</v-btn>

        <div data-intro="Hello World! " ref='input2'>
            <label class="font-weight-bold black--text" for="">Form input 2</label>
            <v-textarea
                placeholder="Describe the input2"
                required
                v-model="input2"
                rows="1"
                auto-grow
            ></v-textarea>
        </div>
    </v-card>

</v-bottom-sheet>

我遇到的问题是我只希望工具提示在 slide 开启时打开。因此，如果我单击“解释表单输入 2”按钮，它不会打开来自 slide == 1

的 input1 提示

<script>

    import "intro.js/introjs.css";
    //const introJS = require("intro.js");
    export default {
        
        data() {
          return {
              slide: 1,
          }
        },
        mounted() { 
            const introJS = require("intro.js");

            this.introJS = introJS;
        },
        methods: {
            explain(){
               this.introJS().setOptions({
                   steps: [
                        {
                            element: this.$refs.input1,
                            intro: 'Tooltip has position right',
                            position: 'top'
                        },
                        {
                            element: this.$refs.input2,
                            intro: 'Tooltip has position top',
                            position: 'top'
                        }
                   ]
               }).start()
            },
        }
    }
</script>

如何才能使工具提示仅针对幻灯片中的输入打开？

Answer 1

创建一个为每张幻灯片提供步骤的方法：

explain(){
    this.introJS().setOptions({
        steps: this.introJsSteps()
    }).start()
},
introJsSteps(){
    let steps;
    if(this.slide === 1){
        steps = [
            {
                element: this.$refs.situation,
                intro: 'This is the situation',
                position: 'top'
            },
        ]
    } else if (this.slide === 3){
        steps = [
            {
                element: this.$refs.automatic_thoughts,
                intro: 'This is automatic thoughts',
                position: 'top'
            }
        ]
    }
    return steps
},

如何使 introjs 与幻灯片保持一致？

How do I make it so introjs adheres to slides?

vue.js

intro.js