diff --git a/devui/steps-guide/hooks/index.ts b/devui/steps-guide/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2cc49d128a46584ea6d750d4943fae3abe12d769
--- /dev/null
+++ b/devui/steps-guide/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from './use-steps-guide-position'
+export * from './use-steps-guide-ctrl'
\ No newline at end of file
diff --git a/devui/steps-guide/hooks/use-steps-guide-ctrl.ts b/devui/steps-guide/hooks/use-steps-guide-ctrl.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9c1b13a906e7d05082915e363a21dacddd82d9bc
--- /dev/null
+++ b/devui/steps-guide/hooks/use-steps-guide-ctrl.ts
@@ -0,0 +1,25 @@
+import { ref, nextTick } from 'vue'
+
+export function useStepsGuideCtrl(stepsCount, stepIndex, updateGuidePosition) {
+  const showSteps = ref<boolean>(true)
+  const closeSteps = ():void => {
+    showSteps.value = false
+  }
+  const setCurrentIndex = (index:number):void => {
+    if (index > stepsCount.value || index < 0) index = 0
+      stepIndex.value = index
+      if (!showSteps.value) {
+        showSteps.value = true
+        nextTick(() => {
+          updateGuidePosition()
+        })
+      } else {
+        updateGuidePosition()
+      }
+  }
+  return {
+    showSteps,
+    closeSteps,
+    setCurrentIndex
+  }
+}
\ No newline at end of file
diff --git a/devui/steps-guide/hooks/use-steps-guide-position.ts b/devui/steps-guide/hooks/use-steps-guide-position.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4cfeff7496aee330566686bd77e728f55793970a
--- /dev/null
+++ b/devui/steps-guide/hooks/use-steps-guide-position.ts
@@ -0,0 +1,74 @@
+import { Ref, ref, reactive, computed } from 'vue'
+import { Step, positionConf } 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
+  })
+  const guideClassList = ['d-steps-guide']
+  const stepsRef = ref(null)
+  const guidePosition = reactive({
+    left: '',
+    top: '',
+    zIndex: 1100
+  })
+  const updateGuidePosition = () => {
+    const baseTop = window.pageYOffset - document.documentElement.clientTop
+    const baseLeft = window.pageXOffset - document.documentElement.clientLeft
+    const currentStepPosition:positionConf = currentStep.value.position
+    let _left, _top
+    // 自定义 position位置
+    if (typeof currentStepPosition !== 'string') {
+      const { top = 0, left = 0, type = 'top' } = currentStepPosition
+      guideClassList.splice(1, 1, type)
+      _left = left
+      _top = top
+    } else {
+      guideClassList.splice(1, 1, currentStepPosition)
+      const stepGuideElement = stepsRef.value
+      const triggerSelector = currentStep.value.target || currentStep.value.trigger
+      const triggerElement = document.querySelector(triggerSelector)
+      const targetRect = triggerElement.getBoundingClientRect()
+      _left = targetRect.left + triggerElement.clientWidth / 2 - stepGuideElement.clientWidth / 2 + baseLeft
+      _top = targetRect.top + triggerElement.clientHeight / 2 - stepGuideElement.clientHeight / 2 + baseTop
+      
+      const positionTypes = currentStepPosition.split('-')
+      switch (positionTypes[0]) {
+        case 'top':
+          _top += (-stepGuideElement.clientHeight / 2 - triggerElement.clientHeight)
+          break
+        case 'bottom':
+          _top += (stepGuideElement.clientHeight / 2 + triggerElement.clientHeight)
+          break
+        case 'left':
+          _top += (stepGuideElement.clientHeight / 2 - triggerElement.clientHeight)
+          _left += (-stepGuideElement.clientWidth / 2 - triggerElement.clientWidth / 2)
+          break
+        case 'right':
+          _top += (stepGuideElement.clientHeight / 2 - triggerElement.clientHeight)
+          _left += (stepGuideElement.clientWidth / 2 + triggerElement.clientWidth / 2)
+          break
+      }
+      switch (positionTypes[1]) {
+        case 'left':
+          _left += (stepGuideElement.clientWidth / 2 - triggerElement.clientWidth / 2)
+          break
+        case 'right':
+          _left += (-stepGuideElement.clientWidth / 2 + triggerElement.clientWidth / 2)
+          break
+      }
+    }
+    guidePosition.left = _left + 'px'
+    guidePosition.top = _top + 'px'
+  }
+  return {
+    currentStep,
+    stepsRef,
+    guidePosition,
+    guideClassList,
+    updateGuidePosition
+  }
+}
\ No newline at end of file
diff --git a/devui/steps-guide/src/steps-guide-types.ts b/devui/steps-guide/src/steps-guide-types.ts
index c162691a8b5a76dcc0a54be49824e8a031313e57..6c712312b44318ff434c7a147053621fcb008516 100644
--- a/devui/steps-guide/src/steps-guide-types.ts
+++ b/devui/steps-guide/src/steps-guide-types.ts
@@ -4,16 +4,24 @@ export type positionConf = {
   left: number
   top: number
   type: string
-} 
+} | positionType
 export type Step = {
   title: string
   content: string
   trigger: string
   target?: string
-  position?: positionType | positionConf
+  position?: positionConf
 }
 export const stepsGuideProps = {
-  steps: Array as PropType<Step[]>
+  steps: Array as PropType<Step[]>,
+  showClose: {
+    type: Boolean,
+    default: true
+  },
+  showDots: {
+    type: Boolean,
+    default: true
+  }
 } as const
 
 export type StepsGuideProps = ExtractPropTypes<typeof stepsGuideProps>
