diff --git a/packages/devui-vue/devui/steps-guide/directive/steps-guide.ts b/packages/devui-vue/devui/steps-guide/directive/steps-guide.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cc2088fc41cceba3e36fbbcfce394ede637fb943
--- /dev/null
+++ b/packages/devui-vue/devui/steps-guide/directive/steps-guide.ts
@@ -0,0 +1,7 @@
+export default {
+    mounted(el: HTMLElement, binding, vNode) {
+    },
+    updated(el: HTMLElement, binding) {
+    }
+  }
+  
\ No newline at end of file
diff --git a/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-ctrl.ts b/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-ctrl.ts
index 9c1b13a906e7d05082915e363a21dacddd82d9bc..e7ca9d2aa6af5bb977c9853637147310aec13d3d 100644
--- a/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-ctrl.ts
+++ b/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-ctrl.ts
@@ -1,25 +1,40 @@
-import { ref, nextTick } from 'vue'
+import { ref, nextTick, computed, WritableComputedRef, SetupContext } from 'vue'
+import { StepsGuideProps, Step } from '../src/steps-guide-types'
 
-export function useStepsGuideCtrl(stepsCount, stepIndex, updateGuidePosition) {
-  const showSteps = ref<boolean>(true)
-  const closeSteps = ():void => {
-    showSteps.value = false
+export function useStepsGuideCtrl(
+    props: StepsGuideProps, 
+    ctx: SetupContext<('guide-close'|'update:stepIndex')[]>,
+    updateGuidePosition: Function,
+    stepIndex: WritableComputedRef<number>
+    ) {
+  const stepsCount = computed<number>(() => props.steps.length)
+  
+  const closeGuide = () => {
+    // 缓存关闭前的index, 并在关闭后触发事件
+    const _index = stepIndex.value
+    stepIndex.value = -1
+    nextTick(() => {
+      ctx.emit('guide-close', _index)
+    })
   }
   const setCurrentIndex = (index:number):void => {
-    if (index > stepsCount.value || index < 0) index = 0
-      stepIndex.value = index
-      if (!showSteps.value) {
-        showSteps.value = true
+    if(index !== -1 && props.stepChange()){
+      if(index > -1 && index < stepsCount.value) {
+        stepIndex.value = index
+        console.log(stepIndex.value, index, stepsCount.value)
         nextTick(() => {
+          console.log(stepIndex.value, index, stepsCount.value)
           updateGuidePosition()
         })
       } else {
-        updateGuidePosition()
+        console.error(`stepIndex is not within the value range`)
       }
+    }
+    if(index === -1) closeGuide()
   }
   return {
-    showSteps,
-    closeSteps,
+    stepsCount,
+    closeGuide,
     setCurrentIndex
   }
 }
\ No newline at end of file
diff --git a/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-position.ts b/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-position.ts
index 6120300ee6ee1e5ec239de11419aa95a81c50f17..146ce4381794ebaa7cff581d4b95e7e8aa62c7e6 100644
--- a/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-position.ts
+++ b/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-position.ts
@@ -1,21 +1,19 @@
-import { Ref, ref, reactive, computed, nextTick } from 'vue'
-import { Step, positionConf } from '../src/steps-guide-types'
+import { ref, reactive, ComputedRef, nextTick } from 'vue'
+import { Step, positionConf, StepsGuideProps } from '../src/steps-guide-types'
 
-export function useStepsGuideNav(steps: Step[], stepIndex:Ref<number>) {
-  
-  const currentStep = computed<Step>(() => {
-    const _step = steps[stepIndex.value]
-    _step.position = _step.position || 'top'
-    return _step
-  })
+export function useStepsGuidePosition(
+  props: StepsGuideProps, 
+  currentStep: ComputedRef<Step>) {
   const guideClassList = ['devui-steps-guide']
   const stepsRef = ref(null)
   const guidePosition = reactive({
     left: '',
     top: '',
-    zIndex: 1100
+    zIndex: props.zIndex
   })
+ 
   const updateGuidePosition = () => {
+    if(!currentStep.value) return;
     const baseTop = window.pageYOffset - document.documentElement.clientTop
     const baseLeft = window.pageXOffset - document.documentElement.clientLeft
     const currentStepPosition:positionConf = currentStep.value.position
@@ -63,13 +61,14 @@ export function useStepsGuideNav(steps: Step[], stepIndex:Ref<number>) {
     }
     guidePosition.left = _left + 'px'
     guidePosition.top = _top + 'px'
-    nextTick(() => {
-      // 位置更新后滚动视图
-      stepGuideElement.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"})
-    })
+    if(props.scrollToTargetSwitch) {
+      nextTick(() => {
+        // 位置更新后滚动视图
+        stepGuideElement.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"})
+      })
+    }
   }
   return {
-    currentStep,
     stepsRef,
     guidePosition,
     guideClassList,
diff --git a/packages/devui-vue/devui/steps-guide/index.ts b/packages/devui-vue/devui/steps-guide/index.ts
index 3e41d4912f03cb0733cabf48331284f71b49e903..f783ba87f370259b9443387b7eb206cd88794a9b 100644
--- a/packages/devui-vue/devui/steps-guide/index.ts
+++ b/packages/devui-vue/devui/steps-guide/index.ts
@@ -1,6 +1,7 @@
 import type { App } from 'vue'
 import StepsGuide from './src/steps-guide'
 
+import StepsGuideDirective from './directive/steps-guide'
 StepsGuide.install = function(app: App): void {
   app.component(StepsGuide.name, StepsGuide)
 }
@@ -10,8 +11,9 @@ export { StepsGuide }
 export default {
   title: 'StepsGuide 操作指引',
   category: '导航',
-  status: '50%',
+  status: '80%',
   install(app: App): void {
     app.use(StepsGuide as any)
+    app.directive('StepsGuide', StepsGuideDirective)
   }
 }
diff --git a/packages/devui-vue/devui/steps-guide/src/steps-guide-types.ts b/packages/devui-vue/devui/steps-guide/src/steps-guide-types.ts
index 6c712312b44318ff434c7a147053621fcb008516..83219f7933c0b565ff2384ac18e12c3a1091769e 100644
--- a/packages/devui-vue/devui/steps-guide/src/steps-guide-types.ts
+++ b/packages/devui-vue/devui/steps-guide/src/steps-guide-types.ts
@@ -14,6 +14,10 @@ export type Step = {
 }
 export const stepsGuideProps = {
   steps: Array as PropType<Step[]>,
+  stepIndex: {
+    type: Number,
+    default: undefined
+  },
   showClose: {
     type: Boolean,
     default: true
@@ -21,6 +25,20 @@ export const stepsGuideProps = {
   showDots: {
     type: Boolean,
     default: true
+  },
+  scrollToTargetSwitch: {
+    type: Boolean,
+    default: true
+  },
+  zIndex: {
+    type: Number,
+    default: 1100
+  },
+  stepChange: {
+    type: Function,
+    default(){
+      return true
+    }
   }
 } as const
 
diff --git a/packages/devui-vue/devui/steps-guide/src/steps-guide.tsx b/packages/devui-vue/devui/steps-guide/src/steps-guide.tsx
index 93cf84bde5af5c8d04b8d810404c949f10fdd881..14c621ce736f61686a3d0ce019933a206799b36d 100644
--- a/packages/devui-vue/devui/steps-guide/src/steps-guide.tsx
+++ b/packages/devui-vue/devui/steps-guide/src/steps-guide.tsx
@@ -1,77 +1,70 @@
 import './steps-guide.scss'
+import { computed, ref, defineComponent, Teleport, onMounted } from 'vue'
+import { stepsGuideProps, StepsGuideProps, Step } from './steps-guide-types'
+import { useStepsGuidePosition, useStepsGuideCtrl } from '../hooks'
 
-import { defineComponent, Teleport, ref, onMounted, computed } from 'vue'
-import { stepsGuideProps, StepsGuideProps } from './steps-guide-types'
-import { useStepsGuideNav, useStepsGuideCtrl } from '../hooks'
 export default defineComponent({
   name: 'DStepsGuide',
   props: stepsGuideProps,
-  emits: [],
+  emits: ['guide-close', 'update:stepIndex'],
   setup(props: StepsGuideProps, ctx) {
-    const stepsCount = computed<number>(() => props.steps.length - 1)
-    const stepIndex = ref<number>(0)
+    const stepIndexData = ref<number>((props.stepIndex ?? 0) as number)
+    const stepIndex = computed<number>({
+      set: val => {
+        if(props.stepIndex != null) {
+          ctx.emit('update:stepIndex', val)
+        }
+        stepIndexData.value = val
+      },
+      get: () => stepIndexData.value
+    })
+    const currentStep = computed<Step>(() => {
+      const _step = props.steps[stepIndex.value]
+      if(_step) _step.position = _step.position || 'top'
+      return _step
+    })
+
     const {
-      currentStep,
       stepsRef,
       guidePosition,
       guideClassList,
-      updateGuidePosition } = useStepsGuideNav(props.steps, stepIndex)
-    const { showSteps,
-      closeSteps,
-      setCurrentIndex } = useStepsGuideCtrl(stepsCount, stepIndex, updateGuidePosition)
+      updateGuidePosition } = useStepsGuidePosition(props, currentStep)
+    const { 
+      stepsCount,
+      closeGuide,
+      setCurrentIndex } = useStepsGuideCtrl(props, ctx, updateGuidePosition, stepIndex)
 
     onMounted(() => {
       updateGuidePosition()
     })
-
-    return {
-      stepsCount,
-      stepIndex,
-      showSteps,
-      guidePosition,
-      guideClassList,
-      stepsRef,
-      currentStep,
-      setCurrentIndex,
-      closeSteps
-    }
-  },
-  render(props) {
-    const { showSteps,
-      guidePosition,
-      guideClassList,
-      currentStep,
-      stepIndex,
-      stepsCount,
-      setCurrentIndex,
-      closeSteps,
-      showClose,
-      showDots } = props
-
-    return showSteps ?
+    ctx.expose({
+      closeGuide,
+      setCurrentIndex
+    })
+    return () => stepIndex.value > -1 && stepsCount.value > 0 ? 
       (<Teleport to="body">
-        <div style={guidePosition} class={guideClassList} ref="stepsRef">
+        <div style={ guidePosition } class={guideClassList} ref={ stepsRef }>
           <div class="devui-shining-dot"></div>
           <div class="devui-shining-plus"></div>
           <div class="devui-arrow"></div>
           <div class="devui-guide-container">
-            <p class="devui-title">{currentStep.title}</p>
-            {showClose ? <div class="icon icon-close" onClick={closeSteps}></div> : null}
-            <div class="devui-content">{currentStep.content}</div>
+            <p class="devui-title">{currentStep.value.title}</p>
+            {props.showClose ? <div class="icon icon-close" onClick={closeGuide}></div> : null}
+            <div class="devui-content">{currentStep.value.content}</div>
             <div class="devui-ctrl">
               {
-                showDots ?
+                props.showDots ?
                   <div class="devui-dots">
                     {props.steps.map((step, index) => {
-                      return <em class={ ['icon icon-dot-status', currentStep === step ? 'devui-active' : ''] } key={ index }></em>
+                      return <em class={ ['icon icon-dot-status', currentStep.value === step ? 'devui-active' : ''] } key={ index }></em>
                     })}
                   </div> : null
               }
               <div class="devui-guide-btn">
-                {stepIndex > 0 ? <div class="devui-prev-step" onClick={() => setCurrentIndex(--props.stepIndex)}>{'上一步'}</div> : null}
-                {stepIndex === stepsCount ?
-                  <div onClick={closeSteps}>{'我知道啦'}</div> :
-                  <div class="devui-next-step" onClick={() => { setCurrentIndex(++props.stepIndex) }}>{'我知道啦,继续'}</div>}
+                {stepIndex.value > 0 ? <div class="devui-prev-step" onClick={() => setCurrentIndex(stepIndex.value - 1)}>{'上一步'}</div> : null}
+                {stepIndex.value === stepsCount.value - 1 ?
+                  <div onClick={closeGuide}>{'我知道啦'}</div> :
+                  <div class="devui-next-step" onClick={() => { setCurrentIndex(stepIndex.value + 1) }}>{'我知道啦,继续'}</div>}
               </div>
             </div>
           </div>
diff --git a/packages/devui-vue/docs/components/steps-guide/index.md b/packages/devui-vue/docs/components/steps-guide/index.md
index 4744d655014125029c194ed6273c4848e6937098..3c6973d94abbeaf3ed7f9465810394f971632c42 100644
--- a/packages/devui-vue/docs/components/steps-guide/index.md
+++ b/packages/devui-vue/docs/components/steps-guide/index.md
@@ -11,25 +11,94 @@
 :::demo  
 ```vue
 <template>
-  <d-button btnStyle="common" class="step-1">Step 1</d-button>
-  <d-button btnStyle="common" class="step-2">Step 2</d-button>
-  <d-button btnStyle="common" class="step-3">Step 3</d-button>
-  <d-steps-guide :steps="steps" ref="stepsRef"></d-steps-guide>
+  <d-button btnStyle="common" class="step-1" @click="handleClick(0)">Step 1</d-button>
+  <d-button btnStyle="common" class="step-2" @click="handleClick(1)">Step 2</d-button>
+  <d-button btnStyle="common" class="step-3" @click="handleClick(2)">Step 3</d-button>
+  <d-steps-guide ref="stepRef" :steps="steps" v-model:step-index="stepIndex" :step-change="handleStepChange" @guide-close="handleGuideClose"></d-steps-guide>
 </template>
 <script>
   import { defineComponent, reactive, ref, onMounted } from 'vue'
   export default defineComponent({
     setup() {
-      const steps = reactive([
+      const baseSteps = [
           { title: '基础用法1', content: '业务推出新特性，或复杂的业务逻辑需要指引用户时使用。', trigger: '.step-1' },
           { title: '基础用法2', content: '业务推出新特性，或复杂的业务逻辑需要指引用户时使用。', trigger: '.step-2' },
           { title: '基础用法3', content: '业务推出新特性，或复杂的业务逻辑需要指引用户时使用。', trigger: '.step-3' }
-      ]);
-      const stepsRef = ref(null)
-
+      ], positionSteps = 
+          [{ title: '弹出位置 top-left',
+            content: 'Steps Guide', 
+            trigger: '.top-left', 
+            position: 'top-left' 
+          },{ title: '弹出位置 top', 
+            content: 'Steps Guide', 
+            trigger: '.top', 
+            position: 'top' 
+          },{ title: '弹出位置 top-right', 
+            content: 'Steps Guide',
+            trigger: '.top-right', 
+            position: 'top-right'
+          },
+          { title: '弹出位置 right',
+            content: 'Steps Guide', 
+            trigger: '.right', 
+            position: 'right' 
+          },{ title: '弹出位置 bottom-right', 
+            content: 'Steps Guide', 
+            trigger: '.bottom-right', 
+            position: 'bottom-right' 
+          },{ title: '弹出位置 bottom', 
+            content: 'Steps Guide', 
+            trigger: '.bottom', 
+            position: 'bottom' 
+          },{ title: '弹出位置 bottom-left', 
+            content: 'Steps Guide', 
+            trigger: '.bottom-left', 
+            position: 'bottom-left' 
+          },{ title: '弹出位置 left', 
+            content: 'Steps Guide', 
+            trigger: '.left', 
+            position: 'left' 
+          }], 
+            customSteps = 
+              [{ title: '自定义用法',
+                content: '自定义操作指引信息弹出的位置和元素。',
+                trigger: '.custom-1', 
+                position: {
+                  leftFix: 0,
+                  topFix: 0,
+                  type: 'top'
+                } 
+              },{ 
+                title: '自定义用法', 
+                content: '自定义操作指引信息弹出的位置和元素。',
+                trigger: '.custom-2',
+                target: '.nav-links', 
+                position: 'bottom'
+              }]
+      let steps = ref(baseSteps);
+      const stepIndex = ref(0), stepRef = ref(null)
+      const handleClick = index => {
+        steps.value = baseSteps
+        stepRef.value.setCurrentIndex(index)
+      }
+      const handleStepChange = (index, prevIndex) => {
+        /* code */ 
+        return true
+      }
+      const handleGuideClose = (index) => {
+        const stepsLength = steps.value.length
+        if(index === stepsLength - 1 && stepsLength !== 2) {
+          steps.value = (stepsLength === 3 ? positionSteps : customSteps);
+          stepRef.value.setCurrentIndex(0)
+        }
+      }
       return {
+        stepRef,
         steps,
-        stepsRef
+        stepIndex,
+        handleClick,
+        handleStepChange,
+        handleGuideClose
       }
     }
   })
@@ -61,13 +130,13 @@
     <d-button btnStyle="common" class="bottom" width="120px" @click="handleClick(5)">Bottom</d-button>
     <d-button btnStyle="common" class="bottom-right" width="120px" @click="handleClick(4)">Bottom-right</d-button>
   </div>
-  <d-steps-guide :steps="stepsPosition" ref="stepsPositionRef"></d-steps-guide>
+  <d-steps-guide :steps="steps" v-model:step-index="stepIndex" ref="stepsRef"></d-steps-guide>
 </template>
 <script>
-  import { defineComponent, reactive, ref } from 'vue'
+  import { defineComponent, reactive, ref, onMounted } from 'vue'
   export default defineComponent({
     setup() {
-      const stepsPosition = reactive([
+      const steps = reactive([
           { title: '弹出位置 top-left',
             content: 'Steps Guide', 
             trigger: '.top-left', 
@@ -110,15 +179,16 @@
           }
       ]);
 
-      const stepsPositionRef = ref(null)
-    
+      const stepsRef = ref(null), stepIndex = ref(-1);
       const handleClick = (index) => {
-        stepsPositionRef.value.setCurrentIndex(index)
+        stepsRef.value.setCurrentIndex(index)
       }
+     
       return {
-        stepsPosition,
+        steps,
+        stepIndex,
         handleClick,
-        stepsPositionRef
+        stepsRef
       }
     }
   })
@@ -142,10 +212,11 @@
 ```vue
 <template>
   <d-button btnStyle="common" class="bottom">Custom Position</d-button>
-  <d-steps-guide :steps="customSteps" :showDots="false" :showClose="false"></d-steps-guide>
+  <d-button btnStyle="common" class="bottom">Custom Target</d-button>
+  <d-steps-guide ref="stepsRef" :steps="customSteps" :showDots="false" :showClose="false"></d-steps-guide>
 </template>
 <script>
-import { defineComponent, reactive } from 'vue'
+import { defineComponent, reactive, ref, onMounted } from 'vue'
 export default defineComponent({
   setup() {
     const customSteps = reactive([
@@ -153,9 +224,9 @@ export default defineComponent({
           content: '自定义操作指引信息弹出的位置和元素。',
           trigger: '.custom-1', 
           position: {
-            left: 0,
-            top: 0,
-            type: 'top-left'
+            leftFix: 0,
+            topFix: 0,
+            type: 'top'
           } },
         { 
           title: '自定义用法', 
@@ -165,8 +236,13 @@ export default defineComponent({
           position: 'bottom'
         },
     ]);
+    const stepsRef = ref(null)
+    onMounted(() => {
+      stepsRef.value.closeGuide('custom')
+    })
     return {
-      customSteps
+      customSteps,
+      stepsRef
     }
   }
 })
@@ -180,6 +256,10 @@ d-steps-guide 参数
 
 | 参数  | 类型  | 默认 | 说明                   | 跳转                  |
 | ----- | ----- | ---- | ---------------------- | --------------------- |
-| steps | array | Step[]   | 必选，操作指引步骤数组 | [基本用法](#基本用法) |
+| steps | array | Step[] | 必选，操作指引步骤数组 | [基本用法](#基本用法) |
+| stepIndex | number | undefined |可选，表示当前指引的索引，为 -1 时表示指引为关闭状态 | [基本用法](#基本用法) |
+| zIndex | number | 1100 | 可选，用于调整指引信息的显示层级 | 
 | showClose | boolean | true   | 可选，是否显示关闭按钮 | [自定义](#基本用法) |
-| showDots | boolean | true   | 可选，是否显示表示导航指引顺序的圆点 | [自定义](#基本用法) |
\ No newline at end of file
+| showDots | boolean | true   | 可选，是否显示表示导航指引顺序的圆点 | [自定义](#基本用法) |
+| scrollToTargetSwitch | boolean | true | 可选，是否自动滚动页面至指引信息显示的位置 dom | |
+| stepChange | Function | | 可选，在切换步骤时前置执行，返回 boolean 值决定是否显示当前步骤
\ No newline at end of file