时间戳

首页 > 解决方案 > 我怎样才能让它 introjs 坚持幻灯片？

vue.js - 我怎样才能让它 introjs 坚持幻灯片？

问题描述

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

<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它。因此，如果我单击“解释表单 Input2”按钮，它将不会input1从slide == 1

<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>

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

标签： vue.jsintro.js

解决方案

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

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
},

推荐阅读