diff --git a/devui/steps-guide/src/steps-guide.tsx b/devui/steps-guide/src/steps-guide.tsx
index afaf90760176d1ccc7dbc46144b5014f455eeca6..93cf84bde5af5c8d04b8d810404c949f10fdd881 100644
--- a/devui/steps-guide/src/steps-guide.tsx
+++ b/devui/steps-guide/src/steps-guide.tsx
@@ -1,118 +1,81 @@
 import './steps-guide.scss'
 
-import { defineComponent, Teleport, ref, onMounted, reactive, computed } from 'vue'
-import { stepsGuideProps, StepsGuideProps, Step, positionConf } from './steps-guide-types'
-
+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: [],
   setup(props: StepsGuideProps, ctx) {
-    const teleport = Teleport
-    const stepsRef = ref(null)
     const stepsCount = computed<number>(() => props.steps.length - 1)
-    const stepIndex = ref<number>(0), showSteps = ref<boolean>(true)
-    const currentStep = computed<Step>(() => {
-      const _step = props.steps[stepIndex.value]
-      _step.position = _step.position || 'top'
-      return _step
-    })
-    const guideClassName = ['d-steps-guide']
-    const position = reactive({
-      left: '',
-      top: '',
-      zIndex: 1100
-    })
+    const stepIndex = ref<number>(0)
+    const {
+      currentStep,
+      stepsRef,
+      guidePosition,
+      guideClassList,
+      updateGuidePosition } = useStepsGuideNav(props.steps, stepIndex)
+    const { showSteps,
+      closeSteps,
+      setCurrentIndex } = useStepsGuideCtrl(stepsCount, stepIndex, updateGuidePosition)
+
     onMounted(() => {
       updateGuidePosition()
     })
-    function updateGuidePosition(){
-      const baseTop = window.pageYOffset - document.documentElement.clientTop
-      const baseLeft = window.pageXOffset - document.documentElement.clientLeft
-      const currentStepPosition = currentStep.value.position
-      let left, top
-      // 自定义 position位置
-      if(typeof currentStepPosition !== 'string'){
-        guideClassName[1] = currentStepPosition.type
 
-        left = currentStepPosition.left
-        top = currentStepPosition.top
-      } else {
-        guideClassName[1] = currentStepPosition
-        const stepGuideElement = stepsRef.value
-        const triggerSelector = currentStep.value.target || currentStep.value.trigger
-        const triggerElement = document.querySelector(triggerSelector)
-        const targetRect = triggerElement.getBoundingClientRect()
-        left = targetRect.left + triggerElement.clientWidth / 2 - stepGuideElement.clientWidth / 2 + baseLeft
-        top = targetRect.top + triggerElement.clientHeight / 2 - stepGuideElement.clientHeight / 2 + baseTop
-        const positionTypes = currentStepPosition.split('-')
-        switch(positionTypes[0]){
-          case 'top':
-            top += (-stepGuideElement.clientHeight / 2 - triggerElement.clientHeight)
-          break
-          case 'bottom':
-            top += (stepGuideElement.clientHeight / 2 + triggerElement.clientHeight)
-          break
-          case 'left':
-            top += (stepGuideElement.clientHeight / 2 - triggerElement.clientHeight)
-            left += (-stepGuideElement.clientWidth / 2 - triggerElement.clientWidth / 2)
-            break
-          case 'right':
-            top += (stepGuideElement.clientHeight / 2 - triggerElement.clientHeight)
-            left += (stepGuideElement.clientWidth / 2 + triggerElement.clientWidth / 2)
-            break
-        }
-        switch(positionTypes[1]){
-          case 'left':
-            left += (stepGuideElement.clientWidth / 2 - triggerElement.clientWidth / 2)
-            break
-          case 'right':
-            left += (-stepGuideElement.clientWidth / 2 + triggerElement.clientWidth / 2)
-            break
-        }
-      }
-      position.left = left + 'px'
-      position.top = top + 'px'
+    return {
+      stepsCount,
+      stepIndex,
+      showSteps,
+      guidePosition,
+      guideClassList,
+      stepsRef,
+      currentStep,
+      setCurrentIndex,
+      closeSteps
     }
-    function renderPrev(){
-      return stepIndex.value > 0 ? <div class="devui-prev-step" onClick={ prevStep }>{ '上一步' }</div> : null
-    }
-    function renderNext(){
-      return stepIndex.value === stepsCount.value ? 
-        <div onClick={ closeSteps }>{ '我知道啦' }</div> :
-        <div class="devui-next-step" onClick={ nextStep }>{ '我知道啦,继续' }</div>
-    }
-    function prevStep(){
-      stepIndex.value--
-      updateGuidePosition()
-    }
-    function nextStep(){
-      stepIndex.value++
-      updateGuidePosition()
-    }
-    function closeSteps(){
-      showSteps.value = false
-    }
-    return () => showSteps.value ? 
-      (<teleport to="body">
-        <div style={ position } class={ guideClassName } ref={ stepsRef }>
+  },
+  render(props) {
+    const { showSteps,
+      guidePosition,
+      guideClassList,
+      currentStep,
+      stepIndex,
+      stepsCount,
+      setCurrentIndex,
+      closeSteps,
+      showClose,
+      showDots } = props
+
+    return showSteps ?
+      (<Teleport to="body">
+        <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.value.title }</p>
-            <div class="devui-content">{ currentStep.value.content }</div>
+            <p class="devui-title">{currentStep.title}</p>
+            {showClose ? <div class="icon icon-close" onClick={closeSteps}></div> : null}
+            <div class="devui-content">{currentStep.content}</div>
             <div class="devui-ctrl">
-              <div class="devui-dots">
-                <em class="icon icon-dot-status devui-active"></em>
-              </div>
+              {
+                showDots ?
+                  <div class="devui-dots">
+                    {props.steps.map((step, index) => {
+                      return <em class={ ['icon icon-dot-status', currentStep === step ? 'devui-active' : ''] } key={ index }></em>
+                    })}
+                  </div> : null
+              }
               <div class="devui-guide-btn">
-                { renderPrev() }
-                { renderNext() }
+                {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>}
               </div>
             </div>
           </div>
         </div>
-      </teleport>) : null
+      </Teleport>) : null
   }
 })
