Vue2+Quasar环境下，嵌套组件中如何集成vue-tour并配置触发元素ID？

直接给子组件内目标元素绑定ID #

1. 在子组件的目标DOM元素上直接添加id属性，比如要高亮子组件内的Quasar按钮：

   <!-- 子组件 ChildComponent.vue -->
   <template>
     <q-btn id="child-operation-btn" label="子组件操作按钮" />
   </template>
   

2. 父组件的vue-tour步骤配置中，将target设为该ID选择器：

   // 父组件引导步骤配置
   this.steps = [
     // 其他步骤...
     {
       target: '#child-operation-btn',
       content: '这是子组件内的操作按钮'
     }
   ]
   

3. 关键注意：确保引导在子组件挂载完成后启动，比如在父组件的mounted钩子中用$nextTick延迟启动：

   mounted() {
     this.$nextTick(() => {
       this.$refs.tour.start();
     });
   }
   

通过Ref获取子组件DOM元素（更可靠） #

如果子组件元素动态渲染或ID不好维护，直接传递DOM元素给vue-tour：

1. 父组件给子组件加ref，子组件给目标元素加ref：

   <!-- 父组件 -->
   <template>
     <ChildComponent ref="childComp" />
     <v-tour ref="tour" :steps="steps" />
   </template>
   
   <!-- 子组件 ChildComponent.vue -->
   <template>
     <q-btn ref="targetBtn" label="子组件操作按钮" />
   </template>
   

2. 父组件中获取子组件内的DOM元素，动态设置步骤的target：

   mounted() {
     this.$nextTick(() => {
       // 获取子组件内目标元素的原生DOM
       const targetDom = this.$refs.childComp.$refs.targetBtn.$el;
       // 更新对应步骤的target
       this.steps[1].target = targetDom; // 假设是第二个步骤
       this.$refs.tour.start();
     });
   }
   

动态传递唯一ID避免冲突 #

如果页面存在多个相同子组件，通过props传递动态生成的ID：

1. 父组件生成唯一ID，通过props传给子组件：

   <!-- 父组件 -->
   <template>
     <ChildComponent :target-id="uniqueChildId" />
   </template>
   <script>
   export default {
     data() {
       return {
         uniqueChildId: `child-btn-${Date.now()}`,
         steps: [
           {
             target: '', // 后续动态赋值
             content: '子组件按钮引导'
           }
         ]
       };
     },
     mounted() {
       this.$nextTick(() => {
         this.steps[0].target = `#${this.uniqueChildId}`;
         this.$refs.tour.start();
       });
     }
   };
   </script>
   

2. 子组件接收props并绑定到目标元素：

   <!-- 子组件 ChildComponent.vue -->
   <template>
     <q-btn :id="targetId" label="子组件操作按钮" />
   </template>
   <script>
   export default {
     props: ['targetId']
   };
   </script>
   

处理Quasar组件嵌套DOM #

部分Quasar组件会生成多层DOM结构，直接给组件加ID可能无法定位到实际需要高亮的元素，需直接给内部元素绑定ID：
比如q-input的附属按钮：

<!-- 子组件内的q-input -->
<q-input label="输入内容">
  <template v-slot:append>
    <q-btn id="input-submit-btn" label="提交" />
  </template>
</q-input>

此时vue-tour的target设为#input-submit-btn即可正确定位。

内容的提问来源于stack exchange，提问作者Kanika Gupta