diff --git a/packages/devui-vue/devui/steps-guide/__tests__/steps-guide-demo.tsx b/packages/devui-vue/devui/steps-guide/__tests__/steps-guide-demo.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..29c4caf23ea9d9399513ccad8933a1a00ec6c712
--- /dev/null
+++ b/packages/devui-vue/devui/steps-guide/__tests__/steps-guide-demo.tsx
@@ -0,0 +1,71 @@
+import { ref, defineComponent, reactive } from 'vue'
+import DStepsGuide from '../src/steps-guide'
+export default defineComponent({
+  name: 'StepsGuideDemo',
+  components: {
+    'd-steps-guide': DStepsGuide,
+  },
+  setup() {
+    const steps = reactive([{ 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' 
+    }])
+    const stepRef = ref(null), stepIndex = ref(0)
+    const handleClick = (index) => {
+      stepRef.value.setCurrentIndex(index)
+    }
+    const handleClose = () => {
+      stepRef.value.closeGuide()
+    }
+    return {
+      steps,
+      stepRef,
+      stepIndex,
+      handleClick,
+      handleClose
+    }
+  },
+  render(props){
+    return (<>
+      <button class="top-left" onClick={ () => props.handleClick(0) }>Top-left</button>
+      <button class="top" onClick={ () => props.handleClick(1) }>Top</button>
+      <button class="top-right" onClick={ () => props.handleClick(2) }>Top-right</button>
+      <button class="right" onClick={ () => props.handleClick(3) }>Right</button>
+      <button class="bottom-right" onClick={ () => props.handleClick(4) }>Bottom-right</button>
+      <button class="bottom" onClick={ () => props.handleClick(5) }>Bottom</button>
+      <button class="bottom-left" onClick={ () => props.handleClick(6) }>Bottom-left</button>
+      <button class="left" onClick={ () => props.handleClick(7) }>Left</button>
+      <button class="close" onClick={ props.handleClose }>Close</button>
+      <d-steps-guide ref="stepRef" steps={ props.steps } v-model:step-index={ props.stepIndex }></d-steps-guide></>)
+  }
+})
\ No newline at end of file
diff --git a/packages/devui-vue/devui/steps-guide/__tests__/steps-guide.spec.ts b/packages/devui-vue/devui/steps-guide/__tests__/steps-guide.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..86fb4534ed4db471e1b0d5d1ad902a5a4b4bdd03
--- /dev/null
+++ b/packages/devui-vue/devui/steps-guide/__tests__/steps-guide.spec.ts
@@ -0,0 +1,53 @@
+import { mount } from '@vue/test-utils';
+import StepsGuideDemo from './steps-guide-demo';
+document.body.innerHTML = `
+  <button class="top-left">Top-left</button>
+  <button class="top">Top</button>
+  <button class="top-right">Top-right</button>
+  <button class="right">Right</button>
+  <button class="bottom-right">Bottom-right</button>
+  <button class="bottom">Bottom</button>
+  <button class="bottom-left">Bottom-left</button>
+  <button class="left">Left</button>`
+  
+describe('d-steps-guide', () => {
+  it('test steps change', async () => {
+    const wrapper = mount(StepsGuideDemo)
+
+    await wrapper.get('.top').trigger('click')
+    expect(wrapper.vm.stepIndex).toBe(1)
+    expect(document.querySelector('.devui-steps-guide').className).toContain('top')
+
+    await wrapper.get('.right').trigger('click')
+    expect(wrapper.vm.stepIndex).toBe(3)
+    expect(document.querySelector('.devui-steps-guide').className).toContain('right')
+
+    await wrapper.get('.bottom').trigger('click')
+    expect(wrapper.vm.stepIndex).toBe(5)
+    expect(document.querySelector('.devui-steps-guide').className).toContain('bottom')
+
+    await wrapper.get('.left').trigger('click')
+    expect(wrapper.vm.stepIndex).toBe(7)
+    expect(document.querySelector('.devui-steps-guide').className).toContain('left')
+    
+    await wrapper.get('.top-left').trigger('click')
+    expect(wrapper.vm.stepIndex).toBe(0)
+    expect(document.querySelector('.devui-steps-guide').className).toContain('top-left')
+
+    await wrapper.get('.top-right').trigger('click')
+    expect(wrapper.vm.stepIndex).toBe(2)
+    expect(document.querySelector('.devui-steps-guide').className).toContain('top-right')
+
+    await wrapper.get('.bottom-right').trigger('click')
+    expect(wrapper.vm.stepIndex).toBe(4)
+    expect(document.querySelector('.devui-steps-guide').className).toContain('bottom-right')
+
+    await wrapper.get('.bottom-left').trigger('click')
+    expect(wrapper.vm.stepIndex).toBe(6)
+    expect(document.querySelector('.devui-steps-guide').className).toContain('bottom-left')
+
+    await wrapper.get('.close').trigger('click')
+    expect(wrapper.vm.stepIndex).toBe(-1)
+    expect(document.querySelector('.devui-steps-guide')).toBe(null)
+  });
+});
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 e7ca9d2aa6af5bb977c9853637147310aec13d3d..c35b6ce8f2a193b4fb45785fee77e1833e80b6df 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
@@ -21,9 +21,7 @@ export function useStepsGuideCtrl(
     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 {
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 146ce4381794ebaa7cff581d4b95e7e8aa62c7e6..86e3bdd770969716053e92a36b78f61ff34e4d69 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
@@ -4,7 +4,7 @@ import { Step, positionConf, StepsGuideProps } from '../src/steps-guide-types'
 export function useStepsGuidePosition(
   props: StepsGuideProps, 
   currentStep: ComputedRef<Step>) {
-  const guideClassList = ['devui-steps-guide']
+  const guideClassList = reactive(['devui-steps-guide'])
   const stepsRef = ref(null)
   const guidePosition = reactive({
     left: '',
@@ -13,7 +13,7 @@ export function useStepsGuidePosition(
   })
  
   const updateGuidePosition = () => {
-    if(!currentStep.value) return;
+    if(!currentStep.value || !stepsRef.value) return;
     const baseTop = window.pageYOffset - document.documentElement.clientTop
     const baseLeft = window.pageXOffset - document.documentElement.clientLeft
     const currentStepPosition:positionConf = currentStep.value.position
@@ -29,6 +29,10 @@ export function useStepsGuidePosition(
       guideClassList.splice(1, 1, currentStepPosition)
       const triggerSelector = currentStep.value.target || currentStep.value.trigger
       const triggerElement = document.querySelector(triggerSelector)
+      if(!triggerElement) {
+        console.warn(`${triggerSelector} 不存在!`)
+        return false
+      }
       const targetRect = triggerElement.getBoundingClientRect()
       _left = targetRect.left + triggerElement.clientWidth / 2 - stepGuideElement.clientWidth / 2 + baseLeft
       _top = targetRect.top + triggerElement.clientHeight / 2 - stepGuideElement.clientHeight / 2 + baseTop
@@ -61,7 +65,7 @@ export function useStepsGuidePosition(
     }
     guidePosition.left = _left + 'px'
     guidePosition.top = _top + 'px'
-    if(props.scrollToTargetSwitch) {
+    if(props.scrollToTargetSwitch && typeof stepGuideElement.scrollIntoView === 'function') {
       nextTick(() => {
         // 位置更新后滚动视图
         stepGuideElement.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"})