diff --git a/docs/components/steps-guide/index.md b/docs/components/steps-guide/index.md
index d62c463c692e0fccd1c73663a44e40c1d457306a..4744d655014125029c194ed6273c4848e6937098 100644
--- a/docs/components/steps-guide/index.md
+++ b/docs/components/steps-guide/index.md
@@ -14,10 +14,10 @@
   <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"></d-steps-guide>
+  <d-steps-guide :steps="steps" ref="stepsRef"></d-steps-guide>
 </template>
 <script>
-  import { defineComponent, reactive } from 'vue'
+  import { defineComponent, reactive, ref, onMounted } from 'vue'
   export default defineComponent({
     setup() {
       const steps = reactive([
@@ -25,8 +25,11 @@
           { title: '基础用法2', content: '业务推出新特性，或复杂的业务逻辑需要指引用户时使用。', trigger: '.step-2' },
           { title: '基础用法3', content: '业务推出新特性，或复杂的业务逻辑需要指引用户时使用。', trigger: '.step-3' }
       ]);
+      const stepsRef = ref(null)
+
       return {
-        steps
+        steps,
+        stepsRef
       }
     }
   })
@@ -45,23 +48,23 @@
 ```vue
 <template>
   <div class="top-group">
-    <d-button btnStyle="common" class="top-left" width="120px">Top-left</d-button>
-    <d-button btnStyle="common" class="top" width="120px">Top</d-button>
-    <d-button btnStyle="common" class="top-right" width="120px">Top-right</d-button>
+    <d-button btnStyle="common" class="top-left" width="120px" @click="handleClick(0)">Top-left</d-button>
+    <d-button btnStyle="common" class="top" width="120px" @click="handleClick(1)">Top</d-button>
+    <d-button btnStyle="common" class="top-right" width="120px" @click="handleClick(2)">Top-right</d-button>
   </div>
   <div class="middle-group">
-    <d-button btnStyle="common" class="left" width="120px">Left</d-button>
-    <d-button btnStyle="common" class="right" width="120px">Right</d-button>
+    <d-button btnStyle="common" class="left" width="120px" @click="handleClick(7)">Left</d-button>
+    <d-button btnStyle="common" class="right" width="120px" @click="handleClick(3)">Right</d-button>
   </div>
   <div class="bottom-group">
-    <d-button btnStyle="common" class="bottom-left" width="120px">Bottom-left</d-button>
-    <d-button btnStyle="common" class="bottom" width="120px">Bottom</d-button>
-    <d-button btnStyle="common" class="bottom-right" width="120px">Bottom-right</d-button>
+    <d-button btnStyle="common" class="bottom-left" width="120px" @click="handleClick(6)">Bottom-left</d-button>
+    <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"></d-steps-guide>
+  <d-steps-guide :steps="stepsPosition" ref="stepsPositionRef"></d-steps-guide>
 </template>
 <script>
-  import { defineComponent, reactive } from 'vue'
+  import { defineComponent, reactive, ref } from 'vue'
   export default defineComponent({
     setup() {
       const stepsPosition = reactive([
@@ -80,35 +83,42 @@
             trigger: '.top-right', 
             position: 'top-right'
           },
-          { title: '弹出位置 left', 
-            content: 'Steps Guide', 
-            trigger: '.left', 
-            position: 'left' 
-          },
           { title: '弹出位置 right',
             content: 'Steps Guide', 
             trigger: '.right', 
             position: 'right' 
           },
-          { title: '弹出位置 bottom-left', 
+          { title: '弹出位置 bottom-right', 
             content: 'Steps Guide', 
-            trigger: '.bottom-left', 
-            position: 'bottom-left' 
+            trigger: '.bottom-right', 
+            position: 'bottom-right' 
           },
           { title: '弹出位置 bottom', 
             content: 'Steps Guide', 
             trigger: '.bottom', 
             position: 'bottom' 
           },
-          { title: '弹出位置 bottom-right', 
+          { title: '弹出位置 bottom-left', 
             content: 'Steps Guide', 
-            trigger: '.bottom-right', 
-            position: 'bottom-right' 
+            trigger: '.bottom-left', 
+            position: 'bottom-left' 
           },
+          { title: '弹出位置 left', 
+            content: 'Steps Guide', 
+            trigger: '.left', 
+            position: 'left' 
+          }
       ]);
+
+      const stepsPositionRef = ref(null)
     
+      const handleClick = (index) => {
+        stepsPositionRef.value.setCurrentIndex(index)
+      }
       return {
-        stepsPosition
+        stepsPosition,
+        handleClick,
+        stepsPositionRef
       }
     }
   })
@@ -132,7 +142,7 @@
 ```vue
 <template>
   <d-button btnStyle="common" class="bottom">Custom Position</d-button>
-  <d-steps-guide :steps="customSteps"></d-steps-guide>
+  <d-steps-guide :steps="customSteps" :showDots="false" :showClose="false"></d-steps-guide>
 </template>
 <script>
 import { defineComponent, reactive } from 'vue'
@@ -171,4 +181,5 @@ d-steps-guide 参数
 | 参数  | 类型  | 默认 | 说明                   | 跳转                  |
 | ----- | ----- | ---- | ---------------------- | --------------------- |
 | steps | array | Step[]   | 必选，操作指引步骤数组 | [基本用法](#基本用法) |
-
+| showClose | boolean | true   | 可选，是否显示关闭按钮 | [自定义](#基本用法) |
+| showDots | boolean | true   | 可选，是否显示表示导航指引顺序的圆点 | [自定义](#基本用法) |
\ No newline at end of file