From 84f2262fbaaee8818f1f823ef702db055ab2e52b Mon Sep 17 00:00:00 2001
From: "Y." <anly_yaw@163.com>
Date: Thu, 29 Aug 2024 20:49:57 +0800
Subject: [PATCH] feat(Toast): support attach props for ToastPlugin (#1555)

* feat(Toast): support attach props for ToastPlugin

* test: update snapshots

* fix(DropdownMenu): resolved menuOpened and menuClosed events are invalid

* chore: update _common

* test: update snapshots

* chore(Toast): strip ToastPlugin from index file to plugin file

* fix: fix lint
---
 .eslintrc                                     |    1 +
 src/_common                                   |    2 +-
 src/_util/canUseDom.ts                        |    8 +
 src/_util/getScrollParent.ts                  |   20 +
 src/_util/supportsPassive.ts                  |   19 +
 src/_util/useTouch.ts                         |   72 +
 src/cascader/demos/lazy.vue                   |    2 +-
 src/dropdown-menu/dropdown-menu.tsx           |    6 +-
 src/hooks/useLockScroll.ts                    |   83 +
 src/hooks/useTeleport.ts                      |   32 +
 .../__test__/__snapshots__/demo.test.jsx.snap |   26 +
 src/image-viewer/__test__/demo.test.jsx       |    2 +
 .../__test__/__snapshots__/demo.test.jsx.snap |    6 +-
 src/layout/__test__/demo.test.jsx             |    4 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |  112 +
 src/loading/__test__/demo.test.jsx            |    6 +
 src/plugins.ts                                |    2 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |  351 ++
 src/rate/__test__/demo.test.jsx               |    2 +
 src/shared/dom.ts                             |   16 +-
 src/swipe-cell/demos/double.vue               |    2 +-
 src/swipe-cell/demos/event.vue                |    3 +-
 src/swipe-cell/demos/icon.vue                 |    2 +-
 src/swipe-cell/demos/left.vue                 |    3 +-
 src/swipe-cell/demos/right.vue                |    2 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |  107 +
 src/swiper/__test__/demo.test.jsx             |    2 +
 .../__test__/__snapshots__/demo.test.jsx.snap |    2 +
 src/toast/__test__/index.test.jsx             |    7 +-
 src/toast/demos/base.vue                      |    6 +-
 src/toast/index.ts                            |  114 +-
 src/toast/plugin.ts                           |  118 +
 src/toast/props.ts                            |    5 -
 src/toast/toast.en-US.md                      |   10 +-
 src/toast/toast.md                            |   10 +-
 src/toast/toast.tsx                           |   26 +-
 src/toast/type.ts                             |   24 +-
 .../__test__/__snapshots__/demo.test.jsx.snap | 3131 +++++++++++++++++
 src/tree-select/__test__/demo.test.jsx        |   25 +
 39 files changed, 4210 insertions(+), 161 deletions(-)
 create mode 100644 src/_util/canUseDom.ts
 create mode 100644 src/_util/getScrollParent.ts
 create mode 100644 src/_util/supportsPassive.ts
 create mode 100644 src/_util/useTouch.ts
 create mode 100644 src/hooks/useLockScroll.ts
 create mode 100644 src/hooks/useTeleport.ts
 create mode 100644 src/toast/plugin.ts
 create mode 100644 src/tree-select/__test__/__snapshots__/demo.test.jsx.snap
 create mode 100644 src/tree-select/__test__/demo.test.jsx

diff --git a/.eslintrc b/.eslintrc
index 2632f2c4f..c7f919349 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -38,6 +38,7 @@
     "no-unused-expressions": "off",
     "no-return-assign": "off",
     "no-use-before-define": "off",
+    "no-bitwise": "off",
     "func-names": "off",
     "guard-for-in": "off",
     "consistent-return": "off",
diff --git a/src/_common b/src/_common
index f1adcf087..889f7026c 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit f1adcf087ce845e27c6cedbdeb044a57130b7e8e
+Subproject commit 889f7026c7e4b0dda2534c3a4c51ea8cf7f2ac6a
diff --git a/src/_util/canUseDom.ts b/src/_util/canUseDom.ts
new file mode 100644
index 000000000..496eaebd6
--- /dev/null
+++ b/src/_util/canUseDom.ts
@@ -0,0 +1,8 @@
+import isUndefined from 'lodash/isUndefined';
+
+export const canUseDom = !!(
+  !isUndefined(window) &&
+  !isUndefined(document) &&
+  window.document &&
+  window.document.createElement
+);
diff --git a/src/_util/getScrollParent.ts b/src/_util/getScrollParent.ts
new file mode 100644
index 000000000..b4ee89a52
--- /dev/null
+++ b/src/_util/getScrollParent.ts
@@ -0,0 +1,20 @@
+type ScrollElement = HTMLElement | Window;
+
+const overflowScrollReg = /scroll|auto|overlay/i;
+
+export default function getScrollParent(
+  el: Element | null | undefined,
+  root: ScrollElement | null | undefined = window,
+): Window | Element | null | undefined {
+  let node = el;
+
+  while (node && node !== root && node.nodeType === 1) {
+    const { overflowY } = window.getComputedStyle(node);
+    if (overflowScrollReg.test(overflowY)) {
+      return node;
+    }
+    node = node.parentNode as Element;
+  }
+
+  return root;
+}
diff --git a/src/_util/supportsPassive.ts b/src/_util/supportsPassive.ts
new file mode 100644
index 000000000..a4b32a667
--- /dev/null
+++ b/src/_util/supportsPassive.ts
@@ -0,0 +1,19 @@
+import { ref } from 'vue';
+import { canUseDom } from './canUseDom';
+
+export const supportsPassive = ref(false);
+
+if (canUseDom) {
+  try {
+    const opts = {};
+    Object.defineProperty(opts, 'passive', {
+      get() {
+        supportsPassive.value = true;
+        return true; // 添加返回值
+      },
+    });
+    window.addEventListener('test-passive', null as any, opts);
+  } catch (e) {
+    //
+  }
+}
diff --git a/src/_util/useTouch.ts b/src/_util/useTouch.ts
new file mode 100644
index 000000000..5757415f2
--- /dev/null
+++ b/src/_util/useTouch.ts
@@ -0,0 +1,72 @@
+/* eslint-disable no-undef */
+
+import { ref } from 'vue';
+
+const MIN_DISTANCE = 10;
+
+type Direction = '' | 'vertical' | 'horizontal';
+
+function getDirection(x: number, y: number) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+  return '';
+}
+
+export function useTouch() {
+  const startX = ref(0);
+  const startY = ref(0);
+  const deltaX = ref(0);
+  const deltaY = ref(0);
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const direction = ref<Direction>('');
+
+  const isVertical = () => direction.value === 'vertical';
+  const isHorizontal = () => direction.value === 'horizontal';
+
+  const reset = () => {
+    deltaX.value = 0;
+    deltaY.value = 0;
+    offsetX.value = 0;
+    offsetY.value = 0;
+    direction.value = '';
+  };
+
+  const start = ((event: TouchEvent) => {
+    reset();
+    startX.value = event.touches[0].clientX;
+    startY.value = event.touches[0].clientY;
+  }) as EventListener;
+
+  const move = ((event: TouchEvent) => {
+    const touch = event.touches[0];
+    // Fix: Safari back will set clientX to negative number
+    deltaX.value = touch.clientX < 0 ? 0 : touch.clientX - startX.value;
+    deltaY.value = touch.clientY - startY.value;
+    offsetX.value = Math.abs(deltaX.value);
+    offsetY.value = Math.abs(deltaY.value);
+
+    if (!direction.value) {
+      direction.value = getDirection(offsetX.value, offsetY.value);
+    }
+  }) as EventListener;
+
+  return {
+    move,
+    start,
+    reset,
+    startX,
+    startY,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    direction,
+    isVertical,
+    isHorizontal,
+  };
+}
diff --git a/src/cascader/demos/lazy.vue b/src/cascader/demos/lazy.vue
index 0eb41e28a..f81a00aed 100644
--- a/src/cascader/demos/lazy.vue
+++ b/src/cascader/demos/lazy.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
-import Toast from '../../toast/index';
+import { Toast } from 'tdesign-mobile-vue';
 
 const data = ref([
   {
diff --git a/src/dropdown-menu/dropdown-menu.tsx b/src/dropdown-menu/dropdown-menu.tsx
index 91cab15f4..2a6fb88a0 100644
--- a/src/dropdown-menu/dropdown-menu.tsx
+++ b/src/dropdown-menu/dropdown-menu.tsx
@@ -23,7 +23,11 @@ const name = `${prefix}-dropdown-menu`;
 export default defineComponent({
   name,
   components: { CaretDownSmallIcon, CaretUpSmallIcon },
-  props: DropdownMenuProps,
+  props: {
+    onMenuOpened: Function,
+    onMenuClosed: Function,
+    ...DropdownMenuProps,
+  },
   emits: ['menuOpened', 'menuClosed'],
   setup(props, { slots }) {
     const renderContent = useContent();
diff --git a/src/hooks/useLockScroll.ts b/src/hooks/useLockScroll.ts
new file mode 100644
index 000000000..f38734798
--- /dev/null
+++ b/src/hooks/useLockScroll.ts
@@ -0,0 +1,83 @@
+import { Ref, watch, onMounted, onActivated, onBeforeUnmount, onDeactivated, nextTick } from 'vue';
+import { useTouch } from '../_util/useTouch';
+import getScrollParent from '../_util/getScrollParent';
+import { supportsPassive } from '../_util/supportsPassive';
+
+let totalLockCount = 0;
+let mounted: boolean = null;
+
+// 移植自vant：https://github.com/youzan/vant/blob/HEAD/src/composables/use-lock-scroll.ts
+export function useLockScroll(rootRef: Ref<HTMLElement | undefined>, shouldLock: () => boolean, componentName: string) {
+  const touch = useTouch();
+  const BODY_LOCK_CLASS = `${componentName}--lock`;
+
+  const onTouchMove = (event: TouchEvent) => {
+    touch.move(event);
+
+    const direction = touch.deltaY.value > 0 ? '10' : '01';
+    const el = getScrollParent(event.target as Element, rootRef.value) as HTMLElement;
+    if (!el) return;
+    const { scrollHeight, offsetHeight, scrollTop } = el;
+    let status = '11';
+
+    if (scrollTop === 0) {
+      status = offsetHeight >= scrollHeight ? '00' : '01';
+    } else if (scrollTop + offsetHeight >= scrollHeight) {
+      status = '10';
+    }
+
+    if (status !== '11' && touch.isVertical() && !(parseInt(status, 2) & parseInt(direction, 2))) {
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+    }
+  };
+
+  const lock = () => {
+    document.addEventListener('touchstart', touch.start);
+    document.addEventListener('touchmove', onTouchMove, supportsPassive.value ? { passive: false } : false);
+
+    if (!totalLockCount) {
+      document.body.classList.add(BODY_LOCK_CLASS);
+    }
+
+    totalLockCount += 1;
+  };
+
+  const unlock = () => {
+    if (totalLockCount) {
+      document.removeEventListener('touchstart', touch.start);
+      document.removeEventListener('touchmove', onTouchMove);
+
+      totalLockCount -= 1;
+
+      if (!totalLockCount) {
+        document.body.classList.remove(BODY_LOCK_CLASS);
+      }
+    }
+  };
+
+  const init = () => shouldLock() && lock();
+
+  const destroy = () => shouldLock() && unlock();
+
+  onMounted(() => {
+    init();
+    nextTick(() => {
+      mounted = true;
+    });
+  });
+
+  onActivated(() => {
+    if (mounted) {
+      init();
+    }
+  });
+
+  onDeactivated(destroy);
+  onBeforeUnmount(destroy);
+
+  watch(shouldLock, (value) => {
+    value ? lock() : unlock();
+  });
+}
diff --git a/src/hooks/useTeleport.ts b/src/hooks/useTeleport.ts
new file mode 100644
index 000000000..9da6f1a6f
--- /dev/null
+++ b/src/hooks/useTeleport.ts
@@ -0,0 +1,32 @@
+import { computed, Ref, onMounted, ref, watch } from 'vue';
+import isFunction from 'lodash/isFunction';
+import { getSSRAttach, getAttach } from '../shared/dom';
+import { AttachNode } from '../common';
+
+/**
+ * @description 返回挂载的节点, 用于teleport
+ * @param attach 既可以是一个函数, 也可以是一个ref
+ * @param triggerNode 既可以是一个函数, 也可以是一个ref
+ */
+const useTeleport = (
+  attach: (() => AttachNode) | Ref<AttachNode>,
+  triggerNode?: (() => any) | Ref<any>,
+): Ref<string | Element> => {
+  // 如果是函数, 则使用computed包裹 否则直接使用ref
+  const to = isFunction(attach) ? computed(attach) : ref(attach);
+  const innerTriggerNode = isFunction(triggerNode) ? computed(triggerNode) : ref(triggerNode);
+
+  const element = ref<string | Element>();
+
+  const getElement = () => {
+    element.value = getSSRAttach() || getAttach(to.value, innerTriggerNode.value);
+  };
+
+  onMounted(() => getElement());
+
+  watch([to, innerTriggerNode], () => getElement());
+
+  return element;
+};
+
+export default useTeleport;
diff --git a/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap b/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap
index 1ee58ed90..c2c961530 100644
--- a/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,5 +1,31 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`ImageViewer > ImageViewer alignVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+       基础图片预览 + 对齐方式 
+      
+    </span>
+    <!---->
+  </button>
+  <!---->
+  
+</div>
+`;
+
 exports[`ImageViewer > ImageViewer baseVue demo works fine 1`] = `
 <div
   data-v-app=""
diff --git a/src/image-viewer/__test__/demo.test.jsx b/src/image-viewer/__test__/demo.test.jsx
index 05f039a0e..0910bc538 100644
--- a/src/image-viewer/__test__/demo.test.jsx
+++ b/src/image-viewer/__test__/demo.test.jsx
@@ -3,11 +3,13 @@
  */
 
 import { mount } from '@vue/test-utils';
+import alignVue from '@/image-viewer/demos/align.vue';
 import baseVue from '@/image-viewer/demos/base.vue';
 import mobileVue from '@/image-viewer/demos/mobile.vue';
 import operationVue from '@/image-viewer/demos/operation.vue';
 
 const mapper = {
+  alignVue,
   baseVue,
   mobileVue,
   operationVue,
diff --git a/src/layout/__test__/__snapshots__/demo.test.jsx.snap b/src/layout/__test__/__snapshots__/demo.test.jsx.snap
index a2cc67c69..a986ab888 100644
--- a/src/layout/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/layout/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Col > Col baseVue demo works fine 1`] = `
+exports[`Layout > Layout baseVue demo works fine 1`] = `
 <div
   data-v-app=""
 >
@@ -78,7 +78,7 @@ exports[`Col > Col baseVue demo works fine 1`] = `
 </div>
 `;
 
-exports[`Col > Col mobileVue demo works fine 1`] = `
+exports[`Layout > Layout mobileVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
   data-v-05f1f61d=""
@@ -266,7 +266,7 @@ exports[`Col > Col mobileVue demo works fine 1`] = `
 </div>
 `;
 
-exports[`Col > Col offsetVue demo works fine 1`] = `
+exports[`Layout > Layout offsetVue demo works fine 1`] = `
 <div
   class="t-row"
   data-v-5d81698e=""
diff --git a/src/layout/__test__/demo.test.jsx b/src/layout/__test__/demo.test.jsx
index 0738219f1..76aa3b8b2 100644
--- a/src/layout/__test__/demo.test.jsx
+++ b/src/layout/__test__/demo.test.jsx
@@ -13,9 +13,9 @@ const mapper = {
   offsetVue,
 };
 
-describe('Col', () => {
+describe('Layout', () => {
   Object.keys(mapper).forEach((demoName) => {
-    it(`Col ${demoName} demo works fine`, () => {
+    it(`Layout ${demoName} demo works fine`, () => {
       const wrapper = mount(mapper[demoName]);
       expect(wrapper.element).toMatchSnapshot();
     });
diff --git a/src/loading/__test__/__snapshots__/demo.test.jsx.snap b/src/loading/__test__/__snapshots__/demo.test.jsx.snap
index 7798e8611..75f0f9671 100644
--- a/src/loading/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/loading/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,5 +1,35 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Loading > Loading attachVue demo works fine 1`] = `
+<div
+  class="loading-demo"
+  data-v-4de40010=""
+>
+  <div
+    class="loading-attach-demo__title"
+    data-v-4de40010=""
+    id="alice"
+  >
+    Hello, I'm Alice. I'm going to be a front-end developer.
+  </div>
+  <!---->
+  <div
+    class="t-switch t-switch--small"
+    data-v-4de40010=""
+  >
+    <div
+      class="t-switch__dot t-switch__dot--small"
+    >
+      <div
+        class="t-switch__label t-switch__label--small"
+      >
+        关
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Loading > Loading baseVue demo works fine 1`] = `
 <div
   data-v-app=""
@@ -157,6 +187,34 @@ exports[`Loading > Loading delayVue demo works fine 1`] = `
 </div>
 `;
 
+exports[`Loading > Loading fullscreenVue demo works fine 1`] = `
+<div
+  class="loading-demo"
+  data-v-d41a5df4=""
+>
+  <!---->
+  <div
+    data-v-d41a5df4=""
+  >
+     全局加载开关（开启加载1秒后自动归位）： 
+    <div
+      class="t-switch t-switch--small"
+      data-v-d41a5df4=""
+    >
+      <div
+        class="t-switch__dot t-switch__dot--small t-switch__dot--plain"
+      >
+        <div
+          class="t-switch__label t-switch__label--small"
+        >
+          <!---->
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Loading > Loading horzVue demo works fine 1`] = `
 <div
   data-v-app=""
@@ -958,6 +1016,60 @@ exports[`Loading > Loading pureTextVue demo works fine 1`] = `
 </div>
 `;
 
+exports[`Loading > Loading serviceVue demo works fine 1`] = `
+<div
+  class="loading-demo"
+  data-v-2b16437a=""
+>
+  <div
+    class="loading-service-demo"
+    data-v-2b16437a=""
+    id="loading-service-demo"
+  >
+    Loading 挂载容器
+  </div>
+  <div
+    class="space"
+    data-v-2b16437a=""
+  >
+    <button
+      aria-disabled="false"
+      class="t-button t-button--size-small t-button--base t-button--default t-button--rectangle t-loading__btn"
+      data-v-2b16437a=""
+      role="button"
+      type="button"
+    >
+      <!---->
+      <span
+        class="t-button__content"
+      >
+        
+         函数方式加载（局部） 
+        
+      </span>
+      <!---->
+    </button>
+    <button
+      aria-disabled="false"
+      class="t-button t-button--size-small t-button--base t-button--default t-button--rectangle"
+      data-v-2b16437a=""
+      role="button"
+      type="button"
+    >
+      <!---->
+      <span
+        class="t-button__content"
+      >
+        
+        函数方式加载（全屏）
+        
+      </span>
+      <!---->
+    </button>
+  </div>
+</div>
+`;
+
 exports[`Loading > Loading sizeVue demo works fine 1`] = `
 <div
   data-v-app=""
diff --git a/src/loading/__test__/demo.test.jsx b/src/loading/__test__/demo.test.jsx
index 1eff088ac..f9095cee4 100644
--- a/src/loading/__test__/demo.test.jsx
+++ b/src/loading/__test__/demo.test.jsx
@@ -3,21 +3,27 @@
  */
 
 import { mount } from '@vue/test-utils';
+import attachVue from '@/loading/demos/attach.vue';
 import baseVue from '@/loading/demos/base.vue';
 import delayVue from '@/loading/demos/delay.vue';
+import fullscreenVue from '@/loading/demos/fullscreen.vue';
 import horzVue from '@/loading/demos/horz.vue';
 import mobileVue from '@/loading/demos/mobile.vue';
 import pureTextVue from '@/loading/demos/pure-text.vue';
+import serviceVue from '@/loading/demos/service.vue';
 import sizeVue from '@/loading/demos/size.vue';
 import speedVue from '@/loading/demos/speed.vue';
 import vertVue from '@/loading/demos/vert.vue';
 
 const mapper = {
+  attachVue,
   baseVue,
   delayVue,
+  fullscreenVue,
   horzVue,
   mobileVue,
   pureTextVue,
+  serviceVue,
   sizeVue,
   speedVue,
   vertVue,
diff --git a/src/plugins.ts b/src/plugins.ts
index bd48fe5df..74812ee0e 100644
--- a/src/plugins.ts
+++ b/src/plugins.ts
@@ -8,4 +8,4 @@ export { LoadingPlugin } from './loading';
 export { default as Dialog } from './dialog';
 export { default as ActionSheet } from './action-sheet';
 export { default as Message } from './message';
-export { default as Toast } from './toast';
+export { default as Toast } from './toast/plugin';
diff --git a/src/rate/__test__/__snapshots__/demo.test.jsx.snap b/src/rate/__test__/__snapshots__/demo.test.jsx.snap
index 27edb5d57..a0c6bf56f 100644
--- a/src/rate/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/rate/__test__/__snapshots__/demo.test.jsx.snap
@@ -3294,6 +3294,357 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
 </div>
 `;
 
+exports[`Rate > Rate placementVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    class="rate-demo-cell rate-demo-cell--space"
+    data-v-ac8c61a0=""
+  >
+    <div
+      class="rate-demo-cell__label"
+      data-v-ac8c61a0=""
+    >
+      顶部显示
+    </div>
+    <div
+      class="t-rate"
+      data-v-ac8c61a0=""
+    >
+      <div
+        class="t-rate__wrapper"
+      >
+        
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <!---->
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <!---->
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <!---->
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <!---->
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <!---->
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        
+      </div>
+      <!---->
+      <!---->
+    </div>
+  </div>
+  <div
+    class="rate-demo-cell rate-demo-cell--space"
+    data-v-ac8c61a0=""
+  >
+    <div
+      class="rate-demo-cell__label"
+      data-v-ac8c61a0=""
+    >
+      底部显示
+    </div>
+    <div
+      class="t-rate"
+      data-v-ac8c61a0=""
+    >
+      <div
+        class="t-rate__wrapper"
+      >
+        
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <!---->
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <!---->
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <!---->
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <!---->
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <!---->
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        
+      </div>
+      <!---->
+      <!---->
+    </div>
+  </div>
+  <div
+    class="rate-demo-cell rate-demo-cell--space"
+    data-v-ac8c61a0=""
+  >
+    <div
+      class="rate-demo-cell__label"
+      data-v-ac8c61a0=""
+    >
+      不显示
+    </div>
+    <div
+      class="t-rate"
+      data-v-ac8c61a0=""
+    >
+      <div
+        class="t-rate__wrapper"
+      >
+        
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <!---->
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <!---->
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <!---->
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <!---->
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <!---->
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        
+      </div>
+      <!---->
+      <!---->
+    </div>
+  </div>
+  
+</div>
+`;
+
 exports[`Rate > Rate showTextVue demo works fine 1`] = `
 <div
   data-v-app=""
diff --git a/src/rate/__test__/demo.test.jsx b/src/rate/__test__/demo.test.jsx
index 1b91945f2..204555101 100644
--- a/src/rate/__test__/demo.test.jsx
+++ b/src/rate/__test__/demo.test.jsx
@@ -9,6 +9,7 @@ import colorVue from '@/rate/demos/color.vue';
 import countVue from '@/rate/demos/count.vue';
 import customVue from '@/rate/demos/custom.vue';
 import mobileVue from '@/rate/demos/mobile.vue';
+import placementVue from '@/rate/demos/placement.vue';
 import showTextVue from '@/rate/demos/show-text.vue';
 import sizeVue from '@/rate/demos/size.vue';
 import specialVue from '@/rate/demos/special.vue';
@@ -20,6 +21,7 @@ const mapper = {
   countVue,
   customVue,
   mobileVue,
+  placementVue,
   showTextVue,
   sizeVue,
   specialVue,
diff --git a/src/shared/dom.ts b/src/shared/dom.ts
index 2402b9d96..0540fa8b3 100644
--- a/src/shared/dom.ts
+++ b/src/shared/dom.ts
@@ -5,11 +5,11 @@ import { isBrowser } from './util';
 
 const trim = (str: string): string => (str || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
 
-export function getAttach(node: AttachNode) {
-  if (!isBrowser) return;
-
-  const attachNode = isFunction(node) ? node() : node;
-
+export const getAttach = (node: any, triggerNode?: any): HTMLElement | Element => {
+  const attachNode = isFunction(node) ? node(triggerNode) : node;
+  if (!attachNode) {
+    return document.body;
+  }
   if (isString(attachNode)) {
     return document.querySelector(attachNode);
   }
@@ -17,7 +17,11 @@ export function getAttach(node: AttachNode) {
     return attachNode;
   }
   return document.body;
-}
+};
+
+export const getSSRAttach = () => {
+  if (process.env.NODE_ENV === 'test-snap') return 'body';
+};
 
 export function stopPropagation(event: Event) {
   event.stopPropagation();
diff --git a/src/swipe-cell/demos/double.vue b/src/swipe-cell/demos/double.vue
index 2e2d2a072..435349952 100644
--- a/src/swipe-cell/demos/double.vue
+++ b/src/swipe-cell/demos/double.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import Toast from '../../toast/index';
+import { Toast } from 'tdesign-mobile-vue';
 
 const handleClick = (value: string) => {
   Toast(value);
diff --git a/src/swipe-cell/demos/event.vue b/src/swipe-cell/demos/event.vue
index c93e489e7..f3dcf879a 100644
--- a/src/swipe-cell/demos/event.vue
+++ b/src/swipe-cell/demos/event.vue
@@ -19,8 +19,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import Toast from '../../toast/index';
-import SwipeCell from '..';
+import { Toast } from 'tdesign-mobile-vue';
 
 const opened = ref([false, true]);
 const cellRef = ref();
diff --git a/src/swipe-cell/demos/icon.vue b/src/swipe-cell/demos/icon.vue
index 9a2e1b94c..92f2c3784 100644
--- a/src/swipe-cell/demos/icon.vue
+++ b/src/swipe-cell/demos/icon.vue
@@ -19,7 +19,7 @@
 <script setup lang="ts">
 import { reactive, h } from 'vue';
 import { Edit1Icon, DeleteIcon } from 'tdesign-icons-vue-next';
-import Toast from '../../toast/index';
+import { Toast } from 'tdesign-mobile-vue';
 
 interface InitData {
   btns0: {}[];
diff --git a/src/swipe-cell/demos/left.vue b/src/swipe-cell/demos/left.vue
index e8cb02ec3..b35ed6708 100644
--- a/src/swipe-cell/demos/left.vue
+++ b/src/swipe-cell/demos/left.vue
@@ -29,8 +29,7 @@
 
 <script setup lang="ts">
 import { reactive } from 'vue';
-import { SwipeActionItem } from 'tdesign-mobile-vue';
-import Toast from '../../toast/index';
+import { SwipeActionItem, Toast } from 'tdesign-mobile-vue';
 
 interface InitData {
   btns: {}[];
diff --git a/src/swipe-cell/demos/right.vue b/src/swipe-cell/demos/right.vue
index 89e7ec8ad..eeff888e4 100644
--- a/src/swipe-cell/demos/right.vue
+++ b/src/swipe-cell/demos/right.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import Toast from '../../toast/index';
+import { Toast } from 'tdesign-mobile-vue';
 
 const handleClick = () => {
   Toast('click');
diff --git a/src/swiper/__test__/__snapshots__/demo.test.jsx.snap b/src/swiper/__test__/__snapshots__/demo.test.jsx.snap
index 87bd6b247..d87a8207a 100644
--- a/src/swiper/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/swiper/__test__/__snapshots__/demo.test.jsx.snap
@@ -258,6 +258,113 @@ exports[`Swiper > Swiper controlVue demo works fine 1`] = `
 </div>
 `;
 
+exports[`Swiper > Swiper currentVue demo works fine 1`] = `
+<div
+  style="padding: 0px 16px;"
+>
+  <div
+    class="t-swiper t-swiper--default"
+  >
+    <div
+      class="t-swiper__container"
+      style="flex-direction: row; transition: none; height: auto;"
+    >
+      
+      
+      <div
+        class="t-swiper-item"
+        style="height: 192px;"
+      >
+        
+        <img
+          class="img"
+          src="https://tdesign.gtimg.com/mobile/demos/swiper1.png"
+        />
+        
+      </div>
+      <div
+        class="t-swiper-item"
+        style="height: 192px;"
+      >
+        
+        <img
+          class="img"
+          src="https://tdesign.gtimg.com/mobile/demos/swiper2.png"
+        />
+        
+      </div>
+      <div
+        class="t-swiper-item"
+        style="height: 192px;"
+      >
+        
+        <img
+          class="img"
+          src="https://tdesign.gtimg.com/mobile/demos/swiper1.png"
+        />
+        
+      </div>
+      <div
+        class="t-swiper-item"
+        style="height: 192px;"
+      >
+        
+        <img
+          class="img"
+          src="https://tdesign.gtimg.com/mobile/demos/swiper2.png"
+        />
+        
+      </div>
+      <div
+        class="t-swiper-item"
+        style="height: 192px;"
+      >
+        
+        <img
+          class="img"
+          src="https://tdesign.gtimg.com/mobile/demos/swiper1.png"
+        />
+        
+      </div>
+      
+      
+    </div>
+    
+    <!---->
+    <span
+      class="t-swiper-nav--horizontal t-swiper-nav__dots t-swiper-nav--bottom"
+    >
+      
+      
+      
+      
+      <!---->
+    </span>
+    
+  </div>
+  <div
+    class="tdesign-demo-block-row"
+  >
+    <button
+      aria-disabled="false"
+      class="t-button t-button--size-small t-button--base t-button--primary t-button--rectangle"
+      role="button"
+      type="button"
+    >
+      <!---->
+      <span
+        class="t-button__content"
+      >
+        
+         跳转到第 2 项 
+        
+      </span>
+      <!---->
+    </button>
+  </div>
+</div>
+`;
+
 exports[`Swiper > Swiper customVue demo works fine 1`] = `
 <div
   style="padding: 0px 16px;"
diff --git a/src/swiper/__test__/demo.test.jsx b/src/swiper/__test__/demo.test.jsx
index 38b0a1f35..23e8c7077 100644
--- a/src/swiper/__test__/demo.test.jsx
+++ b/src/swiper/__test__/demo.test.jsx
@@ -6,6 +6,7 @@ import { mount } from '@vue/test-utils';
 import baseVue from '@/swiper/demos/base.vue';
 import cardVue from '@/swiper/demos/card.vue';
 import controlVue from '@/swiper/demos/control.vue';
+import currentVue from '@/swiper/demos/current.vue';
 import customVue from '@/swiper/demos/custom.vue';
 import fractionVue from '@/swiper/demos/fraction.vue';
 import mobileVue from '@/swiper/demos/mobile.vue';
@@ -16,6 +17,7 @@ const mapper = {
   baseVue,
   cardVue,
   controlVue,
+  currentVue,
   customVue,
   fractionVue,
   mobileVue,
diff --git a/src/toast/__test__/__snapshots__/demo.test.jsx.snap b/src/toast/__test__/__snapshots__/demo.test.jsx.snap
index 2d68f8bcd..64883313f 100644
--- a/src/toast/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/toast/__test__/__snapshots__/demo.test.jsx.snap
@@ -3,6 +3,7 @@
 exports[`Toast > Toast baseVue demo works fine 1`] = `
 <div
   class="toast-demo"
+  id="toast-demo"
 >
   <button
     aria-disabled="false"
@@ -186,6 +187,7 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
       
       <div
         class="toast-demo"
+        id="toast-demo"
       >
         <button
           aria-disabled="false"
diff --git a/src/toast/__test__/index.test.jsx b/src/toast/__test__/index.test.jsx
index 7446acc51..0926f75cd 100644
--- a/src/toast/__test__/index.test.jsx
+++ b/src/toast/__test__/index.test.jsx
@@ -1,12 +1,13 @@
 import { describe, it, expect, vi } from 'vitest';
+import { LoadingIcon } from 'tdesign-icons-vue-next';
+import { mount } from '@vue/test-utils';
 import Toast from '../toast';
 import Overlay from '../../overlay';
-import { mount } from '@vue/test-utils';
-import { LoadingIcon } from 'tdesign-icons-vue-next';
 
 import config from '../../config';
+
 const { prefix } = config;
-const bodyLockClass = `${prefix}-toast-overflow-hidden`;
+const bodyLockClass = `${prefix}-toast--lock`;
 
 describe('Toast', () => {
   describe('props', () => {
diff --git a/src/toast/demos/base.vue b/src/toast/demos/base.vue
index 7bceba72d..4d2be2578 100644
--- a/src/toast/demos/base.vue
+++ b/src/toast/demos/base.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="toast-demo">
+  <div id="toast-demo" class="toast-demo">
     <t-button block size="large" theme="primary" variant="outline" @click="showText()">纯文本</t-button>
     <t-button block size="large" theme="primary" variant="outline" @click="showMultiText()">多行文字</t-button>
     <t-button block size="large" theme="primary" variant="outline" @click="showHorizontalText()">带横向图标</t-button>
@@ -19,6 +19,10 @@ const showMultiText = () => {
 };
 const showHorizontalText = () => {
   Toast({
+    attach: '#toast-demo',
+    className: 'toast-root--test',
+    style: { backgroundColor: 'pink' },
+    duration: 10000,
     theme: 'success',
     direction: 'row',
     message: '轻提示文字内容',
diff --git a/src/toast/index.ts b/src/toast/index.ts
index db9a8340a..e35a20bf3 100644
--- a/src/toast/index.ts
+++ b/src/toast/index.ts
@@ -1,113 +1,15 @@
-import { createApp, App, DefineComponent } from 'vue';
-import vueToast from './toast';
-import { TdToastProps } from './type';
-import { WithInstallType, isBrowser } from '../shared';
+// import { withInstall, WithInstallType } from '../shared';
+import _Toast from './toast';
 
 import './style';
 
+import { TdToastProps } from './type';
+
 export * from './type';
 export type ToastProps = TdToastProps;
 
-let instance: any = null;
-let app: App<Element>;
-
-/** 展示提示 */
-function Toast(props: string | Partial<TdToastProps>): DefineComponent<TdToastProps> {
-  if (!isBrowser) return;
-  const root = document.createElement('div');
-  document.body.appendChild(root);
-
-  const propsObject = {
-    duration: 2000,
-    ...parseOptions(props),
-  };
-
-  if (instance) {
-    instance.clear();
-  }
-
-  instance = vueToast;
-
-  instance.clear = () => {
-    clearTimeout(instance.timer);
-    app.unmount();
-    root.remove();
-    if (propsObject.onClose) {
-      propsObject.onClose();
-    }
-    instance = null;
-  };
-
-  if (propsObject.duration && propsObject.duration > 0) {
-    instance.timer = setTimeout(() => {
-      instance.clear();
-      if (propsObject.onDestroy) {
-        propsObject.onDestroy();
-      }
-    }, propsObject.duration);
-  }
-
-  app = createApp(instance, { ...propsObject });
-  app.mount(root);
-
-  return instance;
-}
-
-Toast.clear = () => {
-  if (instance) {
-    instance.clear();
-  }
-};
-
-(['loading', 'success', 'error'] as TdToastProps['theme'][]).forEach((type): void => {
-  if (!type) {
-    return;
-  }
-  Toast[type] = (options: TdToastProps | string) => {
-    let props = { message: '', theme: type } as unknown as TdToastProps;
-
-    if (typeof options === 'string') {
-      props.message = options;
-    } else {
-      props = { ...props, ...options };
-    }
-
-    return Toast(props);
-  };
-});
-
-function parseOptions(message?: Partial<TdToastProps> | string) {
-  if (typeof message === 'string') {
-    return { message };
-  }
-  return message;
-}
-
-Toast.install = (app: App) => {
-  // 添加插件入口
-  // eslint-disable-next-line no-param-reassign
-  app.config.globalProperties.$toast = Toast as any;
-};
-
-type ToastApi = {
-  /** 展示提示 */
-  (options?: Partial<TdToastProps> | string): void;
-  /** 展示加载提示 */
-  loading: (options?: Partial<TdToastProps> | string) => void;
-  /** 展示成功提示 */
-  success: (options?: Partial<TdToastProps> | string) => void;
-  /** 展示失败提示 */
-  error: (options?: Partial<TdToastProps> | string) => void;
-  /** 关闭提示 */
-  clear: () => void;
-};
-
-export const ToastPlugin: WithInstallType<typeof vueToast> & ToastApi = Toast as any;
-export default ToastPlugin;
+export { default as ToastPlugin } from './plugin';
 
-declare module '@vue/runtime-core' {
-  // Bind to `this` keyword
-  export interface ComponentCustomProperties {
-    $toast: ToastApi;
-  }
-}
+// Toast 与 Plugin函数名称冲突，暂不导出
+// export const Toast: WithInstallType<typeof _Toast> = withInstall(_Toast);
+// export default Toast;
diff --git a/src/toast/plugin.ts b/src/toast/plugin.ts
new file mode 100644
index 000000000..fcdf68b23
--- /dev/null
+++ b/src/toast/plugin.ts
@@ -0,0 +1,118 @@
+import { createApp, App, DefineComponent } from 'vue';
+import isObject from 'lodash/isObject';
+import vueToast from './toast';
+import { ToastOptions } from './type';
+import { WithInstallType, isBrowser } from '../shared';
+import { getAttach } from '../shared/dom';
+
+export type ToastProps = ToastOptions;
+
+let instance: any = null;
+let app: App<Element>;
+
+/** 展示提示 */
+function Toast(props: string | Partial<ToastOptions>): DefineComponent<ToastOptions> {
+  if (!isBrowser) return;
+  const root = document.createElement('div');
+
+  const container = getAttach(isObject(props) ? props.attach : 'body');
+  if (container) {
+    container.appendChild(root);
+  } else {
+    console.error('attach is not exist');
+  }
+
+  const propsObject = {
+    duration: 2000,
+    ...parseOptions(props),
+  };
+
+  if (instance) {
+    instance.clear();
+  }
+
+  instance = vueToast;
+
+  instance.clear = () => {
+    clearTimeout(instance.timer);
+    app.unmount();
+    root.remove();
+    if (propsObject.onClose) {
+      propsObject.onClose();
+    }
+    instance = null;
+  };
+
+  if (propsObject.duration && propsObject.duration > 0) {
+    instance.timer = setTimeout(() => {
+      instance.clear();
+      if (propsObject.onDestroy) {
+        propsObject.onDestroy();
+      }
+    }, propsObject.duration);
+  }
+
+  app = createApp(instance, { ...propsObject });
+  app.mount(root);
+
+  return instance;
+}
+
+Toast.clear = () => {
+  if (instance) {
+    instance.clear();
+  }
+};
+
+(['loading', 'success', 'error'] as ToastOptions['theme'][]).forEach((type): void => {
+  if (!type) {
+    return;
+  }
+  Toast[type] = (options: ToastOptions | string) => {
+    let props = { message: '', theme: type } as unknown as ToastOptions;
+
+    if (typeof options === 'string') {
+      props.message = options;
+    } else {
+      props = { ...props, ...options };
+    }
+
+    return Toast(props);
+  };
+});
+
+function parseOptions(message?: Partial<ToastOptions> | string) {
+  if (typeof message === 'string') {
+    return { message };
+  }
+  return message;
+}
+
+Toast.install = (app: App) => {
+  // 添加插件入口
+  // eslint-disable-next-line no-param-reassign
+  app.config.globalProperties.$toast = Toast as any;
+};
+
+type ToastApi = {
+  /** 展示提示 */
+  (options?: Partial<ToastOptions> | string): void;
+  /** 展示加载提示 */
+  loading: (options?: Partial<ToastOptions> | string) => void;
+  /** 展示成功提示 */
+  success: (options?: Partial<ToastOptions> | string) => void;
+  /** 展示失败提示 */
+  error: (options?: Partial<ToastOptions> | string) => void;
+  /** 关闭提示 */
+  clear: () => void;
+};
+
+export const ToastPlugin: WithInstallType<typeof vueToast> & ToastApi = Toast as any;
+export default ToastPlugin;
+
+declare module '@vue/runtime-core' {
+  // Bind to `this` keyword
+  export interface ComponentCustomProperties {
+    $toast: ToastApi;
+  }
+}
diff --git a/src/toast/props.ts b/src/toast/props.ts
index e1579dffb..2128808f4 100644
--- a/src/toast/props.ts
+++ b/src/toast/props.ts
@@ -8,11 +8,6 @@ import { TdToastProps } from './type';
 import { PropType } from 'vue';
 
 export default {
-  /** 类名 */
-  className: {
-    type: String,
-    default: '',
-  },
   /** 图标排列方式 */
   direction: {
     type: String as PropType<TdToastProps['direction']>,
diff --git a/src/toast/toast.en-US.md b/src/toast/toast.en-US.md
index 196d85c71..e085e3e87 100644
--- a/src/toast/toast.en-US.md
+++ b/src/toast/toast.en-US.md
@@ -6,7 +6,6 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | \- | N
 direction | String | row | options: row/column | N
 duration | Number | 2000 | \- | N
 icon | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
@@ -26,6 +25,15 @@ name | params | description
 close | \- | \-
 destroy | \- | \-
 
+### ToastOptions
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+className | String | - | \- | N
+style | String / Object | - | Typescript：`string \| Styles`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+`ToastProps` | \- | - | extends `ToastProps` | N
+
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
diff --git a/src/toast/toast.md b/src/toast/toast.md
index d05ff3949..e6f4e9a66 100644
--- a/src/toast/toast.md
+++ b/src/toast/toast.md
@@ -6,7 +6,6 @@
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
 direction | String | row | 图标排列方式。可选项：row/column | N
 duration | Number | 2000 | 弹窗显示毫秒数 | N
 icon | String / Slot / Function | - | 自定义图标。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
@@ -26,6 +25,15 @@ onDestroy | Function |  | TS 类型：`() => void`<br/>轻提示销毁的时候
 close | \- | 轻提示隐藏的时候触发
 destroy | \- | 轻提示销毁的时候触发
 
+### ToastOptions
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+attach | String / Function | 'body' | 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+className | String | - | 弹框类名，示例：'t-class-toast-first t-class-toast-second' | N
+style | String / Object | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型：`string \| Styles`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+`ToastProps` | \- | - | 继承 `ToastProps` 中的全部属性 | N
+
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/toast/toast.tsx b/src/toast/toast.tsx
index 1c4dd4fad..cddbca245 100644
--- a/src/toast/toast.tsx
+++ b/src/toast/toast.tsx
@@ -1,13 +1,13 @@
 import { LoadingIcon, CheckCircleIcon, CloseCircleIcon } from 'tdesign-icons-vue-next';
-import { computed, defineComponent, h, onUnmounted } from 'vue';
+import { computed, defineComponent, h, ref } from 'vue';
 import { useContent, useTNodeJSX } from '../hooks/tnode';
 import TOverlay from '../overlay';
 import ToastProps from './props';
 import config from '../config';
+import { useLockScroll } from '../hooks/useLockScroll';
 
 const { prefix } = config;
 const name = `${prefix}-toast`;
-const bodyLockClass = `${name}-overflow-hidden`;
 
 export default defineComponent({
   name,
@@ -23,12 +23,13 @@ export default defineComponent({
 
     const renderContent = useContent();
 
+    const toastRef = ref<HTMLElement>();
+
     const customOverlayProps = computed(() => {
       const toastOverlayProps = {
         preventScrollThrough: props.preventScrollThrough,
         visible: props.showOverlay,
       };
-      props.preventScrollThrough ? lock() : unlock();
       return {
         ...props.overlayProps,
         ...toastOverlayProps,
@@ -49,9 +50,12 @@ export default defineComponent({
     const topOptions = {
       top: '25%',
       bottom: '75%',
+      middle: '50%',
     };
 
-    const computedStyle = computed(() => ({ top: topOptions[props.placement] ?? '45%' }));
+    const computedStyle = computed(() => ({
+      top: topOptions[props.placement],
+    }));
 
     const iconClasses = computed(() => [
       {
@@ -90,21 +94,11 @@ export default defineComponent({
       return '';
     });
 
-    const lock = () => {
-      document.body.classList.add(bodyLockClass);
-    };
-
-    const unlock = () => {
-      document.body.classList.remove(bodyLockClass);
-    };
-
-    onUnmounted(() => {
-      unlock();
-    });
+    useLockScroll(toastRef, () => props.preventScrollThrough, name);
 
     return () => {
       return (
-        <div class={props.className}>
+        <div>
           <TOverlay {...customOverlayProps.value} />
 
           <div class={classes.value} style={computedStyle.value}>
diff --git a/src/toast/type.ts b/src/toast/type.ts
index 66a49e211..76e4e26f2 100644
--- a/src/toast/type.ts
+++ b/src/toast/type.ts
@@ -5,14 +5,9 @@
  * */
 
 import { OverlayProps } from '../overlay';
-import { TNode } from '../common';
+import { TNode, Styles, AttachNode } from '../common';
 
 export interface TdToastProps {
-  /**
-   * 类名
-   * @default ''
-   */
-  className?: string;
   /**
    * 图标排列方式
    * @default row
@@ -64,3 +59,20 @@ export interface TdToastProps {
    */
   onDestroy?: () => void;
 }
+
+export interface ToastOptions extends TdToastProps {
+  /**
+   * 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+   * @default 'body'
+   */
+  attach?: AttachNode;
+  /**
+   * 弹框类名，示例：'t-class-toast-first t-class-toast-second'
+   * @default ''
+   */
+  className?: string;
+  /**
+   * 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)
+   */
+  style?: string | Styles;
+}
diff --git a/src/tree-select/__test__/__snapshots__/demo.test.jsx.snap b/src/tree-select/__test__/__snapshots__/demo.test.jsx.snap
new file mode 100644
index 000000000..3a0514955
--- /dev/null
+++ b/src/tree-select/__test__/__snapshots__/demo.test.jsx.snap
@@ -0,0 +1,3131 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TreeSelect > TreeSelect baseVue demo works fine 1`] = `
+<div
+  class="t-tree-select"
+  style="height: 336px;"
+>
+  
+  <div
+    class="t-tree-select__column t-tree-select__column--left"
+  >
+    <div
+      class="t-side-bar t-tree-select-colum"
+    >
+      
+      
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项一
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item t-side-bar-item--active"
+      >
+        <div>
+          <div
+            class="t-side-bar-item__line"
+          />
+          <div
+            class="t-side-bar-item__prefix"
+          />
+          <div
+            class="t-side-bar-item__suffix"
+          />
+        </div>
+        <!---->
+        <div>
+          选项二
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项三
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项四
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项五
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项六
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项七
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项八
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项九
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项十
+        </div>
+      </div>
+      
+      
+      <div
+        class="t-side-bar__padding"
+      />
+    </div>
+  </div>
+  <div
+    class="t-tree-select__column t-tree-select__column--right"
+  >
+    <div
+      class="t-radio-group t-tree-select__radio"
+      role="radiogroup"
+    >
+      <!---->
+      
+      
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="1-0"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right t-radio__icon--checked"
+        >
+          <svg
+            class="t-icon t-icon-check t-radio__icon-wrap"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+              fill="currentColor"
+            />
+          </svg>
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            选项一
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="1-1"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            选项二
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="1-2"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            选项三
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="1-3"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            选项四
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="1-4"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            选项五
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="1-5"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            选项六
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="1-6"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            选项七
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="1-7"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            选项八
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="1-8"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            选项九
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="1-9"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            选项十
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      
+      
+    </div>
+  </div>
+  
+</div>
+`;
+
+exports[`TreeSelect > TreeSelect mobileVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+>
+  <h1
+    class="title"
+  >
+    TreeSelect 树形选择器
+  </h1>
+  <p
+    class="summary"
+  >
+    用于多层级数据的逐级选择。
+  </p>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        01 组件类型
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
+      >
+        基础树形选择
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        class="t-tree-select"
+        style="height: 336px;"
+      >
+        
+        <div
+          class="t-tree-select__column t-tree-select__column--left"
+        >
+          <div
+            class="t-side-bar t-tree-select-colum"
+          >
+            
+            
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项一
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item t-side-bar-item--active"
+            >
+              <div>
+                <div
+                  class="t-side-bar-item__line"
+                />
+                <div
+                  class="t-side-bar-item__prefix"
+                />
+                <div
+                  class="t-side-bar-item__suffix"
+                />
+              </div>
+              <!---->
+              <div>
+                选项二
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项三
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项四
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项五
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项六
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项七
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项八
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项九
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项十
+              </div>
+            </div>
+            
+            
+            <div
+              class="t-side-bar__padding"
+            />
+          </div>
+        </div>
+        <div
+          class="t-tree-select__column t-tree-select__column--right"
+        >
+          <div
+            class="t-radio-group t-tree-select__radio"
+            role="radiogroup"
+          >
+            <!---->
+            
+            
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="1-0"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right t-radio__icon--checked"
+              >
+                <svg
+                  class="t-icon t-icon-check t-radio__icon-wrap"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                    fill="currentColor"
+                  />
+                </svg>
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  选项一
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="1-1"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  选项二
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="1-2"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  选项三
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="1-3"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  选项四
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="1-4"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  选项五
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="1-5"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  选项六
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="1-6"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  选项七
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="1-7"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  选项八
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="1-8"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  选项九
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="1-9"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  选项十
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            
+            
+          </div>
+        </div>
+        
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        多选树形选择
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        class="t-tree-select"
+        style="height: 336px;"
+      >
+        
+        <div
+          class="t-tree-select__column t-tree-select__column--left"
+        >
+          <div
+            class="t-side-bar t-tree-select-colum"
+          >
+            
+            
+            <div
+              class="t-side-bar-item t-side-bar-item--active"
+            >
+              <div>
+                <div
+                  class="t-side-bar-item__line"
+                />
+                <div
+                  class="t-side-bar-item__prefix"
+                />
+                <div
+                  class="t-side-bar-item__suffix"
+                />
+              </div>
+              <!---->
+              <div>
+                选项一
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项二
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项三
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项四
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项五
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项六
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项七
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项八
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项九
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                选项十
+              </div>
+            </div>
+            
+            
+            <div
+              class="t-side-bar__padding"
+            />
+          </div>
+        </div>
+        <div
+          class="t-tree-select__column t-tree-select__column--right"
+        >
+          <div
+            class="t-checkbox-group t-tree-select__checkbox"
+          >
+            
+            
+            <div
+              class="t-checkbox t-checkbox--right t-checkbox--checked t-checkbox--block t-tree-select__checkbox-item"
+            >
+              <div
+                class="t-checkbox__icon t-checkbox__icon--right t-checkbox__icon--checked"
+              >
+                <svg
+                  class="t-icon t-icon-check t-checkbox__icon-wrapper"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+              <div
+                class="t-checkbox__content"
+              >
+                <div
+                  class="t-checkbox__title t-checkbox__title--checked"
+                >
+                  
+                  选项一
+                  
+                </div>
+                <div
+                  class="t-checkbox__description"
+                >
+                  <!---->
+                </div>
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-checkbox t-checkbox--right t-checkbox--checked t-checkbox--block t-tree-select__checkbox-item"
+            >
+              <div
+                class="t-checkbox__icon t-checkbox__icon--right t-checkbox__icon--checked"
+              >
+                <svg
+                  class="t-icon t-icon-check t-checkbox__icon-wrapper"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+              <div
+                class="t-checkbox__content"
+              >
+                <div
+                  class="t-checkbox__title t-checkbox__title--checked"
+                >
+                  
+                  选项二
+                  
+                </div>
+                <div
+                  class="t-checkbox__description"
+                >
+                  <!---->
+                </div>
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-checkbox t-checkbox--right t-checkbox--block t-tree-select__checkbox-item"
+            >
+              <div
+                class="t-checkbox__icon t-checkbox__icon--right"
+              >
+                
+                <!---->
+                <div
+                  class="placeholder"
+                />
+                
+              </div>
+              <div
+                class="t-checkbox__content"
+              >
+                <div
+                  class="t-checkbox__title"
+                >
+                  
+                  选项三
+                  
+                </div>
+                <div
+                  class="t-checkbox__description"
+                >
+                  <!---->
+                </div>
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-checkbox t-checkbox--right t-checkbox--block t-tree-select__checkbox-item"
+            >
+              <div
+                class="t-checkbox__icon t-checkbox__icon--right"
+              >
+                
+                <!---->
+                <div
+                  class="placeholder"
+                />
+                
+              </div>
+              <div
+                class="t-checkbox__content"
+              >
+                <div
+                  class="t-checkbox__title"
+                >
+                  
+                  选项四
+                  
+                </div>
+                <div
+                  class="t-checkbox__description"
+                >
+                  <!---->
+                </div>
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-checkbox t-checkbox--right t-checkbox--block t-tree-select__checkbox-item"
+            >
+              <div
+                class="t-checkbox__icon t-checkbox__icon--right"
+              >
+                
+                <!---->
+                <div
+                  class="placeholder"
+                />
+                
+              </div>
+              <div
+                class="t-checkbox__content"
+              >
+                <div
+                  class="t-checkbox__title"
+                >
+                  
+                  选项五
+                  
+                </div>
+                <div
+                  class="t-checkbox__description"
+                >
+                  <!---->
+                </div>
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-checkbox t-checkbox--right t-checkbox--block t-tree-select__checkbox-item"
+            >
+              <div
+                class="t-checkbox__icon t-checkbox__icon--right"
+              >
+                
+                <!---->
+                <div
+                  class="placeholder"
+                />
+                
+              </div>
+              <div
+                class="t-checkbox__content"
+              >
+                <div
+                  class="t-checkbox__title"
+                >
+                  
+                  选项六
+                  
+                </div>
+                <div
+                  class="t-checkbox__description"
+                >
+                  <!---->
+                </div>
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-checkbox t-checkbox--right t-checkbox--block t-tree-select__checkbox-item"
+            >
+              <div
+                class="t-checkbox__icon t-checkbox__icon--right"
+              >
+                
+                <!---->
+                <div
+                  class="placeholder"
+                />
+                
+              </div>
+              <div
+                class="t-checkbox__content"
+              >
+                <div
+                  class="t-checkbox__title"
+                >
+                  
+                  选项七
+                  
+                </div>
+                <div
+                  class="t-checkbox__description"
+                >
+                  <!---->
+                </div>
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-checkbox t-checkbox--right t-checkbox--block t-tree-select__checkbox-item"
+            >
+              <div
+                class="t-checkbox__icon t-checkbox__icon--right"
+              >
+                
+                <!---->
+                <div
+                  class="placeholder"
+                />
+                
+              </div>
+              <div
+                class="t-checkbox__content"
+              >
+                <div
+                  class="t-checkbox__title"
+                >
+                  
+                  选项八
+                  
+                </div>
+                <div
+                  class="t-checkbox__description"
+                >
+                  <!---->
+                </div>
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-checkbox t-checkbox--right t-checkbox--block t-tree-select__checkbox-item"
+            >
+              <div
+                class="t-checkbox__icon t-checkbox__icon--right"
+              >
+                
+                <!---->
+                <div
+                  class="placeholder"
+                />
+                
+              </div>
+              <div
+                class="t-checkbox__content"
+              >
+                <div
+                  class="t-checkbox__title"
+                >
+                  
+                  选项九
+                  
+                </div>
+                <div
+                  class="t-checkbox__description"
+                >
+                  <!---->
+                </div>
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-checkbox t-checkbox--right t-checkbox--block t-tree-select__checkbox-item"
+            >
+              <div
+                class="t-checkbox__icon t-checkbox__icon--right"
+              >
+                
+                <!---->
+                <div
+                  class="placeholder"
+                />
+                
+              </div>
+              <div
+                class="t-checkbox__content"
+              >
+                <div
+                  class="t-checkbox__title"
+                >
+                  
+                  选项十
+                  
+                </div>
+                <div
+                  class="t-checkbox__description"
+                >
+                  <!---->
+                </div>
+              </div>
+              <!---->
+            </div>
+            
+            
+          </div>
+        </div>
+        
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        02 组件状态
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
+      >
+        三级树形选择
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        class="t-tree-select"
+        style="height: 336px;"
+      >
+        
+        <div
+          class="t-tree-select__column t-tree-select__column--left"
+        >
+          <div
+            class="t-side-bar t-tree-select-colum"
+          >
+            
+            
+            <div
+              class="t-side-bar-item t-side-bar-item--active"
+            >
+              <div>
+                <div
+                  class="t-side-bar-item__line"
+                />
+                <div
+                  class="t-side-bar-item__prefix"
+                />
+                <div
+                  class="t-side-bar-item__suffix"
+                />
+              </div>
+              <!---->
+              <div>
+                北京市
+              </div>
+            </div>
+            <div
+              class="t-side-bar-item"
+            >
+              <!---->
+              <!---->
+              <div>
+                广东省
+              </div>
+            </div>
+            
+            
+            <div
+              class="t-side-bar__padding"
+            />
+          </div>
+        </div>
+        <div
+          class="t-tree-select__column t-tree-select__column--middle"
+        >
+          
+          <div
+            class="t-tree-select__item t-tree-select__item--active t-tree-select__item--disabled"
+          >
+            北京市
+          </div>
+          
+        </div>
+        <div
+          class="t-tree-select__column t-tree-select__column--right"
+        >
+          <div
+            class="t-radio-group t-tree-select__radio"
+            role="radiogroup"
+          >
+            <!---->
+            
+            
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="110101"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right t-radio__icon--checked"
+              >
+                <svg
+                  class="t-icon t-icon-check t-radio__icon-wrap"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                    fill="currentColor"
+                  />
+                </svg>
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  东城区
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                disabled=""
+                name=""
+                type="radio"
+                value="110102"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right t-radio__icon--disabled"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title t-radio__title--disabled"
+                  style=""
+                >
+                  
+                  西城区
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="110105"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  朝阳区
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="110106"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  丰台区
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="110107"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  石景山区
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="110108"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  海淀区
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="110109"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  门头沟区
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="110111"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  房山区
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="110112"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  通州区
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="110113"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  顺义区
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="110114"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  昌平区
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="110115"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  大兴区
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="110116"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  怀柔区
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="110117"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  平谷区
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="110118"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  密云区
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+            >
+              <input
+                class="t-radio__original"
+                name=""
+                type="radio"
+                value="110119"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--right"
+              >
+                <div
+                  class="placeholder"
+                />
+                <!---->
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style=""
+                >
+                  
+                  延庆区
+                  
+                </span>
+                <!---->
+              </div>
+              <!---->
+            </div>
+            
+            
+          </div>
+        </div>
+        
+      </div>
+      
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TreeSelect > TreeSelect multipleVue demo works fine 1`] = `
+<div
+  class="t-tree-select"
+  style="height: 336px;"
+>
+  
+  <div
+    class="t-tree-select__column t-tree-select__column--left"
+  >
+    <div
+      class="t-side-bar t-tree-select-colum"
+    >
+      
+      
+      <div
+        class="t-side-bar-item t-side-bar-item--active"
+      >
+        <div>
+          <div
+            class="t-side-bar-item__line"
+          />
+          <div
+            class="t-side-bar-item__prefix"
+          />
+          <div
+            class="t-side-bar-item__suffix"
+          />
+        </div>
+        <!---->
+        <div>
+          选项一
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项二
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项三
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项四
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项五
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项六
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项七
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项八
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项九
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          选项十
+        </div>
+      </div>
+      
+      
+      <div
+        class="t-side-bar__padding"
+      />
+    </div>
+  </div>
+  <div
+    class="t-tree-select__column t-tree-select__column--right"
+  >
+    <div
+      class="t-checkbox-group t-tree-select__checkbox"
+    >
+      
+      
+      <div
+        class="t-checkbox t-checkbox--right t-checkbox--checked t-checkbox--block t-tree-select__checkbox-item"
+      >
+        <div
+          class="t-checkbox__icon t-checkbox__icon--right t-checkbox__icon--checked"
+        >
+          <svg
+            class="t-icon t-icon-check t-checkbox__icon-wrapper"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-checkbox__content"
+        >
+          <div
+            class="t-checkbox__title t-checkbox__title--checked"
+          >
+            
+            选项一
+            
+          </div>
+          <div
+            class="t-checkbox__description"
+          >
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-checkbox t-checkbox--right t-checkbox--checked t-checkbox--block t-tree-select__checkbox-item"
+      >
+        <div
+          class="t-checkbox__icon t-checkbox__icon--right t-checkbox__icon--checked"
+        >
+          <svg
+            class="t-icon t-icon-check t-checkbox__icon-wrapper"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-checkbox__content"
+        >
+          <div
+            class="t-checkbox__title t-checkbox__title--checked"
+          >
+            
+            选项二
+            
+          </div>
+          <div
+            class="t-checkbox__description"
+          >
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-checkbox t-checkbox--right t-checkbox--block t-tree-select__checkbox-item"
+      >
+        <div
+          class="t-checkbox__icon t-checkbox__icon--right"
+        >
+          
+          <!---->
+          <div
+            class="placeholder"
+          />
+          
+        </div>
+        <div
+          class="t-checkbox__content"
+        >
+          <div
+            class="t-checkbox__title"
+          >
+            
+            选项三
+            
+          </div>
+          <div
+            class="t-checkbox__description"
+          >
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-checkbox t-checkbox--right t-checkbox--block t-tree-select__checkbox-item"
+      >
+        <div
+          class="t-checkbox__icon t-checkbox__icon--right"
+        >
+          
+          <!---->
+          <div
+            class="placeholder"
+          />
+          
+        </div>
+        <div
+          class="t-checkbox__content"
+        >
+          <div
+            class="t-checkbox__title"
+          >
+            
+            选项四
+            
+          </div>
+          <div
+            class="t-checkbox__description"
+          >
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-checkbox t-checkbox--right t-checkbox--block t-tree-select__checkbox-item"
+      >
+        <div
+          class="t-checkbox__icon t-checkbox__icon--right"
+        >
+          
+          <!---->
+          <div
+            class="placeholder"
+          />
+          
+        </div>
+        <div
+          class="t-checkbox__content"
+        >
+          <div
+            class="t-checkbox__title"
+          >
+            
+            选项五
+            
+          </div>
+          <div
+            class="t-checkbox__description"
+          >
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-checkbox t-checkbox--right t-checkbox--block t-tree-select__checkbox-item"
+      >
+        <div
+          class="t-checkbox__icon t-checkbox__icon--right"
+        >
+          
+          <!---->
+          <div
+            class="placeholder"
+          />
+          
+        </div>
+        <div
+          class="t-checkbox__content"
+        >
+          <div
+            class="t-checkbox__title"
+          >
+            
+            选项六
+            
+          </div>
+          <div
+            class="t-checkbox__description"
+          >
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-checkbox t-checkbox--right t-checkbox--block t-tree-select__checkbox-item"
+      >
+        <div
+          class="t-checkbox__icon t-checkbox__icon--right"
+        >
+          
+          <!---->
+          <div
+            class="placeholder"
+          />
+          
+        </div>
+        <div
+          class="t-checkbox__content"
+        >
+          <div
+            class="t-checkbox__title"
+          >
+            
+            选项七
+            
+          </div>
+          <div
+            class="t-checkbox__description"
+          >
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-checkbox t-checkbox--right t-checkbox--block t-tree-select__checkbox-item"
+      >
+        <div
+          class="t-checkbox__icon t-checkbox__icon--right"
+        >
+          
+          <!---->
+          <div
+            class="placeholder"
+          />
+          
+        </div>
+        <div
+          class="t-checkbox__content"
+        >
+          <div
+            class="t-checkbox__title"
+          >
+            
+            选项八
+            
+          </div>
+          <div
+            class="t-checkbox__description"
+          >
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-checkbox t-checkbox--right t-checkbox--block t-tree-select__checkbox-item"
+      >
+        <div
+          class="t-checkbox__icon t-checkbox__icon--right"
+        >
+          
+          <!---->
+          <div
+            class="placeholder"
+          />
+          
+        </div>
+        <div
+          class="t-checkbox__content"
+        >
+          <div
+            class="t-checkbox__title"
+          >
+            
+            选项九
+            
+          </div>
+          <div
+            class="t-checkbox__description"
+          >
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-checkbox t-checkbox--right t-checkbox--block t-tree-select__checkbox-item"
+      >
+        <div
+          class="t-checkbox__icon t-checkbox__icon--right"
+        >
+          
+          <!---->
+          <div
+            class="placeholder"
+          />
+          
+        </div>
+        <div
+          class="t-checkbox__content"
+        >
+          <div
+            class="t-checkbox__title"
+          >
+            
+            选项十
+            
+          </div>
+          <div
+            class="t-checkbox__description"
+          >
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+      
+      
+    </div>
+  </div>
+  
+</div>
+`;
+
+exports[`TreeSelect > TreeSelect normalVue demo works fine 1`] = `
+<div
+  class="t-tree-select"
+  style="height: 336px;"
+>
+  
+  <div
+    class="t-tree-select__column t-tree-select__column--left"
+  >
+    <div
+      class="t-side-bar t-tree-select-colum"
+    >
+      
+      
+      <div
+        class="t-side-bar-item t-side-bar-item--active"
+      >
+        <div>
+          <div
+            class="t-side-bar-item__line"
+          />
+          <div
+            class="t-side-bar-item__prefix"
+          />
+          <div
+            class="t-side-bar-item__suffix"
+          />
+        </div>
+        <!---->
+        <div>
+          北京市
+        </div>
+      </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <!---->
+        <!---->
+        <div>
+          广东省
+        </div>
+      </div>
+      
+      
+      <div
+        class="t-side-bar__padding"
+      />
+    </div>
+  </div>
+  <div
+    class="t-tree-select__column t-tree-select__column--middle"
+  >
+    
+    <div
+      class="t-tree-select__item t-tree-select__item--active t-tree-select__item--disabled"
+    >
+      北京市
+    </div>
+    
+  </div>
+  <div
+    class="t-tree-select__column t-tree-select__column--right"
+  >
+    <div
+      class="t-radio-group t-tree-select__radio"
+      role="radiogroup"
+    >
+      <!---->
+      
+      
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="110101"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right t-radio__icon--checked"
+        >
+          <svg
+            class="t-icon t-icon-check t-radio__icon-wrap"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+              fill="currentColor"
+            />
+          </svg>
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            东城区
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          disabled=""
+          name=""
+          type="radio"
+          value="110102"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right t-radio__icon--disabled"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title t-radio__title--disabled"
+            style=""
+          >
+            
+            西城区
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="110105"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            朝阳区
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="110106"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            丰台区
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="110107"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            石景山区
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="110108"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            海淀区
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="110109"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            门头沟区
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="110111"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            房山区
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="110112"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            通州区
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="110113"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            顺义区
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="110114"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            昌平区
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="110115"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            大兴区
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="110116"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            怀柔区
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="110117"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            平谷区
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="110118"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            密云区
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-radio t-radio--right t-radio--block t-tree-select__radio-item"
+      >
+        <input
+          class="t-radio__original"
+          name=""
+          type="radio"
+          value="110119"
+        />
+        <div
+          class="t-radio__icon t-radio__icon--right"
+        >
+          <div
+            class="placeholder"
+          />
+          <!---->
+        </div>
+        <div
+          class="t-radio__content"
+        >
+          <span
+            class="t-radio__title"
+            style=""
+          >
+            
+            延庆区
+            
+          </span>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      
+      
+    </div>
+  </div>
+  
+</div>
+`;
diff --git a/src/tree-select/__test__/demo.test.jsx b/src/tree-select/__test__/demo.test.jsx
new file mode 100644
index 000000000..2fcd37c57
--- /dev/null
+++ b/src/tree-select/__test__/demo.test.jsx
@@ -0,0 +1,25 @@
+/**
+ * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
+ */
+
+import { mount } from '@vue/test-utils';
+import baseVue from '@/tree-select/demos/base.vue';
+import mobileVue from '@/tree-select/demos/mobile.vue';
+import multipleVue from '@/tree-select/demos/multiple.vue';
+import normalVue from '@/tree-select/demos/normal.vue';
+
+const mapper = {
+  baseVue,
+  mobileVue,
+  multipleVue,
+  normalVue,
+};
+
+describe('TreeSelect', () => {
+  Object.keys(mapper).forEach((demoName) => {
+    it(`TreeSelect ${demoName} demo works fine`, () => {
+      const wrapper = mount(mapper[demoName]);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+});