feat(guide): triggered only when showStep is true (#3926)

* feat(guide): [guide] triggered only when showStep is true

* feat(guide): triggered only when showStep is true

* feat:  edit  callback demo  and basic-usage demo

* feat(guide): triggered only when showStep is true

Author: wuyiping0628

examples/sites/demos/pc/app/guide/basic-usage-composition-api.vue

@@ -41,7 +41,10 @@ const domData = ref([
         text: '完成',
         action: 'complete'
       }
-    ]
+    ],
+    destroy: () => {
+      showStep.value = false
+    }
   }
 ])
 

examples/sites/demos/pc/app/guide/basic-usage.vue

@@ -48,7 +48,10 @@ export default {
               text: '下一步',
               action: 'next'
             }
-          ]
+          ],
+          destroy: () => {
+            this.showStep = false
+          }
         }
       ]
     }

examples/sites/demos/pc/app/guide/callback-composition-api.vue

@@ -131,6 +131,7 @@ const domData = ref([
     ],
     destroy: () => {
       label.value = 'destroy'
+      showStep.value = false
     },
     complete: () => {
       label.value = 'complete'

examples/sites/demos/pc/app/guide/callback.vue

@@ -137,6 +137,7 @@ export default {
           ],
           destroy: () => {
             this.label = 'destroy'
+            this.showStep = false
           },
           complete: () => {
             this.label = 'complete'

packages/renderless/src/guide/vue.ts

@@ -34,7 +34,16 @@ export const renderless = (
     beforeUnmount: beforeUnmount(state)
   }
 
-  watch(() => props.showStep, api.createShepherd)
+  watch(
+    () => props.showStep,
+    (newVal) => {
+      if (newVal) {
+        api.createShepherd()
+      } else {
+        state?.tour?.hide()
+      }
+    }
+  )
 
   onMounted(api.mounted)
   onBeforeUnmount(api.beforeUnmount)