diff --git a/.github/workflows/typos-config.toml b/.github/workflows/typos-config.toml
index 0fff42a2c..f246a9260 100644
--- a/.github/workflows/typos-config.toml
+++ b/.github/workflows/typos-config.toml
@@ -8,4 +8,4 @@ ded = "ded"
 Hel = "Hel"
 
 [files]
-extend-exclude = ["CHANGELOG.md"]
+extend-exclude = ["CHANGELOG.md", "*.snap"]
diff --git a/site/docs.config.js b/site/docs.config.js
index 6a9c8192e..6c9ec1e8a 100644
--- a/site/docs.config.js
+++ b/site/docs.config.js
@@ -495,6 +495,14 @@ export const docs = [
         component: () => import('@/dialog/dialog.md'),
         componentEn: () => import('@/dialog/dialog.en-US.md'),
       },
+      {
+        title: 'Guide 引导',
+        titleEn: 'Guide',
+        name: 'guide',
+        path: '/mobile-vue/components/guide',
+        component: () => import('@/guide/guide.md'),
+        componentEn: () => import('@/guide/guide.en-US.md'),
+      },
       {
         title: 'Popover 弹出气泡',
         titleEn: 'Popover',
diff --git a/src/_common b/src/_common
index b3d58500b..6e7dece66 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit b3d58500b007f2c5d75742274e29acf2b0e2def1
+Subproject commit 6e7dece66605fc33704bbc98ef62b7dd4cc243a1
diff --git a/src/common.ts b/src/common.ts
index 492cad08a..345da9b0e 100644
--- a/src/common.ts
+++ b/src/common.ts
@@ -51,7 +51,7 @@ export type OptionData = {
 } & PlainObject;
 
 export type TreeOptionData<T = string | number> = {
-  children?: Array<TreeOptionData<T>>;
+  children?: Array<TreeOptionData<T>> | boolean;
   /** option label content */
   label?: string | TNode;
   /** option search text */
@@ -68,6 +68,8 @@ export type HorizontalAlignEnum = 'left' | 'center' | 'right';
 
 export type VerticalAlignEnum = 'top' | 'middle' | 'bottom';
 
+export type LayoutEnum = 'vertical' | 'horizontal';
+
 export type ClassName = { [className: string]: any } | ClassName[] | string;
 
 export type CSSSelector = string;
@@ -119,7 +121,7 @@ export type InfinityScroll = TScroll;
 
 export interface ScrollToElementParams {
   /** 跳转元素下标 */
-  index: number;
+  index?: number;
   /** 跳转元素距离顶部的距离 */
   top?: number;
   /** 单个元素高度非固定场景下，即 isFixedRowHeight = false。延迟设置元素位置，一般用于依赖不同高度异步渲染等场景，单位：毫秒 */
@@ -128,5 +130,5 @@ export interface ScrollToElementParams {
 }
 
 export interface ComponentScrollToElementParams extends ScrollToElementParams {
-  key: string | number;
+  key?: string | number;
 }
diff --git a/src/components.ts b/src/components.ts
index 176a49002..1c4191263 100644
--- a/src/components.ts
+++ b/src/components.ts
@@ -56,6 +56,7 @@ export { default as Icon } from './icon';
 export { default as Table } from './table';
 export { SideBar, SideBarItem } from './side-bar';
 export { default as TPopover } from './popover';
+export { default as Guide } from './guide';
 
 // 全局配置
 export * from './config-provider';
diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts
index 4e55e1142..2e0c4cb8d 100644
--- a/src/config-provider/type.ts
+++ b/src/config-provider/type.ts
@@ -57,6 +57,10 @@ export interface GlobalConfigProvider {
    * 上传组件全局配置
    */
   upload?: UploadConfig;
+  /**
+   * 引导组件全局配置
+   * */
+  guide?: GuideConfig;
 }
 
 export interface ActionSheetConfig {
@@ -195,3 +199,14 @@ export interface UploadConfigProgress {
    */
   waitingText?: string;
 }
+
+export interface GuideConfig {
+  /** 语言配置， “下一步” 描述文本 */
+  next?: string;
+  /** 语言配置， “跳过” 描述文本 */
+  skip?: string;
+  /** 语言配置， “完成” 描述文本 */
+  finish?: string;
+  /** 语言配置， “返回” 描述文本 */
+  back?: string;
+}
diff --git a/src/guide/demos/base.vue b/src/guide/demos/base.vue
new file mode 100644
index 000000000..8c326a6e3
--- /dev/null
+++ b/src/guide/demos/base.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="guide-demo">
+    <t-button theme="primary" content="用户引导" @click="handleClick"></t-button>
+    <t-popup v-model="visible" placement="bottom" style="height: 100vh; border-radius: 0" destroy-on-close>
+      <template #default>
+        <div class="guide-container">
+          <div class="main-title">
+            <div class="title-major">用户引导标题</div>
+            <div class="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
+          </div>
+          <div class="field label-field">
+            <t-input label="标签文字" layout="vertical" placeholder="请输入内容" />
+          </div>
+          <div class="field">
+            <t-input label="标签文字" layout="vertical" placeholder="请输入内容" />
+          </div>
+          <div class="action">
+            <t-button theme="light" variant="base" size="large">重置</t-button>
+            <t-button theme="primary" size="large">确定</t-button>
+          </div>
+        </div>
+
+        <t-guide
+          v-model="current"
+          :steps="steps"
+          @change="handleChange"
+          @next-step-click="handleNextStepClick"
+          @finish="handleFinish"
+          @skip="handleSkip"
+          @back="handleBack"
+        >
+        </t-guide>
+      </template>
+    </t-popup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { TdGuideProps } from '../type';
+
+const visible = ref(false);
+const current = ref(-1);
+
+const steps: TdGuideProps['steps'] = [
+  {
+    element: () => document.querySelector('.main-title'),
+    title: '用户引导标题',
+    body: '用户引导的说明文案',
+    placement: 'center',
+  },
+  {
+    element: '.label-field',
+    title: '用户引导标题',
+    body: '用户引导的说明文案',
+    placement: 'bottom',
+    highlightPadding: 0,
+  },
+  {
+    element: '.action',
+    title: '用户引导标题',
+    body: '用户引导的说明文案',
+    placement: 'bottom-right',
+  },
+];
+const handleClick = () => {
+  visible.value = true;
+  setTimeout(() => {
+    current.value = 0;
+  }, 800);
+};
+
+const handleChange: TdGuideProps['onChange'] = (current: number, { e, total }) => {
+  console.log(current, e, total);
+};
+
+const handleNextStepClick: TdGuideProps['onNextStepClick'] = ({ e, next, current, total }) => {
+  console.log(e, next, current, total);
+};
+
+const handleFinish: TdGuideProps['onFinish'] = ({ e, current, total }) => {
+  visible.value = false;
+  console.log(e, current, total);
+};
+
+const handleSkip: TdGuideProps['onSkip'] = ({ e, current, total }) => {
+  visible.value = false;
+  console.log(e, current, total);
+};
+const handleBack: TdGuideProps['onBack'] = ({ e, current, total }) => {
+  console.log(e, current, total);
+};
+</script>
+<style scoped>
+.guide-demo {
+  display: flex;
+  justify-content: center;
+}
+.guide-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.main-title {
+  margin: 16px;
+  display: inline-block;
+}
+.title-major {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 36px;
+}
+.title-sub {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  margin-top: 4px;
+  color: rgba(0, 0, 0, 0.6);
+}
+.action {
+  margin: 16px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+</style>
diff --git a/src/guide/demos/custom-popover.vue b/src/guide/demos/custom-popover.vue
new file mode 100644
index 000000000..72094d8c7
--- /dev/null
+++ b/src/guide/demos/custom-popover.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="guide-demo">
+    <t-button theme="primary" @click="handleClick">用户引导</t-button>
+    <t-popup v-model="visible" placement="bottom" style="height: 100vh; border-radius: 0" destroy-on-close>
+      <template #default>
+        <div class="guide-container">
+          <div class="main-title">
+            <div class="title-major">用户引导标题</div>
+            <div class="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
+          </div>
+          <div class="field label-field">
+            <t-input label="标签文字" layout="vertical" placeholder="请输入内容" />
+          </div>
+          <div class="field">
+            <t-input label="标签文字" layout="vertical" placeholder="请输入内容" />
+          </div>
+          <div class="action">
+            <t-button theme="light" variant="base" size="large">重置</t-button>
+            <t-button theme="primary" size="large">确定</t-button>
+          </div>
+        </div>
+
+        <t-guide
+          v-model="current"
+          :steps="steps"
+          @change="handleChange"
+          @next-step-click="handleNextStepClick"
+          @finish="handleFinish"
+          @skip="handleSkip"
+          @back="handleBack"
+        ></t-guide>
+      </template>
+    </t-popup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import MyPopover from './my-popover.vue';
+import { TdGuideProps } from '../type';
+
+const visible = ref(false);
+const current = ref(-1);
+
+const steps: TdGuideProps['steps'] = [
+  {
+    element: '.main-title',
+    title: '用户引导标题',
+    body: '用户引导的说明文案',
+    placement: 'center',
+    // @ts-ignore
+    content: MyPopover,
+  },
+  {
+    element: '.label-field',
+    title: '用户引导标题',
+    body: '用户引导的说明文案',
+    placement: 'bottom',
+    highlightPadding: 0,
+    // @ts-ignore
+    content: MyPopover,
+  },
+  {
+    element: '.action',
+    title: '用户引导标题',
+    body: '用户引导的说明文案',
+    placement: 'bottom-right',
+    // @ts-ignore
+    content: MyPopover,
+  },
+];
+const handleClick = () => {
+  visible.value = true;
+  setTimeout(() => {
+    current.value = 0;
+  }, 800);
+};
+
+const handleChange: TdGuideProps['onChange'] = (current: number, { e, total }) => {
+  console.log(current, e, total);
+};
+
+const handleNextStepClick: TdGuideProps['onNextStepClick'] = ({ e, next, current, total }) => {
+  console.log(e, next, current, total);
+};
+
+const handleFinish: TdGuideProps['onFinish'] = ({ e, current, total }) => {
+  visible.value = false;
+  console.log(e, current, total);
+};
+
+const handleSkip: TdGuideProps['onSkip'] = ({ e, current, total }) => {
+  visible.value = false;
+  console.log(e, current, total);
+};
+const handleBack: TdGuideProps['onBack'] = ({ e, current, total }) => {
+  console.log(e, current, total);
+};
+</script>
+<style scoped>
+.guide-demo {
+  display: flex;
+  justify-content: center;
+}
+.guide-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.main-title {
+  margin: 16px;
+  display: inline-block;
+}
+.title-major {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 36px;
+}
+.title-sub {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  margin-top: 4px;
+  color: rgba(0, 0, 0, 0.6);
+}
+.action {
+  margin: 16px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+</style>
diff --git a/src/guide/demos/dialog-body.vue b/src/guide/demos/dialog-body.vue
new file mode 100644
index 000000000..42cb901c6
--- /dev/null
+++ b/src/guide/demos/dialog-body.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="dialog-body">
+    <p>用户引导的说明文案</p>
+    <div class="img-wrapper">
+      <img src="https://tdesign.gtimg.com/demo/demo-image-1.png" alt="demo" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped>
+.dialog-body {
+  .img-wrapper {
+    border-radius: var(--td-radius-default);
+    overflow: hidden;
+    img {
+      vertical-align: bottom;
+      width: 100%;
+    }
+  }
+
+  p {
+    margin-bottom: 24px;
+  }
+}
+</style>
diff --git a/src/guide/demos/dialog.vue b/src/guide/demos/dialog.vue
new file mode 100644
index 000000000..78046892a
--- /dev/null
+++ b/src/guide/demos/dialog.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="guide-demo">
+    <t-button theme="primary" @click="handleClick">用户引导</t-button>
+    <t-popup v-model="visible" placement="bottom" style="height: 100vh; border-radius: 0" destroy-on-close>
+      <template #default>
+        <div class="guide-container">
+          <div class="main-title">
+            <div class="title-major">用户引导标题</div>
+            <div class="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
+          </div>
+          <div class="field label-field">
+            <t-input label="标签文字" layout="vertical" placeholder="请输入内容" />
+          </div>
+          <div class="field">
+            <t-input label="标签文字" layout="vertical" placeholder="请输入内容" />
+          </div>
+          <div class="action">
+            <t-button theme="light" variant="base" size="large">重置</t-button>
+            <t-button theme="primary" size="large">确定</t-button>
+          </div>
+        </div>
+
+        <t-guide
+          v-model="current"
+          :steps="steps"
+          @change="handleChange"
+          @next-step-click="handleNextStepClick"
+          @finish="handleFinish"
+          @skip="handleSkip"
+          @back="handleBack"
+        ></t-guide>
+      </template>
+    </t-popup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import DialogBody from './dialog-body.vue';
+import { TdGuideProps } from '../type';
+
+const visible = ref(false);
+const current = ref(-1);
+
+const steps: TdGuideProps['steps'] = [
+  {
+    element: '.main-title',
+    title: '用户引导标题',
+    // @ts-ignore
+    body: DialogBody,
+    mode: 'dialog',
+  },
+  {
+    element: '.label-field',
+    title: '用户引导标题',
+    // @ts-ignore
+    body: DialogBody,
+    mode: 'dialog',
+  },
+  {
+    element: '.action',
+    title: '用户引导标题',
+    // @ts-ignore
+    body: DialogBody,
+    mode: 'dialog',
+  },
+];
+const handleClick = () => {
+  visible.value = true;
+  setTimeout(() => {
+    current.value = 0;
+  }, 800);
+};
+
+const handleChange: TdGuideProps['onChange'] = (current: number, { e, total }) => {
+  console.log(current, e, total);
+};
+
+const handleNextStepClick: TdGuideProps['onNextStepClick'] = ({ e, next, current, total }) => {
+  console.log(e, next, current, total);
+};
+
+const handleFinish: TdGuideProps['onFinish'] = ({ e, current, total }) => {
+  visible.value = false;
+  console.log(e, current, total);
+};
+
+const handleSkip: TdGuideProps['onSkip'] = ({ e, current, total }) => {
+  visible.value = false;
+  console.log(e, current, total);
+};
+const handleBack: TdGuideProps['onBack'] = ({ e, current, total }) => {
+  console.log(e, current, total);
+};
+</script>
+<style scoped>
+.guide-demo {
+  display: flex;
+  justify-content: center;
+}
+.guide-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.main-title {
+  margin: 16px;
+  display: inline-block;
+}
+.title-major {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 36px;
+}
+.title-sub {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  margin-top: 4px;
+  color: rgba(0, 0, 0, 0.6);
+}
+.action {
+  margin: 16px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+</style>
diff --git a/src/guide/demos/mobile.vue b/src/guide/demos/mobile.vue
new file mode 100644
index 000000000..a1c5685e2
--- /dev/null
+++ b/src/guide/demos/mobile.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <h1 class="title">Guide 引导</h1>
+    <p class="summary">逐步骤进行指引或解释说明的组件，常用于用户不熟悉的或需进行特别强调的页面。</p>
+    <tdesign-demo-block title="01 组件类型" summary="基础引导">
+      <base-vue />
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="不带遮罩的引导">
+      <no-mask />
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="弹窗形式的引导">
+      <dialog-vue />
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="气泡与弹窗混合的引导">
+      <popover-dialog />
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="自定义气泡">
+      <custom-popover />
+    </tdesign-demo-block>
+  </div>
+</template>
+<script lang="ts" setup>
+import BaseVue from './base.vue';
+import NoMask from './no-mask.vue';
+import DialogVue from './dialog.vue';
+import PopoverDialog from './popover-dialog.vue';
+import CustomPopover from './custom-popover.vue';
+</script>
+
+<style scoped>
+.tdesign-mobile-demo {
+  background-color: #fff;
+}
+</style>
diff --git a/src/guide/demos/my-popover.vue b/src/guide/demos/my-popover.vue
new file mode 100644
index 000000000..1e77a9e6f
--- /dev/null
+++ b/src/guide/demos/my-popover.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="my-popover">
+    <ArrowUpIcon class="pop-icon" />
+    <p class="popover-desc">自定义的图形或说明文案，用来解释或指导该功能使用。</p>
+    <div class="popover-action">
+      <t-button v-if="current + 1 !== total" theme="light" size="extra-small" @click="handleSkip"> 跳过 </t-button>
+      <t-button v-if="current + 1 === total" theme="light" size="extra-small" @click="handleBack"> 返回 </t-button>
+      <t-button v-if="current + 1 < total" theme="primary" size="extra-small" @click="handleNext"> 下一步 </t-button>
+      <t-button v-if="current + 1 === total" theme="primary" size="extra-small" @click="handleFinish"> 完成 </t-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import { ArrowUpIcon } from 'tdesign-icons-vue-next';
+
+defineProps({
+  handleBack: Function,
+  handleNext: Function,
+  handleSkip: Function,
+  handleFinish: Function,
+  current: Number,
+  total: Number,
+});
+</script>
+
+<style scoped>
+.my-popover {
+  width: 240px;
+}
+
+.pop-icon {
+  color: white;
+  font-size: 32px;
+  font-weight: bold;
+}
+
+.popover-desc {
+  margin-top: 16px;
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 600;
+  text-align: left;
+  line-height: 24px;
+}
+
+.popover-action {
+  margin-top: 16px;
+  text-align: right;
+}
+
+.popover-action button {
+  margin-left: 12px;
+}
+</style>
diff --git a/src/guide/demos/no-mask.vue b/src/guide/demos/no-mask.vue
new file mode 100644
index 000000000..d8d63c201
--- /dev/null
+++ b/src/guide/demos/no-mask.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="guide-demo">
+    <t-button theme="primary" @click="handleClick">用户引导</t-button>
+    <t-popup v-model="visible" placement="bottom" style="height: 100vh; border-radius: 0" destroy-on-close>
+      <template #default>
+        <div class="guide-container">
+          <div class="main-title">
+            <div class="title-major">用户引导标题</div>
+            <div class="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
+          </div>
+          <div class="field label-field">
+            <t-input label="标签文字" layout="vertical" placeholder="请输入内容" />
+          </div>
+          <div class="field">
+            <t-input label="标签文字" layout="vertical" placeholder="请输入内容" />
+          </div>
+          <div class="action">
+            <t-button theme="light" variant="base" size="large">重置</t-button>
+            <t-button theme="primary" size="large">确定</t-button>
+          </div>
+        </div>
+
+        <t-guide
+          v-model="current"
+          :steps="steps"
+          :show-overlay="false"
+          @change="handleChange"
+          @next-step-click="handleNextStepClick"
+          @finish="handleFinish"
+          @skip="handleSkip"
+          @back="handleBack"
+        ></t-guide>
+      </template>
+    </t-popup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { TdGuideProps } from '../type';
+
+const visible = ref(false);
+const current = ref(-1);
+
+const steps: TdGuideProps['steps'] = [
+  {
+    element: '.main-title',
+    title: '用户引导标题',
+    body: '用户引导的说明文案',
+    placement: 'center',
+  },
+  {
+    element: '.label-field',
+    title: '用户引导标题',
+    body: '用户引导的说明文案',
+    placement: 'bottom',
+    highlightPadding: 0,
+  },
+  {
+    element: '.action',
+    title: '用户引导标题',
+    body: '用户引导的说明文案',
+    placement: 'bottom-right',
+  },
+];
+const handleClick = () => {
+  visible.value = true;
+  setTimeout(() => {
+    current.value = 0;
+  }, 800);
+};
+
+const handleChange: TdGuideProps['onChange'] = (current: number, { e, total }) => {
+  console.log(current, e, total);
+};
+
+const handleNextStepClick: TdGuideProps['onNextStepClick'] = ({ e, next, current, total }) => {
+  console.log(e, next, current, total);
+};
+
+const handleFinish: TdGuideProps['onFinish'] = ({ e, current, total }) => {
+  visible.value = false;
+  console.log(e, current, total);
+};
+
+const handleSkip: TdGuideProps['onSkip'] = ({ e, current, total }) => {
+  visible.value = false;
+  console.log(e, current, total);
+};
+const handleBack: TdGuideProps['onBack'] = ({ e, current, total }) => {
+  console.log(e, current, total);
+};
+</script>
+<style scoped>
+.guide-demo {
+  display: flex;
+  justify-content: center;
+}
+.guide-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.main-title {
+  margin: 16px;
+  display: inline-block;
+}
+.title-major {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 36px;
+}
+.title-sub {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  margin-top: 4px;
+  color: rgba(0, 0, 0, 0.6);
+}
+.action {
+  margin: 16px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+</style>
diff --git a/src/guide/demos/popover-dialog.vue b/src/guide/demos/popover-dialog.vue
new file mode 100644
index 000000000..129af39bb
--- /dev/null
+++ b/src/guide/demos/popover-dialog.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="guide-demo">
+    <t-button theme="primary" @click="handleClick">用户引导</t-button>
+    <t-popup v-model="visible" placement="bottom" style="height: 100vh; border-radius: 0" destroy-on-close>
+      <template #default>
+        <div class="guide-container">
+          <div class="main-title">
+            <div class="title-major">用户引导标题</div>
+            <div class="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
+          </div>
+          <div class="field label-field">
+            <t-input label="标签文字" layout="vertical" placeholder="请输入内容" />
+          </div>
+          <div class="field">
+            <t-input label="标签文字" layout="vertical" placeholder="请输入内容" />
+          </div>
+          <div class="action">
+            <t-button theme="light" variant="base" size="large">重置</t-button>
+            <t-button theme="primary" size="large">确定</t-button>
+          </div>
+        </div>
+
+        <t-guide
+          v-model="current"
+          :steps="steps"
+          @change="handleChange"
+          @next-step-click="handleNextStepClick"
+          @finish="handleFinish"
+          @skip="handleSkip"
+          @back="handleBack"
+        ></t-guide>
+      </template>
+    </t-popup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import DialogBody from './dialog-body.vue';
+import { TdGuideProps } from '../type';
+
+const visible = ref(false);
+const current = ref(-1);
+
+const steps: TdGuideProps['steps'] = [
+  {
+    element: '.main-title',
+    title: '用户引导标题',
+    body: '用户引导的说明文案',
+    placement: 'center',
+  },
+  {
+    element: '.label-field',
+    title: '用户引导标题',
+    // @ts-ignore
+    body: DialogBody,
+    mode: 'dialog',
+  },
+  {
+    element: '.action',
+    title: '用户引导标题',
+    body: '用户引导的说明文案',
+    placement: 'bottom-right',
+  },
+];
+const handleClick = () => {
+  visible.value = true;
+  setTimeout(() => {
+    current.value = 0;
+  }, 800);
+};
+
+const handleChange: TdGuideProps['onChange'] = (current: number, { e, total }) => {
+  console.log(current, e, total);
+};
+
+const handleNextStepClick: TdGuideProps['onNextStepClick'] = ({ e, next, current, total }) => {
+  console.log(e, next, current, total);
+};
+
+const handleFinish: TdGuideProps['onFinish'] = ({ e, current, total }) => {
+  visible.value = false;
+  console.log(e, current, total);
+};
+
+const handleSkip: TdGuideProps['onSkip'] = ({ e, current, total }) => {
+  visible.value = false;
+  console.log(e, current, total);
+};
+const handleBack: TdGuideProps['onBack'] = ({ e, current, total }) => {
+  console.log(e, current, total);
+};
+</script>
+<style scoped>
+.guide-demo {
+  display: flex;
+  justify-content: center;
+}
+.guide-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.main-title {
+  margin: 16px;
+  display: inline-block;
+}
+.title-major {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 36px;
+}
+.title-sub {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  margin-top: 4px;
+  color: rgba(0, 0, 0, 0.6);
+}
+.action {
+  margin: 16px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+</style>
diff --git a/src/guide/guide.en-US.md b/src/guide/guide.en-US.md
new file mode 100644
index 000000000..2edf24f59
--- /dev/null
+++ b/src/guide/guide.en-US.md
@@ -0,0 +1,55 @@
+:: BASE_DOC ::
+
+## API
+### Guide Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+backButtonProps | Object | - | Typescript：`ButtonProps` | N
+counter | Slot / Function | - | Typescript：`TNode<{ current: number; total: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+current | Number | - | `v-model` and `v-model:current` is supported | N
+defaultCurrent | Number | - | uncontrolled property | N
+finishButtonProps | Object | - | Typescript：`ButtonProps` | N
+hideCounter | Boolean | false | \- | N
+hideSkip | Boolean | false | \- | N
+highlightPadding | Number | 8 | \- | N
+mode | String | popover | options: popover/dialog | N
+nextButtonProps | Object | - | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/guide/type.ts) | N
+showOverlay | Boolean | true | \- | N
+skipButtonProps | Object | - | Typescript：`ButtonProps` | N
+steps | Array | - | Typescript：`Array<GuideStep>` | N
+zIndex | Number | 999999 | \- | N
+onBack | Function |  | Typescript：`(context: { e: MouseEvent, current: number, total: number  }) => void`<br/> | N
+onChange | Function |  | Typescript：`(current: number, context?: { e: MouseEvent,  total: number }) => void`<br/> | N
+onFinish | Function |  | Typescript：`(context: { e: MouseEvent, current: number, total: number  }) => void`<br/> | N
+onNextStepClick | Function |  | Typescript：`(context: { e: MouseEvent, next: number, current: number, total: number  }) => void`<br/> | N
+onSkip | Function |  | Typescript：`(context: { e: MouseEvent, current: number, total: number  }) => void`<br/> | N
+
+### Guide Events
+
+name | params | description
+-- | -- | --
+back | `(context: { e: MouseEvent, current: number, total: number  })` | \-
+change | `(current: number, context?: { e: MouseEvent,  total: number })` | \-
+finish | `(context: { e: MouseEvent, current: number, total: number  })` | \-
+next-step-click | `(context: { e: MouseEvent, next: number, current: number, total: number  })` | \-
+skip | `(context: { e: MouseEvent, current: number, total: number  })` | \-
+
+### GuideStep
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+backButtonProps | Object | - | Typescript：`ButtonProps` | N
+body | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+content | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+element | String / Function | - | required。Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | Y
+highlightContent | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+highlightPadding | Number | - | \- | N
+mode | String | - | options: popover/dialog | N
+nextButtonProps | Object | - | Typescript：`ButtonProps` | N
+offset | Array | - | this api is in discussing. do not use it.。Typescript：`Array<string \| number>` | N
+placement | String | 'top' | Typescript：`StepPopoverPlacement ` `type StepPopoverPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'\|'center'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/guide/type.ts) | N
+popoverProps | Object | - | Popover component props if `mode = popover`。Typescript：`PopoverProps`，[Popover API Documents](./popover?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/guide/type.ts) | N
+showOverlay | Boolean | true | \- | N
+skipButtonProps | Object | - | Typescript：`ButtonProps` | N
+title | String / Slot / Function | - | title of current step。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
diff --git a/src/guide/guide.md b/src/guide/guide.md
new file mode 100644
index 000000000..ddcf279ed
--- /dev/null
+++ b/src/guide/guide.md
@@ -0,0 +1,55 @@
+:: BASE_DOC ::
+
+## API
+### Guide Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+backButtonProps | Object | - | 透传 返回 的全部属性，示例：`{ content: '返回', theme: 'default' }`。TS 类型：`ButtonProps` | N
+counter | Slot / Function | - | 用于自定义渲染计数部分。TS 类型：`TNode<{ current: number; total: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+current | Number | - | 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景。支持语法糖 `v-model` 或 `v-model:current` | N
+defaultCurrent | Number | - | 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景。非受控属性 | N
+finishButtonProps | Object | - | 透传 完成 的全部属性，示例：`{ content: '完成', theme: 'primary' }`。TS 类型：`ButtonProps` | N
+hideCounter | Boolean | false | 是否隐藏计数 | N
+hideSkip | Boolean | false | 是否隐藏跳过按钮 | N
+highlightPadding | Number | 8 | 高亮框的内边距 | N
+mode | String | popover | 引导框的类型。可选项：popover/dialog | N
+nextButtonProps | Object | - | 透传 下一步按钮 的全部属性，示例：{ content: '下一步', theme: 'primary' }。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/guide/type.ts) | N
+showOverlay | Boolean | true | 是否出现遮罩层 | N
+skipButtonProps | Object | - | 透传 跳过按钮 的全部属性，{ content: '跳过', theme: 'default' }。TS 类型：`ButtonProps` | N
+steps | Array | - | 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。。TS 类型：`Array<GuideStep>` | N
+zIndex | Number | 999999 | 提示框的层级 | N
+onBack | Function |  | TS 类型：`(context: { e: MouseEvent, current: number, total: number  }) => void`<br/>点击返回按钮时触发 | N
+onChange | Function |  | TS 类型：`(current: number, context?: { e: MouseEvent,  total: number }) => void`<br/>当前步骤发生变化时触发 | N
+onFinish | Function |  | TS 类型：`(context: { e: MouseEvent, current: number, total: number  }) => void`<br/>点击完成按钮时触发 | N
+onNextStepClick | Function |  | TS 类型：`(context: { e: MouseEvent, next: number, current: number, total: number  }) => void`<br/>点击下一步时触发 | N
+onSkip | Function |  | TS 类型：`(context: { e: MouseEvent, current: number, total: number  }) => void`<br/>点击跳过按钮时触发 | N
+
+### Guide Events
+
+名称 | 参数 | 描述
+-- | -- | --
+back | `(context: { e: MouseEvent, current: number, total: number  })` | 点击返回按钮时触发
+change | `(current: number, context?: { e: MouseEvent,  total: number })` | 当前步骤发生变化时触发
+finish | `(context: { e: MouseEvent, current: number, total: number  })` | 点击完成按钮时触发
+next-step-click | `(context: { e: MouseEvent, next: number, current: number, total: number  })` | 点击下一步时触发
+skip | `(context: { e: MouseEvent, current: number, total: number  })` | 点击跳过按钮时触发
+
+### GuideStep
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+backButtonProps | Object | - | 用于自定义当前引导框的返回按钮的内容。TS 类型：`ButtonProps` | N
+body | String / Slot / Function | - | 当前步骤提示框的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+content | Slot / Function | - | 用户自定义引导弹框的内容，一旦存在，此时除 `placement`、`offset`和`element` 外，其它属性全部失效）。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+element | String / Function | - | 必需。高亮的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'#tdesign' 或 () => document.querySelector('#tdesign')。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | Y
+highlightContent | Slot / Function | - | 用户自定义的高亮框 (仅当 `mode` 为 `popover` 时生效)。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+highlightPadding | Number | - | 高亮框的内边距 | N
+mode | String | - | 引导框的类型。可选项：popover/dialog | N
+nextButtonProps | Object | - | 用于自定义当前引导框的下一步按钮的内容。TS 类型：`ButtonProps` | N
+offset | Array | - | 【讨论确认中】相对于 placement 的偏移量，示例：[-10, 20] 或 ['10px', '8px']。TS 类型：`Array<string \| number>` | N
+placement | String | 'top' | 引导框相对于高亮元素出现的位置，(仅当 `mode` 为 `popover` 时生效)。TS 类型：`StepPopoverPlacement ` `type StepPopoverPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'\|'center'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/guide/type.ts) | N
+popoverProps | Object | - | 透传全部属性到 Popover 组件。`mode=popover` 时有效。TS 类型：`PopoverProps`，[Popover API Documents](./popover?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/guide/type.ts) | N
+showOverlay | Boolean | true | 是否出现遮罩层 | N
+skipButtonProps | Object | - | 用于自定义当前步骤引导框的跳过按钮的内容。TS 类型：`ButtonProps` | N
+title | String / Slot / Function | - | 当前步骤的标题内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
diff --git a/src/guide/guide.vue b/src/guide/guide.vue
new file mode 100644
index 000000000..90c8f0539
--- /dev/null
+++ b/src/guide/guide.vue
@@ -0,0 +1,506 @@
+<template>
+  <teleport v-if="actived" to="body">
+    <div ref="overlayLayerRef" :class="`${name}__overlay`" :style="{ zIndex: zIndex - 2 }"></div>
+    <div ref="highlightLayerRef" :class="[...highlightClass, ...maskClass]" :style="{ zIndex: zIndex - 1 }">
+      <t-node v-if="showCustomHighlightContent" :content="currentCustomHighlightContent"></t-node>
+    </div>
+    <div ref="popoverWrapperRef" :class="wrapperClass" :style="{ zIndex }">
+      <component :is="stepContainer" v-bind="stepProps">
+        <template v-if="isPopover" #triggerElement>
+          <div ref="referenceLayerRef" :class="[...popoverClass]"></div>
+        </template>
+        <template #[contentSlot]>
+          <t-node v-if="isPopover && contentNode" :content="contentNode"></t-node>
+          <div v-else :class="contetnClass">
+            <div :class="`${name}__tooltip`">
+              <div :class="`${name}__title`">
+                <t-node :content="titleNode"></t-node>
+              </div>
+              <div :class="`${name}__desc`">
+                <t-node :content="bodyNode"></t-node>
+              </div>
+            </div>
+            <div :class="footerClass">
+              <t-button
+                v-if="!hideSkip && !isLast"
+                key="skip"
+                :class="`${name}__skip`"
+                theme="light"
+                :size="buttonSize"
+                variant="base"
+                :content="globalConfig.skip"
+                v-bind="getCurrentCrossProps('skipButtonProps')"
+                @click="handleSkip"
+              >
+              </t-button>
+              <t-button
+                v-if="!isLast"
+                key="next"
+                :class="`${name}__next`"
+                theme="primary"
+                :size="buttonSize"
+                variant="base"
+                v-bind="getCurrentCrossProps('nextButtonProps')"
+                @click="handleNext"
+              >
+                <template #content>
+                  <t-node
+                    :content="renderButtonContent(getCurrentCrossProps('nextButtonProps'), globalConfig.next)"
+                  ></t-node>
+                  <t-node v-if="!hideCounter" :content="counterNode"></t-node>
+                </template>
+              </t-button>
+              <t-button
+                v-if="isLast"
+                key="back"
+                :class="`${name}__back`"
+                theme="light"
+                :size="buttonSize"
+                variant="base"
+                :content="globalConfig.back"
+                v-bind="getCurrentCrossProps('backButtonProps')"
+                @click="handleBack"
+              ></t-button>
+              <t-button
+                v-if="isLast"
+                key="finish"
+                :class="`${name}__finish`"
+                theme="primary"
+                :size="buttonSize"
+                variant="base"
+                v-bind="finishButtonProps ?? {}"
+                @click="handleFinish"
+              >
+                <template #content>
+                  <t-node :content="renderButtonContent(finishButtonProps, globalConfig.finish)"></t-node>
+                  <t-node v-if="!hideCounter" :content="counterNode"></t-node>
+                </template>
+              </t-button>
+            </div>
+          </div>
+        </template>
+      </component>
+    </div>
+  </teleport>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, toRefs, h, getCurrentInstance, nextTick, onMounted, watch } from 'vue';
+import isFunction from 'lodash/isFunction';
+
+import TPopover, { PopoverProps } from '../popover';
+import TPopup, { PopupProps } from '../popup';
+import TButton, { ButtonProps } from '../button';
+import config from '../config';
+import { useVModel, TNode } from '../shared';
+import { addClass, getWindowScroll, removeClass } from '../shared/dom';
+import setStyle from '../_common/js/utils/set-style';
+import guideProps from './props';
+import { GuideStep, TdGuideProps } from './type';
+import { isFixed, getRelativePosition, getTargetElm, scrollToParentVisibleArea, scrollToElm } from './utils';
+import { GuideCrossProps } from './interface';
+import { useConfig } from '../config-provider/useConfig';
+import { SizeEnum } from '@/common';
+
+const { prefix } = config;
+const name = `${prefix}-guide`;
+const LOCK_CLASS = `${name}--lock`;
+export default defineComponent({
+  name,
+  components: {
+    TNode,
+    TPopover,
+    TButton,
+    TPopup,
+  },
+  props: guideProps,
+  setup(props: TdGuideProps, context) {
+    const { current, modelValue, finishButtonProps, hideCounter, hideSkip, steps, zIndex } = toRefs(props);
+    const [innerCurrent, setInnerCurrent] = useVModel(
+      current,
+      modelValue,
+      props.defaultCurrent,
+      props.onChange,
+      'current',
+    );
+    const { globalConfig } = useConfig('guide');
+    // 覆盖层，用于覆盖所有元素
+    const overlayLayerRef = ref<HTMLElement>();
+    // 高亮层，用于高亮元素
+    const highlightLayerRef = ref<HTMLElement>();
+    // 提示层，用于高亮元素
+    const referenceLayerRef = ref<HTMLElement>();
+    // 当前高亮的元素
+    const currentHighlightLayerElm = ref<HTMLElement>();
+    // dialog wrapper ref
+    const popoverWrapperRef = ref<HTMLElement>();
+    // dialog ref
+    const dialogTooltipRef = ref<HTMLElement>();
+    // 是否开始展示
+    const actived = ref(false);
+    // 步骤总数
+    const stepsTotal = computed(() => steps.value.length);
+    // 当前步骤的信息
+    const currentStepInfo = computed<GuideStep>(() => steps.value[innerCurrent.value]);
+    // 当前是否为 popover
+    const isPopover = computed(() => getCurrentCrossProps('mode') === 'popover');
+    const popoverVisible = ref(false);
+    const stepContainer = computed(() => (isPopover.value ? TPopover : TPopup));
+    const contentSlot = computed(() => (isPopover.value ? 'content' : 'default'));
+    const isPopoverCenter = computed(() => isPopover.value && currentStepInfo.value.placement === 'center');
+    const stepProps = computed(() => {
+      if (isPopover.value) {
+        return {
+          visible: popoverVisible.value,
+          placement: isPopoverCenter.value ? 'bottom' : currentStepInfo.value.placement,
+          theme: 'light',
+          showArrow: false,
+          ...currentStepInfo.value.popoverProps,
+        } as PopoverProps;
+      }
+      return {
+        visible: popoverVisible.value,
+        zIndex: zIndex.value,
+        placement: 'center',
+        // destroyOnClose: true,
+        class: `${name}__dialog`,
+        overlayProps: {
+          zIndex: zIndex.value - 1,
+        },
+      } as PopupProps;
+    });
+
+    // 当前元素位置状态
+    const currentElmIsFixed = computed(() => isFixed(currentHighlightLayerElm.value || document.body));
+    // 获取当前步骤的属性值 用户当前步骤设置 > 用户组件设置的
+    const getCurrentCrossProps = <Key extends keyof GuideCrossProps>(propsName: Key) =>
+      currentStepInfo.value[propsName] ?? props[propsName];
+
+    const hWithParams = (params: Record<string, any> = { currentStepInfo: currentStepInfo.value }) => {
+      // @ts-ignore
+      const newH = (...args: any[]) => h(...args);
+      return Object.assign(newH, params);
+    };
+
+    // highlight layer 相关
+    // 获取当前步骤的用户设定的高亮内容
+    const currentCustomHighlightContent = computed(() => {
+      const { highlightContent } = currentStepInfo.value;
+
+      let node: any = highlightContent;
+      if (isFunction(highlightContent)) {
+        // 支持函数
+        node = highlightContent(hWithParams());
+      } else if (context.slots.highlightContent) {
+        // 支持插槽
+        node = context.slots.highlightContent(hWithParams());
+      } else if (context.slots['highlight-content']) {
+        // 支持插槽
+        node = context.slots['highlight-content'](hWithParams());
+      }
+      // 给自定义元素添加类名
+      if (node) {
+        if (!node.props) node.props = {};
+        node.props.class = node.props.class || '';
+      }
+      return node;
+    });
+    // 是否展示高亮区域
+    const showCustomHighlightContent = computed(() => Boolean(currentCustomHighlightContent.value && isPopover.value));
+
+    const showOverlay = computed(() => getCurrentCrossProps('showOverlay'));
+
+    const highlightClass = computed(() => [
+      `${name}__highlight`,
+      `${name}__highlight--${isPopover.value ? 'popover' : 'dialog'}`,
+      `${name}--${currentElmIsFixed.value && isPopover.value ? 'fixed' : 'absolute'}`,
+    ]);
+    const maskClass = computed(() => [`${name}__highlight--${showOverlay.value ? 'mask' : 'nomask'}`]);
+    const wrapperClass = computed(() => [
+      `${name}__wrapper`,
+      `${name}--${currentElmIsFixed.value ? 'fixed' : 'absolute'}`,
+      {
+        [`${name}__wrapper--content`]: !!currentStepInfo.value.content,
+      },
+    ]);
+    const popoverClass = computed(() => [`${name}__reference`]);
+    const contetnClass = computed(() => [`${name}__content--${isPopover.value ? 'popover' : 'dialog'}`]);
+    const tooltipClass = computed(() => [`${name}__tooltip--${isPopover.value ? 'popover' : 'dialog'}`]);
+    const footerClass = computed(() => [
+      `${name}__footer`,
+      `${name}__footer--${isPopover.value ? 'popover' : 'dialog'}`,
+    ]);
+
+    const contentNode = computed(() => {
+      const { content } = currentStepInfo.value;
+      let renderContent;
+      if (isFunction(content)) {
+        renderContent = content(hWithParams(contentProps.value));
+      } else if (context.slots.content) {
+        renderContent = context.slots.content(hWithParams(contentProps.value));
+      } else if (content) {
+        renderContent = h(content, contentProps.value);
+      }
+      return renderContent;
+    });
+
+    const titleNode = computed(() => {
+      const { title } = currentStepInfo.value;
+      let renderTitle: any = null;
+      if (isFunction(title)) {
+        renderTitle = title(hWithParams());
+      } else if (context.slots.title) {
+        renderTitle = context.slots.title(hWithParams());
+      } else if (typeof title === 'string') {
+        renderTitle = title;
+      } else if (title) {
+        renderTitle = h(title);
+      }
+      return renderTitle;
+    });
+
+    const bodyNode = computed(() => {
+      const { body } = currentStepInfo.value;
+      let renderBody: any = null;
+      if (isFunction(body)) {
+        renderBody = body(hWithParams());
+      } else if (context.slots.body) {
+        renderBody = context.slots.body(hWithParams());
+      } else if (typeof body === 'string') {
+        renderBody = body;
+      } else if (body) {
+        renderBody = h(body);
+      }
+      return renderBody;
+    });
+
+    const counterNode = computed(() => {
+      const params = {
+        total: stepsTotal.value,
+        current: innerCurrent.value,
+      };
+      let renderCounter: any = null;
+      const { counter } = props;
+      if (isFunction(counter)) {
+        renderCounter = counter(h, params);
+      } else if (context.slots.counter) {
+        renderCounter = context.slots.counter(hWithParams(params));
+      } else if (counter) {
+        renderCounter = h(counter, params);
+      }
+      return renderCounter || ` (${innerCurrent.value + 1}/${stepsTotal.value})`;
+    });
+
+    const isLast = computed(() => innerCurrent.value === stepsTotal.value - 1);
+    const isFirst = computed(() => innerCurrent.value === 0);
+    const buttonSize = computed(() => (isPopover.value ? 'extra-small' : 'medium') as SizeEnum);
+
+    // 设置高亮层的位置
+    const setHighlightLayerPosition = (highlightLayer: HTMLElement, isReference = false) => {
+      let { top, left } = getRelativePosition(currentHighlightLayerElm.value);
+      let { width, height } = currentHighlightLayerElm.value.getBoundingClientRect();
+      const highlightPadding = getCurrentCrossProps('highlightPadding');
+
+      if (isPopover.value) {
+        width += highlightPadding * 2;
+        height += highlightPadding * 2;
+        top -= highlightPadding;
+        left -= highlightPadding;
+      } else {
+        const { scrollTop, scrollLeft } = getWindowScroll();
+        top += scrollTop;
+        left += scrollLeft;
+      }
+
+      const style = {
+        top: `${top}px`,
+        left: `${left}px`,
+      };
+
+      // 展示自定义高亮
+      if (showCustomHighlightContent.value) {
+        // 高亮框本身不设定宽高，引用用框的宽高设定为用户自定义的宽高
+        if (isReference) {
+          const { width, height } = highlightLayerRef.value.getBoundingClientRect();
+          Object.assign(style, {
+            width: `${width}px`,
+            height: `${height}px`,
+          });
+        } else {
+          Object.assign(style, {
+            width: 'auto',
+            height: 'auto',
+          });
+        }
+      } else {
+        Object.assign(style, {
+          width: `${width}px`,
+          height: `${height}px`,
+        });
+      }
+
+      setStyle(highlightLayer, style);
+    };
+
+    const setReferenceFullW = (referenceElements: HTMLElement[]): void => {
+      const style = {
+        left: 0,
+        width: '100vw',
+      };
+
+      referenceElements.forEach((elem) => setStyle(elem, style));
+    };
+
+    const showPopoverGuide = () => {
+      nextTick(() => {
+        currentHighlightLayerElm.value = getTargetElm(currentStepInfo.value.element);
+        if (!currentHighlightLayerElm.value) return;
+        scrollToParentVisibleArea(currentHighlightLayerElm.value);
+        setHighlightLayerPosition(highlightLayerRef.value);
+        setHighlightLayerPosition(popoverWrapperRef.value, true);
+        setHighlightLayerPosition(referenceLayerRef.value, true);
+        scrollToElm(currentHighlightLayerElm.value);
+        isPopoverCenter.value && setReferenceFullW([referenceLayerRef.value, popoverWrapperRef.value]);
+      });
+    };
+
+    const showDialogGuide = () => {
+      nextTick(() => {
+        currentHighlightLayerElm.value = getTargetElm(currentStepInfo.value.element);
+        scrollToParentVisibleArea(currentHighlightLayerElm.value);
+        setHighlightLayerPosition(highlightLayerRef.value);
+        scrollToElm(currentHighlightLayerElm.value);
+      });
+    };
+
+    const showGuide = () => {
+      if (isPopover.value) {
+        showPopoverGuide();
+      } else {
+        showDialogGuide();
+      }
+      nextTick(() => {
+        popoverVisible.value = true;
+      });
+    };
+
+    const destroyGuide = () => {
+      highlightLayerRef.value?.parentNode.removeChild(highlightLayerRef.value);
+      overlayLayerRef.value?.parentNode.removeChild(overlayLayerRef.value);
+      removeClass(document.body, LOCK_CLASS);
+    };
+
+    const renderButtonContent = (buttonProps: ButtonProps, defaultContent: string) => {
+      const { content } = buttonProps || {};
+      return isFunction(content) ? content(h) : content || defaultContent;
+    };
+
+    const handleSkip = (e: MouseEvent) => {
+      const total = stepsTotal.value;
+      actived.value = false;
+      setInnerCurrent(-1, { e, total });
+      props.onSkip?.({ e, current: innerCurrent.value, total });
+    };
+
+    const handleNext = (e: MouseEvent) => {
+      const total = stepsTotal.value;
+      setInnerCurrent(innerCurrent.value + 1, { e, total });
+      props.onNextStepClick?.({
+        e,
+        next: innerCurrent.value + 1,
+        current: innerCurrent.value,
+        total,
+      });
+    };
+
+    const handleFinish = (e: MouseEvent) => {
+      const total = stepsTotal.value;
+      actived.value = false;
+      setInnerCurrent(-1, { e, total });
+      props.onFinish?.({ e, current: innerCurrent.value, total });
+    };
+
+    const handleBack = (e: MouseEvent) => {
+      const total = stepsTotal.value;
+      setInnerCurrent(0, { e, total });
+      props.onBack?.({ e, current: innerCurrent.value, total });
+    };
+
+    const contentProps = computed(() => ({
+      handleSkip,
+      handleNext,
+      handleFinish,
+      handleBack,
+      current: innerCurrent.value,
+      total: stepsTotal.value,
+    }));
+
+    const initGuide = () => {
+      if (innerCurrent.value >= 0 && innerCurrent.value < steps.value.length) {
+        if (!actived.value) {
+          actived.value = true;
+          addClass(document.body, LOCK_CLASS);
+        }
+        showGuide();
+      }
+    };
+
+    watch(innerCurrent, (val) => {
+      if (val >= 0 && val < stepsTotal.value) {
+        isPopover.value && (popoverVisible.value = false);
+        initGuide();
+      } else {
+        actived.value = false;
+        destroyGuide();
+      }
+    });
+
+    onMounted(() => {
+      initGuide();
+    });
+
+    return {
+      actived,
+      name,
+      zIndex,
+      stepProps,
+      currentCustomHighlightContent,
+      showCustomHighlightContent,
+      highlightClass,
+      maskClass,
+      popoverClass,
+      tooltipClass,
+      contetnClass,
+      footerClass,
+      wrapperClass,
+      overlayLayerRef,
+      highlightLayerRef,
+      referenceLayerRef,
+      popoverWrapperRef,
+      dialogTooltipRef,
+      popoverVisible,
+      currentStepInfo,
+      isPopover,
+      stepContainer,
+      contentSlot,
+      contentNode,
+      titleNode,
+      bodyNode,
+      counterNode,
+      hideSkip,
+      hideCounter,
+      isLast,
+      isFirst,
+      finishButtonProps,
+      buttonSize,
+      globalConfig,
+      getCurrentCrossProps,
+      handleSkip,
+      handleNext,
+      handleFinish,
+      handleBack,
+      renderButtonContent,
+    };
+  },
+});
+</script>
diff --git a/src/guide/index.ts b/src/guide/index.ts
new file mode 100644
index 000000000..61e1c1c8f
--- /dev/null
+++ b/src/guide/index.ts
@@ -0,0 +1,11 @@
+import Guide from './guide.vue';
+import { withInstall, WithInstallType } from '../shared';
+import { TdGuideProps, GuideStep } from './type';
+
+import './style';
+
+export * from './type';
+export type GuideProps = TdGuideProps;
+
+const _Guide: WithInstallType<typeof Guide> = withInstall(Guide);
+export default _Guide;
diff --git a/src/guide/interface.ts b/src/guide/interface.ts
new file mode 100644
index 000000000..a53eff0fe
--- /dev/null
+++ b/src/guide/interface.ts
@@ -0,0 +1,15 @@
+import { GuideStep } from './type';
+
+export type GuideCrossProps = Pick<
+  GuideStep,
+  'mode' | 'skipButtonProps' | 'nextButtonProps' | 'backButtonProps' | 'showOverlay' | 'highlightPadding'
+>;
+
+export interface ContentProps {
+  handleNext: (e: MouseEvent) => void;
+  handleSkip: (e: MouseEvent) => void;
+  handleBack: (e: MouseEvent) => void;
+  handleFinish: (e: MouseEvent) => void;
+  current: number;
+  total: number;
+}
diff --git a/src/guide/props.ts b/src/guide/props.ts
new file mode 100644
index 000000000..9ec3e7c16
--- /dev/null
+++ b/src/guide/props.ts
@@ -0,0 +1,86 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdGuideProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 透传 返回 的全部属性，示例：`{ content: '返回', theme: 'default' }` */
+  backButtonProps: {
+    type: Object as PropType<TdGuideProps['backButtonProps']>,
+  },
+  /** 用于自定义渲染计数部分 */
+  counter: {
+    type: Function as PropType<TdGuideProps['counter']>,
+  },
+  /** 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景 */
+  current: {
+    type: Number,
+    default: undefined,
+  },
+  modelValue: {
+    type: Number,
+    default: undefined,
+  },
+  /** 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景，非受控属性 */
+  defaultCurrent: {
+    type: Number,
+  },
+  /** 透传 完成 的全部属性，示例：`{ content: '完成', theme: 'primary' }` */
+  finishButtonProps: {
+    type: Object as PropType<TdGuideProps['finishButtonProps']>,
+  },
+  /** 是否隐藏计数 */
+  hideCounter: Boolean,
+  /** 是否隐藏跳过按钮 */
+  hideSkip: Boolean,
+  /** 高亮框的内边距 */
+  highlightPadding: {
+    type: Number,
+    default: 8,
+  },
+  /** 引导框的类型 */
+  mode: {
+    type: String as PropType<TdGuideProps['mode']>,
+    default: 'popover' as TdGuideProps['mode'],
+    validator(val: TdGuideProps['mode']): boolean {
+      if (!val) return true;
+      return ['popover', 'dialog'].includes(val);
+    },
+  },
+  /** 透传 下一步按钮 的全部属性，示例：{ content: '下一步', theme: 'primary' } */
+  nextButtonProps: {
+    type: Object as PropType<TdGuideProps['nextButtonProps']>,
+  },
+  /** 是否出现遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 透传 跳过按钮 的全部属性，{ content: '跳过', theme: 'default' } */
+  skipButtonProps: {
+    type: Object as PropType<TdGuideProps['skipButtonProps']>,
+  },
+  /** 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。 */
+  steps: {
+    type: Array as PropType<TdGuideProps['steps']>,
+  },
+  /** 提示框的层级 */
+  zIndex: {
+    type: Number,
+    default: 999999,
+  },
+  /** 点击返回按钮时触发 */
+  onBack: Function as PropType<TdGuideProps['onBack']>,
+  /** 当前步骤发生变化时触发 */
+  onChange: Function as PropType<TdGuideProps['onChange']>,
+  /** 点击完成按钮时触发 */
+  onFinish: Function as PropType<TdGuideProps['onFinish']>,
+  /** 点击下一步时触发 */
+  onNextStepClick: Function as PropType<TdGuideProps['onNextStepClick']>,
+  /** 点击跳过按钮时触发 */
+  onSkip: Function as PropType<TdGuideProps['onSkip']>,
+};
diff --git a/src/guide/style/css.js b/src/guide/style/css.js
new file mode 100644
index 000000000..6a9a4b132
--- /dev/null
+++ b/src/guide/style/css.js
@@ -0,0 +1 @@
+import './index.css';
diff --git a/src/guide/style/index.js b/src/guide/style/index.js
new file mode 100644
index 000000000..e6425e1f4
--- /dev/null
+++ b/src/guide/style/index.js
@@ -0,0 +1 @@
+import '../../_common/style/mobile/components/guide/_index.less';
diff --git a/src/guide/type.ts b/src/guide/type.ts
new file mode 100644
index 000000000..dd29efeb7
--- /dev/null
+++ b/src/guide/type.ts
@@ -0,0 +1,174 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { ButtonProps } from '../button';
+import { PopoverProps } from '../popover';
+import { TNode, AttachNode } from '../common';
+
+export interface TdGuideProps {
+  /**
+   * 透传 返回 的全部属性，示例：`{ content: '返回', theme: 'default' }`
+   */
+  backButtonProps?: ButtonProps;
+  /**
+   * 用于自定义渲染计数部分
+   */
+  counter?: TNode<{ current: number; total: number }>;
+  /**
+   * 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景
+   */
+  current?: number;
+  /**
+   * 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景，非受控属性
+   */
+  defaultCurrent?: number;
+  /**
+   * 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景
+   */
+  modelValue?: number;
+  /**
+   * 透传 完成 的全部属性，示例：`{ content: '完成', theme: 'primary' }`
+   */
+  finishButtonProps?: ButtonProps;
+  /**
+   * 是否隐藏计数
+   * @default false
+   */
+  hideCounter?: boolean;
+  /**
+   * 是否隐藏跳过按钮
+   * @default false
+   */
+  hideSkip?: boolean;
+  /**
+   * 高亮框的内边距
+   * @default 8
+   */
+  highlightPadding?: number;
+  /**
+   * 引导框的类型
+   * @default popover
+   */
+  mode?: 'popover' | 'dialog';
+  /**
+   * 透传 下一步按钮 的全部属性，示例：{ content: '下一步', theme: 'primary' }
+   */
+  nextButtonProps?: ButtonProps;
+  /**
+   * 是否出现遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 透传 跳过按钮 的全部属性，{ content: '跳过', theme: 'default' }
+   */
+  skipButtonProps?: ButtonProps;
+  /**
+   * 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。
+   */
+  steps?: Array<GuideStep>;
+  /**
+   * 提示框的层级
+   * @default 999999
+   */
+  zIndex?: number;
+  /**
+   * 点击返回按钮时触发
+   */
+  onBack?: (context: { e: MouseEvent; current: number; total: number }) => void;
+  /**
+   * 当前步骤发生变化时触发
+   */
+  onChange?: (current: number, context?: { e: MouseEvent; total: number }) => void;
+  /**
+   * 点击完成按钮时触发
+   */
+  onFinish?: (context: { e: MouseEvent; current: number; total: number }) => void;
+  /**
+   * 点击下一步时触发
+   */
+  onNextStepClick?: (context: { e: MouseEvent; next: number; current: number; total: number }) => void;
+  /**
+   * 点击跳过按钮时触发
+   */
+  onSkip?: (context: { e: MouseEvent; current: number; total: number }) => void;
+}
+
+export interface GuideStep {
+  /**
+   * 用于自定义当前引导框的返回按钮的内容
+   */
+  backButtonProps?: ButtonProps;
+  /**
+   * 当前步骤提示框的内容
+   */
+  body?: string | TNode;
+  /**
+   * 用户自定义引导弹框的内容，一旦存在，此时除 `placement`、`offset`和`element` 外，其它属性全部失效）
+   */
+  content?: TNode;
+  /**
+   * 高亮的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'#tdesign' 或 () => document.querySelector('#tdesign')
+   */
+  element: AttachNode;
+  /**
+   * 用户自定义的高亮框 (仅当 `mode` 为 `popover` 时生效)
+   */
+  highlightContent?: TNode;
+  /**
+   * 高亮框的内边距
+   */
+  highlightPadding?: number;
+  /**
+   * 引导框的类型
+   */
+  mode?: 'popover' | 'dialog';
+  /**
+   * 用于自定义当前引导框的下一步按钮的内容
+   */
+  nextButtonProps?: ButtonProps;
+  /**
+   * 【讨论确认中】相对于 placement 的偏移量，示例：[-10, 20] 或 ['10px', '8px']
+   */
+  offset?: Array<string | number>;
+  /**
+   * 引导框相对于高亮元素出现的位置，(仅当 `mode` 为 `popover` 时生效)
+   * @default 'top'
+   */
+  placement?: StepPopoverPlacement;
+  /**
+   * 透传全部属性到 Popover 组件。`mode=popover` 时有效
+   */
+  popoverProps?: PopoverProps;
+  /**
+   * 是否出现遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 用于自定义当前步骤引导框的跳过按钮的内容
+   */
+  skipButtonProps?: ButtonProps;
+  /**
+   * 当前步骤的标题内容
+   */
+  title?: string | TNode;
+}
+
+export type StepPopoverPlacement =
+  | 'top'
+  | 'left'
+  | 'right'
+  | 'bottom'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'left-top'
+  | 'left-bottom'
+  | 'right-top'
+  | 'right-bottom'
+  | 'center';
diff --git a/src/guide/utils/dom.ts b/src/guide/utils/dom.ts
new file mode 100644
index 000000000..c1a8bca17
--- /dev/null
+++ b/src/guide/utils/dom.ts
@@ -0,0 +1,136 @@
+import isString from 'lodash/isString';
+import isFunction from 'lodash/isFunction';
+import { AttachNode } from '@/common';
+import { elementInViewport, getWindowScroll, getWindowSize } from '../../shared/dom';
+/**
+ * 获取元素某个 css 对应的值
+ * @param element 元素
+ * @param propName css 名
+ * @returns string
+ */
+export function getElmCssPropValue(element: HTMLElement, propName: string): string {
+  let propValue = '';
+
+  if (document.defaultView && document.defaultView.getComputedStyle) {
+    propValue = document.defaultView.getComputedStyle(element, null).getPropertyValue(propName);
+  }
+
+  if (propValue && propValue.toLowerCase) {
+    return propValue.toLowerCase();
+  }
+
+  return propValue;
+}
+
+/**
+ * 判断元素是否处在 position fixed 中
+ * @param element 元素
+ * @returns boolean
+ */
+export function isFixed(element: HTMLElement): boolean {
+  const p = element.parentNode as HTMLElement;
+
+  if (!p || p.nodeName === 'HTML') {
+    return false;
+  }
+
+  if (getElmCssPropValue(element, 'position') === 'fixed') {
+    return true;
+  }
+
+  return isFixed(p);
+}
+
+/**
+ * 获取元素相对于另一个元素的位置（或者说相对于 body）
+ * 感谢 `meouw`: http://stackoverflow.com/a/442474/375966
+ */
+export function getRelativePosition(elm: HTMLElement, relativeElm: HTMLElement = document.body) {
+  const { scrollTop, scrollLeft } = getWindowScroll();
+  const { top: elmTop, left: elmLeft } = elm.getBoundingClientRect();
+  const { top: relElmTop, left: relElmLeft } = relativeElm.getBoundingClientRect();
+  const relativeElmPosition = getElmCssPropValue(relativeElm, 'position');
+
+  if (
+    (relativeElm.tagName.toLowerCase() !== 'body' && relativeElmPosition === 'relative') ||
+    relativeElmPosition === 'sticky'
+  ) {
+    return {
+      top: elmTop - relElmTop,
+      left: elmLeft - relElmLeft,
+    };
+  }
+
+  if (isFixed(elm)) {
+    return {
+      top: elmTop,
+      left: elmLeft,
+    };
+  }
+
+  return {
+    top: elmTop + scrollTop,
+    left: elmLeft + scrollLeft,
+  };
+}
+
+export function getTargetElm(elm: AttachNode): HTMLElement {
+  if (elm) {
+    let targetElement: HTMLElement = null;
+    if (isString(elm)) {
+      targetElement = document.querySelector(elm);
+    } else if (isFunction(elm)) {
+      targetElement = elm() as HTMLElement;
+    } else {
+      throw new Error('elm should be string or function');
+    }
+    if (targetElement) {
+      return targetElement as HTMLElement;
+    }
+    if (process?.env?.NODE_ENV !== 'test') {
+      throw new Error('There is no element with given.');
+    }
+  } else {
+    return document.body;
+  }
+}
+
+export function getScrollParent(element: HTMLElement) {
+  let style = window.getComputedStyle(element);
+  const excludeStaticParent = style.position === 'absolute';
+  const overflowRegex = /(auto|scroll)/;
+
+  if (style.position === 'fixed') return document.body;
+
+  for (let parent = element; parent.parentElement; ) {
+    parent = parent.parentElement;
+    style = window.getComputedStyle(parent);
+    if (excludeStaticParent && style.position === 'static') {
+      continue;
+    }
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
+  }
+
+  return document.body;
+}
+
+export function scrollToParentVisibleArea(element: HTMLElement) {
+  const parent = getScrollParent(element);
+  if (parent === document.body) return;
+  // !todo 逻辑待验证
+  if (elementInViewport(element, parent)) return;
+  parent.scrollTop = element.offsetTop - parent.offsetTop;
+}
+
+export function scrollToElm(elm: HTMLElement) {
+  const rect = elm.getBoundingClientRect();
+
+  if (!elementInViewport(elm)) {
+    const winHeight = getWindowSize().height;
+    // const top = rect.bottom - (rect.bottom - rect.top);
+    window.scrollTo({
+      top: rect.top - (winHeight / 2 - rect.height / 2),
+      behavior: 'smooth',
+    });
+  }
+}
diff --git a/src/guide/utils/index.ts b/src/guide/utils/index.ts
new file mode 100644
index 000000000..ae897bea5
--- /dev/null
+++ b/src/guide/utils/index.ts
@@ -0,0 +1,10 @@
+import {
+  getElmCssPropValue,
+  isFixed,
+  getRelativePosition,
+  getTargetElm,
+  scrollToParentVisibleArea,
+  scrollToElm,
+} from './dom';
+
+export { getElmCssPropValue, isFixed, getRelativePosition, getTargetElm, scrollToParentVisibleArea, scrollToElm };
diff --git a/src/locale/en_US.ts b/src/locale/en_US.ts
index d122ae417..a4a69aee9 100644
--- a/src/locale/en_US.ts
+++ b/src/locale/en_US.ts
@@ -80,4 +80,10 @@ export default {
       successText: 'Success',
     },
   },
+  guide: {
+    next: 'Next',
+    skip: 'Skip',
+    finish: 'Finish',
+    back: 'Back',
+  },
 };
diff --git a/src/locale/zh_CN.ts b/src/locale/zh_CN.ts
index ed616202c..b14467446 100644
--- a/src/locale/zh_CN.ts
+++ b/src/locale/zh_CN.ts
@@ -67,4 +67,10 @@ export default {
       successText: '上传成功',
     },
   },
+  guide: {
+    next: '下一步',
+    skip: '跳过',
+    finish: '完成',
+    back: '返回',
+  },
 };
diff --git a/src/shared/dom.ts b/src/shared/dom.ts
index 5b51712cf..e3480a422 100644
--- a/src/shared/dom.ts
+++ b/src/shared/dom.ts
@@ -3,6 +3,8 @@ import isString from 'lodash/isString';
 
 import { AttachNode } from '../common';
 
+const trim = (str: string): string => (str || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
+
 export function getAttach(node: AttachNode) {
   const attachNode = isFunction(node) ? node() : node;
 
@@ -29,3 +31,98 @@ export function preventDefault(event: Event, isStopPropagation?: boolean) {
     stopPropagation(event);
   }
 }
+
+export function hasClass(el: Element, cls: string): any {
+  if (!el || !cls) return false;
+  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
+  if (el.classList) {
+    return el.classList.contains(cls);
+  }
+  return ` ${el.className} `.indexOf(` ${cls} `) > -1;
+}
+
+export function addClass(el: Element, cls: string): any {
+  if (!el) return;
+  let curClass = el.className;
+  const classes = (cls || '').split(' ');
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.add(clsName);
+    } else if (!hasClass(el, clsName)) {
+      curClass += ` ${clsName}`;
+    }
+  }
+  if (!el.classList) {
+    el.className = curClass;
+  }
+}
+
+export function removeClass(el: Element, cls: string): any {
+  if (!el || !cls) return;
+  const classes = cls.split(' ');
+  let curClass = ` ${el.className} `;
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.remove(clsName);
+    } else if (hasClass(el, clsName)) {
+      curClass = curClass.replace(` ${clsName} `, ' ');
+    }
+  }
+  if (!el.classList) {
+    el.className = trim(curClass);
+  }
+}
+
+/**
+ * 检查元素是否在父元素视图
+ * http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
+ * @param elm 元素
+ * @param parent
+ * @returns boolean
+ */
+export function elementInViewport(elm: HTMLElement, parent?: HTMLElement): boolean {
+  const rect = elm.getBoundingClientRect();
+  if (parent) {
+    const parentRect = parent.getBoundingClientRect();
+    return (
+      rect.top >= parentRect.top &&
+      rect.left >= parentRect.left &&
+      rect.bottom <= parentRect.bottom &&
+      rect.right <= parentRect.right
+    );
+  }
+  return rect.top >= 0 && rect.left >= 0 && rect.bottom + 80 <= window.innerHeight && rect.right <= window.innerWidth;
+}
+
+/**
+ * 获取当前视图滑动的距离
+ * @returns { scrollTop: number, scrollLeft: number }
+ */
+export function getWindowScroll(): { scrollTop: number; scrollLeft: number } {
+  const { body } = document;
+  const docElm = document.documentElement;
+  const scrollTop = window.pageYOffset || docElm.scrollTop || body.scrollTop;
+  const scrollLeft = window.pageXOffset || docElm.scrollLeft || body.scrollLeft;
+
+  return { scrollTop, scrollLeft };
+}
+
+/**
+ * 获取当前视图的大小
+ * @returns { width: number, height: number }
+ */
+export function getWindowSize(): { width: number; height: number } {
+  if (window.innerWidth !== undefined) {
+    return { width: window.innerWidth, height: window.innerHeight };
+  }
+  const doc = document.documentElement;
+  return { width: doc.clientWidth, height: doc.clientHeight };
+}