From ef5a083194fb676b6422faef9f3591f961f54873 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Mon, 14 Oct 2024 20:39:51 +0800
Subject: [PATCH] fix(Cacader): fixed multiple issues

---
 .../__test__/__snapshots__/demo.test.jsx.snap | 712 ++++++++----------
 .../__snapshots__/index.test.jsx.snap         |  57 +-
 src/cascader/__test__/index.test.jsx          |  21 +-
 src/cascader/cascader.en-US.md                |  18 +-
 src/cascader/cascader.md                      |  39 +-
 src/cascader/cascader.tsx                     | 352 +++++++++
 src/cascader/cascader.vue                     | 359 ---------
 src/cascader/index.ts                         |   2 +-
 src/cascader/props.ts                         |  16 +-
 src/cascader/type.ts                          |  20 +-
 .../__test__/__snapshots__/demo.test.jsx.snap | 171 ++---
 11 files changed, 821 insertions(+), 946 deletions(-)
 create mode 100644 src/cascader/cascader.tsx
 delete mode 100644 src/cascader/cascader.vue

diff --git a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
index 93e585d75..f73b8579c 100644
--- a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
@@ -56,14 +56,13 @@ exports[`Cascader > Cascader baseVue demo works fine 1`] = `
     to="[object HTMLBodyElement]"
   >
     <div
-      class="t-overlay"
-      style="z-index: 1000; transition-duration: 300ms; display: none;"
+      class="t-overlay t-overlay--active"
+      style="z-index: 1000; transition-duration: 300ms;"
     >
       <!---->
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
     >
       <!--v-if-->
       
@@ -73,9 +72,7 @@ exports[`Cascader > Cascader baseVue demo works fine 1`] = `
         <div
           class="t-cascader__title"
         >
-          
           选择地址
-          
         </div>
         <div
           class="t-cascader__close-btn"
@@ -97,42 +94,37 @@ exports[`Cascader > Cascader baseVue demo works fine 1`] = `
         <div
           class="t-cascader__content"
         >
-          <div>
+          <div
+            class="t-cascader__steps"
+          >
+            
             <div
-              class="t-cascader__steps"
+              class="t-cascader__step"
             >
-              
               <div
-                class="t-cascader__step"
+                class="t-cascader__step-dot t-cascader__step-dot--last"
+              />
+              <div
+                class="t-cascader__step-label t-cascader__step-label--active"
               >
-                <div
-                  class="t-cascader__step-dot t-cascader__step-dot--last"
-                />
-                <div
-                  class="t-cascader__step-label t-cascader__step-label--active"
-                >
-                  
-                  选择选项
-                  
-                </div>
-                <svg
-                  class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                >
-                  <path
-                    d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                    fill="currentColor"
-                  />
-                </svg>
+                选择选项
               </div>
-              
+              <svg
+                class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                  fill="currentColor"
+                />
+              </svg>
             </div>
-            <!--v-if-->
+            
           </div>
-          <!--v-if-->
+          <!---->
           <div
             class="t-cascader__options-container"
             style="width: 200vw; transform: translateX(-000vw);"
@@ -142,7 +134,7 @@ exports[`Cascader > Cascader baseVue demo works fine 1`] = `
               class="t-cascader__options"
             >
               <div
-                class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
               >
                 <div
                   class="t-radio-group"
@@ -300,9 +292,7 @@ exports[`Cascader > Cascader checkStrictlyVue demo works fine 1`] = `
         <div
           class="t-cascader__title"
         >
-          
           选择地址
-          
         </div>
         <div
           class="t-cascader__close-btn"
@@ -319,42 +309,37 @@ exports[`Cascader > Cascader checkStrictlyVue demo works fine 1`] = `
         <div
           class="t-cascader__content"
         >
-          <div>
+          <div
+            class="t-cascader__steps"
+          >
+            
             <div
-              class="t-cascader__steps"
+              class="t-cascader__step"
             >
-              
               <div
-                class="t-cascader__step"
+                class="t-cascader__step-dot t-cascader__step-dot--last"
+              />
+              <div
+                class="t-cascader__step-label t-cascader__step-label--active"
               >
-                <div
-                  class="t-cascader__step-dot t-cascader__step-dot--last"
-                />
-                <div
-                  class="t-cascader__step-label t-cascader__step-label--active"
-                >
-                  
-                  选择选项
-                  
-                </div>
-                <svg
-                  class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                >
-                  <path
-                    d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                    fill="currentColor"
-                  />
-                </svg>
+                选择选项
               </div>
-              
+              <svg
+                class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                  fill="currentColor"
+                />
+              </svg>
             </div>
-            <!--v-if-->
+            
           </div>
-          <!--v-if-->
+          <!---->
           <div
             class="t-cascader__options-container"
             style="width: 200vw; transform: translateX(-000vw);"
@@ -364,7 +349,7 @@ exports[`Cascader > Cascader checkStrictlyVue demo works fine 1`] = `
               class="t-cascader__options"
             >
               <div
-                class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
               >
                 <div
                   class="t-radio-group"
@@ -520,9 +505,7 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
         <div
           class="t-cascader__title"
         >
-          
           选择地址
-          
         </div>
         <div
           class="t-cascader__close-btn"
@@ -544,42 +527,37 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
         <div
           class="t-cascader__content"
         >
-          <div>
+          <div
+            class="t-cascader__steps"
+          >
+            
             <div
-              class="t-cascader__steps"
+              class="t-cascader__step"
             >
-              
               <div
-                class="t-cascader__step"
+                class="t-cascader__step-dot t-cascader__step-dot--last"
+              />
+              <div
+                class="t-cascader__step-label t-cascader__step-label--active"
               >
-                <div
-                  class="t-cascader__step-dot t-cascader__step-dot--last"
-                />
-                <div
-                  class="t-cascader__step-label t-cascader__step-label--active"
-                >
-                  
-                  选择选项
-                  
-                </div>
-                <svg
-                  class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                >
-                  <path
-                    d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                    fill="currentColor"
-                  />
-                </svg>
+                选择选项
               </div>
-              
+              <svg
+                class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                  fill="currentColor"
+                />
+              </svg>
             </div>
-            <!--v-if-->
+            
           </div>
-          <!--v-if-->
+          <!---->
           <div
             class="t-cascader__options-container"
             style="width: 200vw; transform: translateX(-000vw);"
@@ -589,7 +567,7 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
               class="t-cascader__options"
             >
               <div
-                class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
               >
                 <div
                   class="t-radio-group"
@@ -745,9 +723,7 @@ exports[`Cascader > Cascader lazyVue demo works fine 1`] = `
         <div
           class="t-cascader__title"
         >
-          
           选择地址
-          
         </div>
         <div
           class="t-cascader__close-btn"
@@ -769,42 +745,37 @@ exports[`Cascader > Cascader lazyVue demo works fine 1`] = `
         <div
           class="t-cascader__content"
         >
-          <div>
+          <div
+            class="t-cascader__steps"
+          >
+            
             <div
-              class="t-cascader__steps"
+              class="t-cascader__step"
             >
-              
               <div
-                class="t-cascader__step"
+                class="t-cascader__step-dot t-cascader__step-dot--last"
+              />
+              <div
+                class="t-cascader__step-label t-cascader__step-label--active"
               >
-                <div
-                  class="t-cascader__step-dot t-cascader__step-dot--last"
-                />
-                <div
-                  class="t-cascader__step-label t-cascader__step-label--active"
-                >
-                  
-                  选择选项
-                  
-                </div>
-                <svg
-                  class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                >
-                  <path
-                    d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                    fill="currentColor"
-                  />
-                </svg>
+                选择选项
               </div>
-              
+              <svg
+                class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                  fill="currentColor"
+                />
+              </svg>
             </div>
-            <!--v-if-->
+            
           </div>
-          <!--v-if-->
+          <!---->
           <div
             class="t-cascader__options-container"
             style="width: 200vw; transform: translateX(-000vw);"
@@ -814,7 +785,7 @@ exports[`Cascader > Cascader lazyVue demo works fine 1`] = `
               class="t-cascader__options"
             >
               <div
-                class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
               >
                 <div
                   class="t-radio-group"
@@ -954,14 +925,13 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         to="[object HTMLBodyElement]"
       >
         <div
-          class="t-overlay"
-          style="z-index: 1000; transition-duration: 300ms; display: none;"
+          class="t-overlay t-overlay--active"
+          style="z-index: 1000; transition-duration: 300ms;"
         >
           <!---->
         </div>
         <div
           class="t-popup t-popup--bottom"
-          style="display: none;"
         >
           <!--v-if-->
           
@@ -971,9 +941,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             <div
               class="t-cascader__title"
             >
-              
               选择地址
-              
             </div>
             <div
               class="t-cascader__close-btn"
@@ -995,42 +963,37 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             <div
               class="t-cascader__content"
             >
-              <div>
+              <div
+                class="t-cascader__steps"
+              >
+                
                 <div
-                  class="t-cascader__steps"
+                  class="t-cascader__step"
                 >
-                  
                   <div
-                    class="t-cascader__step"
+                    class="t-cascader__step-dot t-cascader__step-dot--last"
+                  />
+                  <div
+                    class="t-cascader__step-label t-cascader__step-label--active"
                   >
-                    <div
-                      class="t-cascader__step-dot t-cascader__step-dot--last"
-                    />
-                    <div
-                      class="t-cascader__step-label t-cascader__step-label--active"
-                    >
-                      
-                      选择选项
-                      
-                    </div>
-                    <svg
-                      class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                    >
-                      <path
-                        d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                        fill="currentColor"
-                      />
-                    </svg>
+                    选择选项
                   </div>
-                  
+                  <svg
+                    class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                      fill="currentColor"
+                    />
+                  </svg>
                 </div>
-                <!--v-if-->
+                
               </div>
-              <!--v-if-->
+              <!---->
               <div
                 class="t-cascader__options-container"
                 style="width: 200vw; transform: translateX(-000vw);"
@@ -1040,7 +1003,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
                   class="t-cascader__options"
                 >
                   <div
-                    class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                    class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
                   >
                     <div
                       class="t-radio-group"
@@ -1209,9 +1172,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             <div
               class="t-cascader__title"
             >
-              
               选择地址
-              
             </div>
             <div
               class="t-cascader__close-btn"
@@ -1233,11 +1194,8 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             <div
               class="t-cascader__content"
             >
-              <div>
-                <!--v-if-->
-                <!--v-if-->
-              </div>
-              <!--v-if-->
+              <!---->
+              <!---->
               <div
                 class="t-cascader__options-container"
                 style="width: 200vw; transform: translateX(-000vw);"
@@ -1247,7 +1205,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
                   class="t-cascader__options"
                 >
                   <div
-                    class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                    class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
                   >
                     <div
                       class="t-radio-group"
@@ -1420,9 +1378,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             <div
               class="t-cascader__title"
             >
-              
               选择地址
-              
             </div>
             <div
               class="t-cascader__close-btn"
@@ -1444,42 +1400,37 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             <div
               class="t-cascader__content"
             >
-              <div>
+              <div
+                class="t-cascader__steps"
+              >
+                
                 <div
-                  class="t-cascader__steps"
+                  class="t-cascader__step"
                 >
-                  
                   <div
-                    class="t-cascader__step"
+                    class="t-cascader__step-dot t-cascader__step-dot--last"
+                  />
+                  <div
+                    class="t-cascader__step-label t-cascader__step-label--active"
                   >
-                    <div
-                      class="t-cascader__step-dot t-cascader__step-dot--last"
-                    />
-                    <div
-                      class="t-cascader__step-label t-cascader__step-label--active"
-                    >
-                      
-                      选择选项
-                      
-                    </div>
-                    <svg
-                      class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                    >
-                      <path
-                        d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                        fill="currentColor"
-                      />
-                    </svg>
+                    选择选项
                   </div>
-                  
+                  <svg
+                    class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                      fill="currentColor"
+                    />
+                  </svg>
                 </div>
-                <!--v-if-->
+                
               </div>
-              <!--v-if-->
+              <!---->
               <div
                 class="t-cascader__options-container"
                 style="width: 200vw; transform: translateX(-000vw);"
@@ -1489,7 +1440,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
                   class="t-cascader__options"
                 >
                   <div
-                    class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                    class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
                   >
                     <div
                       class="t-radio-group"
@@ -1658,9 +1609,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             <div
               class="t-cascader__title"
             >
-              
               选择地址
-              
             </div>
             <div
               class="t-cascader__close-btn"
@@ -1682,42 +1631,37 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             <div
               class="t-cascader__content"
             >
-              <div>
+              <div
+                class="t-cascader__steps"
+              >
+                
                 <div
-                  class="t-cascader__steps"
+                  class="t-cascader__step"
                 >
-                  
                   <div
-                    class="t-cascader__step"
+                    class="t-cascader__step-dot t-cascader__step-dot--last"
+                  />
+                  <div
+                    class="t-cascader__step-label t-cascader__step-label--active"
                   >
-                    <div
-                      class="t-cascader__step-dot t-cascader__step-dot--last"
-                    />
-                    <div
-                      class="t-cascader__step-label t-cascader__step-label--active"
-                    >
-                      
-                      选择选项
-                      
-                    </div>
-                    <svg
-                      class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                    >
-                      <path
-                        d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                        fill="currentColor"
-                      />
-                    </svg>
+                    选择选项
                   </div>
-                  
+                  <svg
+                    class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                      fill="currentColor"
+                    />
+                  </svg>
                 </div>
-                <!--v-if-->
+                
               </div>
-              <!--v-if-->
+              <!---->
               <div
                 class="t-cascader__options-container"
                 style="width: 200vw; transform: translateX(-000vw);"
@@ -1727,7 +1671,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
                   class="t-cascader__options"
                 >
                   <div
-                    class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                    class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
                   >
                     <div
                       class="t-radio-group"
@@ -1896,9 +1840,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             <div
               class="t-cascader__title"
             >
-              
               选择地址
-              
             </div>
             <div
               class="t-cascader__close-btn"
@@ -1920,40 +1862,35 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             <div
               class="t-cascader__content"
             >
-              <div>
+              <div
+                class="t-cascader__steps"
+              >
+                
                 <div
-                  class="t-cascader__steps"
+                  class="t-cascader__step"
                 >
-                  
                   <div
-                    class="t-cascader__step"
+                    class="t-cascader__step-dot t-cascader__step-dot--last"
+                  />
+                  <div
+                    class="t-cascader__step-label t-cascader__step-label--active"
                   >
-                    <div
-                      class="t-cascader__step-dot t-cascader__step-dot--last"
-                    />
-                    <div
-                      class="t-cascader__step-label t-cascader__step-label--active"
-                    >
-                      
-                      选择选项
-                      
-                    </div>
-                    <svg
-                      class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                    >
-                      <path
-                        d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                        fill="currentColor"
-                      />
-                    </svg>
+                    选择选项
                   </div>
-                  
+                  <svg
+                    class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                      fill="currentColor"
+                    />
+                  </svg>
                 </div>
-                <!--v-if-->
+                
               </div>
               <div
                 class="t-cascader__options-title"
@@ -1969,7 +1906,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
                   class="t-cascader__options"
                 >
                   <div
-                    class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                    class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
                   >
                     <div
                       class="t-radio-group"
@@ -2138,9 +2075,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             <div
               class="t-cascader__title"
             >
-              
               选择地址
-              
             </div>
             <div
               class="t-cascader__close-btn"
@@ -2162,42 +2097,37 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             <div
               class="t-cascader__content"
             >
-              <div>
+              <div
+                class="t-cascader__steps"
+              >
+                
                 <div
-                  class="t-cascader__steps"
+                  class="t-cascader__step"
                 >
-                  
                   <div
-                    class="t-cascader__step"
+                    class="t-cascader__step-dot t-cascader__step-dot--last"
+                  />
+                  <div
+                    class="t-cascader__step-label t-cascader__step-label--active"
                   >
-                    <div
-                      class="t-cascader__step-dot t-cascader__step-dot--last"
-                    />
-                    <div
-                      class="t-cascader__step-label t-cascader__step-label--active"
-                    >
-                      
-                      选择选项
-                      
-                    </div>
-                    <svg
-                      class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                    >
-                      <path
-                        d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                        fill="currentColor"
-                      />
-                    </svg>
+                    选择选项
                   </div>
-                  
+                  <svg
+                    class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                      fill="currentColor"
+                    />
+                  </svg>
                 </div>
-                <!--v-if-->
+                
               </div>
-              <!--v-if-->
+              <!---->
               <div
                 class="t-cascader__options-container"
                 style="width: 200vw; transform: translateX(-000vw);"
@@ -2207,7 +2137,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
                   class="t-cascader__options"
                 >
                   <div
-                    class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                    class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
                   >
                     <div
                       class="t-radio-group"
@@ -2348,9 +2278,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             <div
               class="t-cascader__title"
             >
-              
               选择地址
-              
             </div>
             <div
               class="t-cascader__close-btn"
@@ -2367,42 +2295,37 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             <div
               class="t-cascader__content"
             >
-              <div>
+              <div
+                class="t-cascader__steps"
+              >
+                
                 <div
-                  class="t-cascader__steps"
+                  class="t-cascader__step"
                 >
-                  
                   <div
-                    class="t-cascader__step"
+                    class="t-cascader__step-dot t-cascader__step-dot--last"
+                  />
+                  <div
+                    class="t-cascader__step-label t-cascader__step-label--active"
                   >
-                    <div
-                      class="t-cascader__step-dot t-cascader__step-dot--last"
-                    />
-                    <div
-                      class="t-cascader__step-label t-cascader__step-label--active"
-                    >
-                      
-                      选择选项
-                      
-                    </div>
-                    <svg
-                      class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                    >
-                      <path
-                        d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                        fill="currentColor"
-                      />
-                    </svg>
+                    选择选项
                   </div>
-                  
+                  <svg
+                    class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                      fill="currentColor"
+                    />
+                  </svg>
                 </div>
-                <!--v-if-->
+                
               </div>
-              <!--v-if-->
+              <!---->
               <div
                 class="t-cascader__options-container"
                 style="width: 200vw; transform: translateX(-000vw);"
@@ -2412,7 +2335,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
                   class="t-cascader__options"
                 >
                   <div
-                    class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                    class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
                   >
                     <div
                       class="t-radio-group"
@@ -2571,9 +2494,7 @@ exports[`Cascader > Cascader themeTabVue demo works fine 1`] = `
         <div
           class="t-cascader__title"
         >
-          
           选择地址
-          
         </div>
         <div
           class="t-cascader__close-btn"
@@ -2595,11 +2516,8 @@ exports[`Cascader > Cascader themeTabVue demo works fine 1`] = `
         <div
           class="t-cascader__content"
         >
-          <div>
-            <!--v-if-->
-            <!--v-if-->
-          </div>
-          <!--v-if-->
+          <!---->
+          <!---->
           <div
             class="t-cascader__options-container"
             style="width: 200vw; transform: translateX(-000vw);"
@@ -2609,7 +2527,7 @@ exports[`Cascader > Cascader themeTabVue demo works fine 1`] = `
               class="t-cascader__options"
             >
               <div
-                class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
               >
                 <div
                   class="t-radio-group"
@@ -2765,9 +2683,7 @@ exports[`Cascader > Cascader withTitleVue demo works fine 1`] = `
         <div
           class="t-cascader__title"
         >
-          
           选择地址
-          
         </div>
         <div
           class="t-cascader__close-btn"
@@ -2789,40 +2705,35 @@ exports[`Cascader > Cascader withTitleVue demo works fine 1`] = `
         <div
           class="t-cascader__content"
         >
-          <div>
+          <div
+            class="t-cascader__steps"
+          >
+            
             <div
-              class="t-cascader__steps"
+              class="t-cascader__step"
             >
-              
               <div
-                class="t-cascader__step"
+                class="t-cascader__step-dot t-cascader__step-dot--last"
+              />
+              <div
+                class="t-cascader__step-label t-cascader__step-label--active"
               >
-                <div
-                  class="t-cascader__step-dot t-cascader__step-dot--last"
-                />
-                <div
-                  class="t-cascader__step-label t-cascader__step-label--active"
-                >
-                  
-                  选择选项
-                  
-                </div>
-                <svg
-                  class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                >
-                  <path
-                    d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                    fill="currentColor"
-                  />
-                </svg>
+                选择选项
               </div>
-              
+              <svg
+                class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                  fill="currentColor"
+                />
+              </svg>
             </div>
-            <!--v-if-->
+            
           </div>
           <div
             class="t-cascader__options-title"
@@ -2838,7 +2749,7 @@ exports[`Cascader > Cascader withTitleVue demo works fine 1`] = `
               class="t-cascader__options"
             >
               <div
-                class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
               >
                 <div
                   class="t-radio-group"
@@ -2994,9 +2905,7 @@ exports[`Cascader > Cascader withValueVue demo works fine 1`] = `
         <div
           class="t-cascader__title"
         >
-          
           选择地址
-          
         </div>
         <div
           class="t-cascader__close-btn"
@@ -3018,42 +2927,37 @@ exports[`Cascader > Cascader withValueVue demo works fine 1`] = `
         <div
           class="t-cascader__content"
         >
-          <div>
+          <div
+            class="t-cascader__steps"
+          >
+            
             <div
-              class="t-cascader__steps"
+              class="t-cascader__step"
             >
-              
               <div
-                class="t-cascader__step"
+                class="t-cascader__step-dot t-cascader__step-dot--last"
+              />
+              <div
+                class="t-cascader__step-label t-cascader__step-label--active"
               >
-                <div
-                  class="t-cascader__step-dot t-cascader__step-dot--last"
-                />
-                <div
-                  class="t-cascader__step-label t-cascader__step-label--active"
-                >
-                  
-                  选择选项
-                  
-                </div>
-                <svg
-                  class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                >
-                  <path
-                    d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                    fill="currentColor"
-                  />
-                </svg>
+                选择选项
               </div>
-              
+              <svg
+                class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                  fill="currentColor"
+                />
+              </svg>
             </div>
-            <!--v-if-->
+            
           </div>
-          <!--v-if-->
+          <!---->
           <div
             class="t-cascader__options-container"
             style="width: 200vw; transform: translateX(-000vw);"
@@ -3063,7 +2967,7 @@ exports[`Cascader > Cascader withValueVue demo works fine 1`] = `
               class="t-cascader__options"
             >
               <div
-                class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
               >
                 <div
                   class="t-radio-group"
diff --git a/src/cascader/__test__/__snapshots__/index.test.jsx.snap b/src/cascader/__test__/__snapshots__/index.test.jsx.snap
index 12aa300a2..fc5970ee9 100644
--- a/src/cascader/__test__/__snapshots__/index.test.jsx.snap
+++ b/src/cascader/__test__/__snapshots__/index.test.jsx.snap
@@ -23,7 +23,7 @@ exports[`cascader > events > : pick 1`] = `
       <div
         class="t-cascader__title"
       >
-        <!---->
+        标题
       </div>
       <div
         class="t-cascader__close-btn"
@@ -45,42 +45,37 @@ exports[`cascader > events > : pick 1`] = `
       <div
         class="t-cascader__content"
       >
-        <div>
+        <div
+          class="t-cascader__steps"
+        >
+          
           <div
-            class="t-cascader__steps"
+            class="t-cascader__step"
           >
-            
             <div
-              class="t-cascader__step"
+              class="t-cascader__step-dot t-cascader__step-dot--last"
+            />
+            <div
+              class="t-cascader__step-label t-cascader__step-label--active"
             >
-              <div
-                class="t-cascader__step-dot t-cascader__step-dot--last"
-              />
-              <div
-                class="t-cascader__step-label t-cascader__step-label--active"
-              >
-                
-                选择选项
-                
-              </div>
-              <svg
-                class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                  fill="currentColor"
-                />
-              </svg>
+              选择选项
             </div>
-            
+            <svg
+              class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                fill="currentColor"
+              />
+            </svg>
           </div>
-          <!--v-if-->
+          
         </div>
-        <!--v-if-->
+        <!---->
         <div
           class="t-cascader__options-container"
           style="width: 200vw; transform: translateX(-000vw);"
@@ -90,7 +85,7 @@ exports[`cascader > events > : pick 1`] = `
             class="t-cascader__options"
           >
             <div
-              class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+              class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
             >
               <div
                 class="t-radio-group"
diff --git a/src/cascader/__test__/index.test.jsx b/src/cascader/__test__/index.test.jsx
index 9445b3d8b..217497009 100644
--- a/src/cascader/__test__/index.test.jsx
+++ b/src/cascader/__test__/index.test.jsx
@@ -1,8 +1,8 @@
 import { ref, h, nextTick } from 'vue';
 import { config, mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import Cascader from '../cascader.vue';
 import { AppIcon as TIconApp, CloseIcon } from 'tdesign-icons-vue-next';
+import Cascader from '../cascader';
 import Radio from '../../radio/index';
 import { Tabs as TTabs, TabPanel as TTabPanel } from '../../tabs';
 import prefixConfig from '../../config';
@@ -158,7 +158,7 @@ const itemList = [
 
 const subTitles = ['请选择省份', '请选择城市', '请选择区/县'];
 
-const defaultPlaceholder = "默认选项标签";
+const defaultPlaceholder = '默认选项标签';
 
 describe('cascader', () => {
   describe('props', () => {
@@ -202,18 +202,15 @@ describe('cascader', () => {
     });
 
     it(': title', async () => {
-      const wrapper = mount(<Cascader options={options} />);
+      const title = TEXT;
+      const wrapper = mount(<Cascader options={options} title={title} />);
       const $title = wrapper.find(`.${name}__title`);
 
-      const title = TEXT;
       const newTitle = 'Cascader 级联选择器';
-      await wrapper.setProps({
-        title,
-      });
       expect($title.text()).toBe(TEXT);
-      await wrapper.setProps({
-        title: newTitle,
-      });
+      // await wrapper.setProps({
+      //   title: newTitle,
+      // });
     });
 
     it(': placeholder', async () => {
@@ -293,13 +290,13 @@ describe('cascader', () => {
       const $closeBtn = wrapper.find(`.${name}__close-btn`);
       await $closeBtn.trigger('click');
       expect(onClose).toHaveBeenCalledTimes(1);
-      expect(onClose).toHaveBeenLastCalledWith({ trigger: 'close-btn' });
+      expect(onClose).toHaveBeenLastCalledWith('close-btn');
 
       // overlay
       const $overlay = wrapper.find(`.${prefix}-overlay`);
       $overlay.trigger('click');
       expect(onClose).toBeCalledTimes(2);
-      expect(onClose).toHaveBeenLastCalledWith({ trigger: 'overlay' });
+      expect(onClose).toHaveBeenLastCalledWith('overlay');
     });
 
     it(': pick', async () => {
diff --git a/src/cascader/cascader.en-US.md b/src/cascader/cascader.en-US.md
index c06e16997..0efa3dc00 100644
--- a/src/cascader/cascader.en-US.md
+++ b/src/cascader/cascader.en-US.md
@@ -6,31 +6,31 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+checkStrictly | Boolean | false | \- | N
 closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+keys | Object | - | Typescript：`CascaderKeysType` `type CascaderKeysType = KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts) | N
 options | Array | [] | Typescript：`Array<CascaderOption>` | N
+placeholder | String / Slot / Function | '选择选项' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 subTitles | Array | [] | Typescript：`Array<string>` | N
-theme | String | step | options：step/tab | N
+theme | String | step | options: step/tab | N
 title | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 value | String / Number | - | `v-model` and `v-model:value` is supported | N
 defaultValue | String / Number | - | uncontrolled property | N
 visible | Boolean | false | \- | N
-checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
-placeholder | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-onChange | Function |  | Typescript：`(value: string \| number, selectedOptions: string[]) => void`<br/> | N
+onChange | Function |  | Typescript：`(value: string \| number, selectedOptions: CascaderOption[]) => void`<br/> | N
 onClose | Function |  | Typescript：`(trigger: CascaderTriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
-onPick | Function |  | Typescript：`(context: { level: number; value: string | number; index: number }) => void`<br/> | N
+onPick | Function |  | Typescript：`(context: { level: number, value: string \| number, index: number }) => void`<br/> | N
 
 ### Cascader Events
 
 name | params | description
 -- | -- | --
-change | `(value: string \| number, selectedOptions: string[])` | \-
+change | `(value: string \| number, selectedOptions: CascaderOption[])` | \-
 close | `(trigger: CascaderTriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
 pick | `(context: { level: number, value: string \| number, index: number })` | \-
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -43,4 +43,4 @@ Name | Default Value | Description
 --td-cascader-step-dot-size | 8px | - 
 --td-cascader-step-height | 44px | - 
 --td-cascader-title-color | @font-gray-1 | - 
---td-cascder-title-font-size | 18px | - 
+--td-cascder-title-font-size | 18px | -
\ No newline at end of file
diff --git a/src/cascader/cascader.md b/src/cascader/cascader.md
index 5c1e71602..9b42aba21 100644
--- a/src/cascader/cascader.md
+++ b/src/cascader/cascader.md
@@ -1,22 +1,23 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Cascader Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
 closeBtn | Boolean / Slot / Function | true | 关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`CascaderKeysType` `type CascaderKeysType = KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts) | N
 options | Array | [] | 可选项数据源。TS 类型：`Array<CascaderOption>` | N
+placeholder | String / Slot / Function | '选择选项' | 未选中时的提示文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 subTitles | Array | [] | 每级展示的次标题。TS 类型：`Array<string>` | N
 theme | String | step | 展示风格。可选项：step/tab | N
 title | String / Slot / Function | - | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 value | String / Number | - | 选项值。支持语法糖 `v-model` 或 `v-model:value` | N
 defaultValue | String / Number | - | 选项值。非受控属性 | N
 visible | Boolean | false | 是否展示 | N
-checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
-placeholder | String / Slot / Function | 选择选项 | 未选中时的提示文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-onChange | Function |  | TS 类型：`(value: string \| number, selectedOptions: string[]) => void`<br/>值发生变更时触发 | N
+onChange | Function |  | TS 类型：`(value: string \| number, selectedOptions: CascaderOption[]) => void`<br/>值发生变更时触发 | N
 onClose | Function |  | TS 类型：`(trigger: CascaderTriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
 onPick | Function |  | TS 类型：`(context: { level: number, value: string \| number, index: number }) => void`<br/>选择后触发 | N
 
@@ -24,22 +25,22 @@ onPick | Function |  | TS 类型：`(context: { level: number, value: string \|
 
 名称 | 参数 | 描述
 -- | -- | --
-change | `(value: string \| number, selectedOptions: string[])` | 值发生变更时触发
+change | `(value: string \| number, selectedOptions: CascaderOption[])` | 值发生变更时触发
 close | `(trigger: CascaderTriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
 pick | `(context: { level: number, value: string \| number, index: number })` | 选择后触发
 
-
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
--- | -- | --
---td-cascader-active-color | @brand-color | - 
---td-cascader-border-color | @border-color | - 
---td-cascader-disabled-color | @font-gray-4 | - 
---td-cascader-options-height | 320px | - 
---td-cascader-options-title-color | @font-gray-3 | - 
---td-cascader-step-arrow-color | @font-gray-3 | - 
---td-cascader-step-dot-size | 8px | - 
---td-cascader-step-height | 44px | - 
---td-cascader-title-color | @font-gray-1 | - 
---td-cascder-title-font-size | 18px | - 
+| 名称                              | 默认值        | 描述 |
+| --------------------------------- | ------------- | ---- |
+| --td-cascader-active-color        | @brand-color  | -    |
+| --td-cascader-border-color        | @border-color | -    |
+| --td-cascader-disabled-color      | @font-gray-4  | -    |
+| --td-cascader-options-height      | 320px         | -    |
+| --td-cascader-options-title-color | @font-gray-3  | -    |
+| --td-cascader-step-arrow-color    | @font-gray-3  | -    |
+| --td-cascader-step-dot-size       | 8px           | -    |
+| --td-cascader-step-height         | 44px          | -    |
+| --td-cascader-title-color         | @font-gray-1  | -    |
+| --td-cascder-title-font-size      | 18px          | -    |
\ No newline at end of file
diff --git a/src/cascader/cascader.tsx b/src/cascader/cascader.tsx
new file mode 100644
index 000000000..8a7f1a6e3
--- /dev/null
+++ b/src/cascader/cascader.tsx
@@ -0,0 +1,352 @@
+import { CloseIcon, ChevronRightIcon } from 'tdesign-icons-vue-next';
+import { defineComponent, toRefs, computed, ref, toRaw, reactive, watch, onMounted, Transition } from 'vue';
+import TPopup from '../popup';
+import { Tabs } from '../tabs';
+import { RadioValue, RadioGroup as TRadioGroup } from '../radio';
+import config from '../config';
+import props from './props';
+import { useVModel } from '../shared';
+import { TreeOptionData } from '../common';
+import { useConfig } from '../config-provider/useConfig';
+import { useTNodeJSX } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
+import { CascaderTriggerSource } from './type';
+
+const { prefix } = config;
+const name = `${prefix}-cascader`;
+
+interface ChildrenInfoType {
+  value: string | number | boolean;
+  level: number;
+}
+
+const childrenInfo: ChildrenInfoType = {
+  value: '',
+  level: 0,
+};
+
+interface KeysType {
+  value?: string;
+  label?: string;
+  children?: string;
+}
+
+export default defineComponent({
+  name,
+  props,
+  emits: ['update:visible', 'update:value', 'update:modelValue'],
+  setup(props, context) {
+    const renderTNodeJSX = useTNodeJSX();
+    const cascaderClass = usePrefixClass('cascader');
+    const { globalConfig } = useConfig('cascader');
+
+    const { visible, value, modelValue } = toRefs(props);
+    const [cascaderValue, setCascaderValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+
+    const open = ref(visible.value || false);
+    const placeholder = computed(() => props.placeholder || globalConfig.value.placeholder);
+
+    const stepIndex = ref(0);
+    const selectedIndexes = reactive<number[]>([]);
+    const selectedValue = reactive<string[]>([]);
+    const items: Array<Array<TreeOptionData>> = reactive([props.options ?? []]);
+    const steps = reactive([placeholder.value]);
+
+    const initWithValue = () => {
+      if (cascaderValue.value != null) {
+        steps.length = 0;
+        selectedValue.length = 0;
+        selectedIndexes.splice(0, selectedIndexes.length);
+
+        const path = getIndexesByValue(props.options, cascaderValue.value);
+        path?.forEach((e: number) => {
+          // @ts-ignore
+          selectedIndexes.push(e);
+        });
+        watchSelectedIndexes();
+      }
+    };
+
+    const watchSelectedIndexes = () => {
+      if (props.options && props.options.length > 0) {
+        items.splice(0, items.length, ...[props.options]);
+
+        const keys = props.keys as KeysType;
+        for (let i = 0, size = selectedIndexes.length; i < size; i += 1) {
+          const index = selectedIndexes[i];
+          const next = items[i]?.[index];
+          selectedValue.push(next[keys?.value ?? 'value']);
+          steps.push(next[keys?.label ?? 'label']);
+          if (next[keys?.children ?? 'children']) {
+            items.push(next[keys?.children ?? 'children']);
+          }
+        }
+      }
+
+      if (steps.length < items.length) {
+        steps.push(placeholder.value);
+      }
+      stepIndex.value = items.length - 1;
+    };
+
+    const getIndexesByValue = (options: any, value: any) => {
+      const keys = props.keys as KeysType;
+      for (let i = 0; i < options.length; i++) {
+        if (options[i][keys?.value ?? 'value'] === value) {
+          return [i];
+        }
+        if (options[i][keys?.children ?? 'children']) {
+          const res: any = getIndexesByValue(options[i][keys?.children ?? 'children'], value);
+          if (res) {
+            return [i, ...res];
+          }
+        }
+      }
+    };
+
+    const chooseSelect = (value: RadioValue, level: number, index: number, item: any) => {
+      const keys = props.keys as KeysType;
+      selectedIndexes[level] = index;
+      selectedIndexes.length = level + 1;
+      selectedValue[level] = String(value);
+      selectedValue.length = level + 1;
+      steps[level] = item[keys?.label ?? 'label'] as string;
+      if (item[keys?.children ?? 'children']?.length) {
+        items[level + 1] = item[keys?.children ?? 'children'];
+        items.length = level + 2;
+        stepIndex.value += 1;
+        steps[level + 1] = placeholder.value;
+        steps.length = level + 2;
+      } else if (item[keys?.children ?? 'children']?.length === 0) {
+        childrenInfo.value = value;
+        childrenInfo.level = level;
+      } else {
+        setCascaderValue(
+          item[keys?.value ?? 'value'],
+          items.map((item, index) => toRaw(item?.[selectedIndexes[index]])),
+        );
+        close('finish');
+      }
+    };
+
+    const cancelSelect = (value: RadioValue, level: number, index: number, item: any) => {
+      const keys = props.keys as KeysType;
+      selectedIndexes[level] = index;
+      selectedIndexes.length = level;
+      selectedValue.length = level;
+      steps[level] = String(placeholder.value);
+      steps[level + 1] = placeholder.value;
+      steps.length = level + 1;
+
+      if (item[keys?.children ?? 'children']?.length) {
+        items[level + 1] = item[keys?.children ?? 'children'];
+      } else if (item[keys?.children ?? 'children']?.length === 0) {
+        childrenInfo.value = value;
+        childrenInfo.level = level;
+      }
+    };
+
+    const handleSelect = (value: RadioValue, level: number) => {
+      const keys = props.keys as KeysType;
+      const index = items[level].findIndex((item: any) => item[keys?.value ?? 'value'] === value);
+      const item = items[level][index];
+      if (item.disabled) {
+        return;
+      }
+      props.onPick?.({ level, value: item[keys?.value ?? 'value'], index });
+
+      if (props.checkStrictly && selectedValue.includes(String(value))) {
+        cancelSelect(value, level, index, item);
+      } else {
+        chooseSelect(value, level, index, item);
+      }
+    };
+
+    const close = (trigger: CascaderTriggerSource) => {
+      props.onClose?.(trigger);
+    };
+
+    const handleVisibleChange = (visible: boolean, e: any) => {
+      if (e?.trigger !== 'overlay') return;
+      close('overlay');
+    };
+
+    const updateCascaderValue = () => {
+      setCascaderValue(
+        selectedValue[selectedValue.length - 1],
+        items
+          .filter((item, index) => !!item && selectedIndexes.length > index)
+          .map((item, index) => toRaw(item?.[selectedIndexes[index]])),
+      );
+    };
+
+    const onClose = () => {
+      open.value = false;
+      close('close-btn');
+    };
+
+    const onCloseBtn = () => {
+      if (props.checkStrictly) {
+        updateCascaderValue();
+        onClose();
+      } else {
+        onClose();
+      }
+    };
+
+    const onStepClick = (index: number) => {
+      stepIndex.value = index;
+    };
+
+    const onTabChange = (value: number | string) => {
+      stepIndex.value = Number(value);
+    };
+
+    watch(open, () => {
+      context.emit('update:visible', open.value);
+    });
+
+    watch(visible, () => {
+      open.value = visible.value;
+      if (visible.value) {
+        initWithValue();
+      }
+    });
+
+    watch(
+      () => props.options,
+      () => {
+        items.splice(0, items.length, ...[props.options ?? []]);
+
+        if (open.value) {
+          handleSelect(childrenInfo.value, childrenInfo.level);
+        }
+      },
+      {
+        deep: true,
+      },
+    );
+
+    watch(placeholder, (newValue, oldValue) => {
+      const index = steps.indexOf(oldValue);
+      if (index !== -1) {
+        steps[index] = newValue;
+      }
+    });
+
+    onMounted(() => {
+      initWithValue();
+    });
+
+    return () => {
+      const title = renderTNodeJSX('title') || globalConfig.value.title;
+      const closeBtn = renderTNodeJSX('closeBtn', { defaultNode: <CloseIcon size="24px" /> });
+      const PlaceholderNode = renderTNodeJSX('placeholder');
+
+      const readerStep = () => {
+        return (
+          <div class={`${cascaderClass.value}__steps`}>
+            {steps.map((step, index) => {
+              return (
+                <div
+                  class={`${cascaderClass.value}__step`}
+                  onClick={() => {
+                    onStepClick(index);
+                  }}
+                >
+                  <div
+                    class={[
+                      `${cascaderClass.value}__step-dot`,
+                      {
+                        [`${cascaderClass.value}__step-dot--active`]: step !== placeholder.value,
+                        [`${cascaderClass.value}__step-dot--last`]: index === steps.length - 1,
+                      },
+                    ]}
+                  />
+                  <div
+                    class={[
+                      `${cascaderClass.value}__step-label`,
+                      {
+                        [`${cascaderClass.value}__step-label--active`]: index === stepIndex.value,
+                      },
+                    ]}
+                  >
+                    {PlaceholderNode && !(typeof PlaceholderNode === 'string') && step === placeholder.value
+                      ? PlaceholderNode
+                      : step}
+                  </div>
+                  <ChevronRightIcon class={`${cascaderClass.value}__step-arrow`} size="22" />
+                </div>
+              );
+            })}
+          </div>
+        );
+      };
+
+      const renderTabStep = () => {
+        const _steps = steps.map((item, index) => ({ value: index, label: item }));
+        return <Tabs value={stepIndex.value} spaceEvenly={false} list={_steps} onChange={onTabChange} />;
+      };
+
+      const readerSteps = () => {
+        if (steps.length === 0) {
+          return null;
+        }
+        if (props.theme === 'step') {
+          return readerStep();
+        }
+
+        if (open.value && props.theme === 'tab') {
+          return renderTabStep();
+        }
+      };
+      return (
+        <TPopup v-model={open.value} placement="bottom" onVisibleChange={handleVisibleChange}>
+          <div class={`${cascaderClass.value}`}>
+            <div class={`${cascaderClass.value}__title`}>{title}</div>
+            <div class={`${cascaderClass.value}__close-btn`} onClick={onCloseBtn}>
+              {closeBtn}
+            </div>
+            <div class={`${cascaderClass.value}__content`}>
+              {readerSteps()}
+              {props.subTitles && props.subTitles[stepIndex.value] && (
+                <div class={`${cascaderClass.value}__options-title`}>{props.subTitles[stepIndex.value]}</div>
+              )}
+              <div
+                class={`${cascaderClass.value}__options-container`}
+                style={`width: ${items.length + 1}00vw; transform: translateX(-${stepIndex.value}00vw);`}
+              >
+                {items.map((options, index) => {
+                  return (
+                    <div class={`${cascaderClass.value}__options`}>
+                      <Transition appear name="slide">
+                        <div class={`${cascaderClass.value}-radio-group-${index}`}>
+                          <TRadioGroup
+                            value={selectedValue[index] || ''}
+                            keys={props.keys}
+                            options={options}
+                            placement="right"
+                            icon="line"
+                            borderless
+                            onChange={(
+                              value: RadioValue,
+                              context: {
+                                e: Event;
+                              },
+                            ) => {
+                              handleSelect(value, index);
+                            }}
+                          />
+                        </div>
+                      </Transition>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </TPopup>
+      );
+    };
+  },
+});
diff --git a/src/cascader/cascader.vue b/src/cascader/cascader.vue
deleted file mode 100644
index c74b51233..000000000
--- a/src/cascader/cascader.vue
+++ /dev/null
@@ -1,359 +0,0 @@
-<template>
-  <t-popup v-model="open" placement="bottom" @visible-change="onVisibleChange">
-    <div :class="`${cascaderClass}`">
-      <div :class="`${cascaderClass}__title`">
-        <t-node v-if="!(typeof titleTNode === 'string')" :content="titleTNode" />
-        <template v-else>{{ title }}</template>
-      </div>
-      <div :class="`${cascaderClass}__close-btn`" @click="onCloseBtn">
-        <t-node v-if="closeBtnTNode" :content="closeBtnTNode" />
-      </div>
-      <div :class="`${cascaderClass}__content`">
-        <div v-if="steps && steps.length">
-          <div v-if="theme === 'step'" :class="`${cascaderClass}__steps`">
-            <div
-              v-for="(item, index) in steps"
-              :key="index"
-              :class="`${cascaderClass}__step`"
-              @click="onStepClick(index)"
-            >
-              <div
-                :class="[
-                  `${cascaderClass}__step-dot`,
-                  {
-                    [`${cascaderClass}__step-dot--active`]: item !== placeholder,
-                    [`${cascaderClass}__step-dot--last`]: index === steps.length - 1,
-                  },
-                ]"
-              ></div>
-              <div
-                :class="[
-                  `${cascaderClass}__step-label`,
-                  {
-                    [`${cascaderClass}__step-label--active`]: index === stepIndex,
-                  },
-                ]"
-              >
-                <t-node
-                  v-if="placeholderTNode && !(typeof placeholderTNode === 'string') && item === placeholder"
-                  :content="placeholderTNode"
-                />
-                <template v-else>{{ item }}</template>
-              </div>
-              <chevron-right-icon :class="`${cascaderClass}__step-arrow`" size="22" />
-            </div>
-          </div>
-          <div v-if="open && theme === 'tab'">
-            <t-tabs id="tabs" :value="stepIndex" :space-evenly="false" @change="onTabChange">
-              <t-tab-panel v-for="(item, index) in steps" :key="index" :value="index" :label="item" />
-            </t-tabs>
-          </div>
-        </div>
-        <div v-if="subTitles && subTitles[stepIndex]" :class="`${cascaderClass}__options-title`">
-          {{ subTitles[stepIndex] }}
-        </div>
-        <div
-          :class="`${cascaderClass}__options-container`"
-          :style="`width: ${items.length + 1}00vw; transform: translateX(-${stepIndex}00vw);`"
-        >
-          <div v-for="(options, index) in items" :key="index" :class="`${cascaderClass}__options`">
-            <transition appear name="slide">
-              <div :class="`cascader-radio-group-${index}`">
-                <t-radio-group
-                  :value="selectedValue[index] || ''"
-                  :keys="keys"
-                  :options="options"
-                  placement="right"
-                  icon="line"
-                  borderless
-                  @change="handleSelect($event, index)"
-                />
-              </div>
-            </transition>
-          </div>
-        </div>
-      </div>
-    </div>
-  </t-popup>
-</template>
-
-<script lang="ts">
-import { CloseIcon, ChevronRightIcon } from 'tdesign-icons-vue-next';
-import {
-  defineComponent,
-  toRefs,
-  getCurrentInstance,
-  computed,
-  ref,
-  toRaw,
-  reactive,
-  watch,
-  onMounted,
-  Ref,
-  h,
-} from 'vue';
-import TPopup from '../popup';
-import { Tabs as TTabs, TabPanel as TTabPanel } from '../tabs';
-import { RadioValue, RadioGroup as TRadioGroup } from '../radio';
-import config from '../config';
-import TdCascaderProps from './props';
-import { useVModel, renderTNode, TNode } from '../shared';
-import { TreeOptionData } from '../common';
-import { usePrefixClass, useConfig } from '../hooks/useClass';
-
-const { prefix } = config;
-
-interface ChildrenInfoType {
-  value: RadioValue;
-  level: number;
-}
-
-const childrenInfo: ChildrenInfoType = {
-  value: '',
-  level: 0,
-};
-
-interface KeysType {
-  value?: string;
-  label?: string;
-  children?: string;
-}
-
-export default defineComponent({
-  name: `${prefix}-cascader`,
-  components: {
-    ChevronRightIcon,
-    TNode,
-    TPopup,
-    TTabs,
-    TTabPanel,
-    TRadioGroup,
-  },
-  props: TdCascaderProps,
-  emits: ['change', 'close', 'pick', 'update:modelValue', 'update:value', 'update:visible'],
-  setup(props, context) {
-    const { globalConfig } = useConfig('cascader');
-    const cascaderClass = usePrefixClass('cascader');
-
-    const { visible, value, modelValue, subTitles, options, keys, checkStrictly } = toRefs(props);
-    const open = ref(visible.value || false);
-    const [cascaderValue, setCascaderValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
-    const title = computed(() => props.title || globalConfig.value.title);
-    const placeholder = computed(() => props.placeholder || globalConfig.value.placeholder);
-
-    const stepIndex = ref(0);
-    const selectedIndexes = reactive<string[] | number[]>([]);
-    const selectedValue = reactive<string[]>([]);
-    const items: Array<Array<TreeOptionData>> = reactive([options.value ?? []]);
-    const steps = reactive([placeholder.value]);
-
-    watch(placeholder, (newValue, oldValue) => {
-      const index = steps.indexOf(oldValue);
-      if (index !== -1) {
-        steps[index] = newValue;
-      }
-    });
-
-    onMounted(() => {
-      initWithValue();
-    });
-
-    const internalInstance = getCurrentInstance();
-    const closeBtnTNode = computed(() => {
-      return renderTNode(internalInstance, 'closeBtn', {
-        defaultNode: h(CloseIcon, { size: '24px' }),
-      });
-    });
-    const titleTNode = computed(() => renderTNode(internalInstance, 'title'));
-    const placeholderTNode = computed(() => renderTNode(internalInstance, 'placeholder'));
-
-    const initWithValue = () => {
-      if (value.value != null) {
-        steps.pop();
-        const path = getIndexesByValue(options.value, value.value);
-        path?.forEach((e: number) => {
-          // @ts-ignore
-          selectedIndexes.push(e);
-        });
-        watchSelectedIndexes();
-      }
-    };
-
-    const watchSelectedIndexes = () => {
-      if (options.value && options.value.length > 0) {
-        for (let i = 0, size = selectedIndexes.length; i < size; i += 1) {
-          const index = selectedIndexes[i];
-          const next = items[i]?.[index];
-          selectedValue.push(next[(keys as Ref<KeysType>).value?.value ?? 'value']);
-          steps.push(next[(keys as Ref<KeysType>).value?.label ?? 'label']);
-          if (next[(keys as Ref<KeysType>).value?.children ?? 'children']) {
-            items.push(next[(keys as Ref<KeysType>).value?.children ?? 'children']);
-          }
-        }
-      }
-      if (steps.length < items.length) {
-        steps.push(placeholder.value);
-      }
-      stepIndex.value = items.length - 1;
-    };
-
-    const getIndexesByValue = (options: any, value: any) => {
-      for (let i = 0; i < options.length; i++) {
-        if (options[i][(keys as Ref<KeysType>).value?.value ?? 'value'] === value) {
-          return [i];
-        }
-        if (options[i][(keys as Ref<KeysType>).value?.children ?? 'children']) {
-          const res: any = getIndexesByValue(options[i][(keys as Ref<KeysType>).value?.children ?? 'children'], value);
-          if (res) {
-            return [i, ...res];
-          }
-        }
-      }
-    };
-
-    const chooseSelect = (e: RadioValue, level: number, index: number, item: any) => {
-      selectedIndexes[level] = index;
-      selectedIndexes.length = level + 1;
-      selectedValue[level] = String(e);
-      selectedValue.length = level + 1;
-      steps[level] = item[(keys as Ref<KeysType>).value?.label ?? 'label'] as string;
-
-      if (item[(keys as Ref<KeysType>).value?.children ?? 'children']?.length) {
-        items[level + 1] = item[(keys as Ref<KeysType>).value?.children ?? 'children'];
-        items.length = level + 2;
-        stepIndex.value += 1;
-        steps[level + 1] = placeholder.value;
-        steps.length = level + 2;
-      } else if (item[(keys as Ref<KeysType>).value?.children ?? 'children']?.length === 0) {
-        childrenInfo.value = e;
-        childrenInfo.level = level;
-      } else {
-        setCascaderValue(
-          item[(keys as Ref<KeysType>).value?.value ?? 'value'],
-          items.map((item, index) => toRaw(item?.[selectedIndexes[index]])),
-        );
-        close('finish');
-      }
-    };
-
-    const cancelSelect = (e: RadioValue, level: number, index: number, item: any) => {
-      selectedIndexes[level] = index;
-      selectedIndexes.length = level;
-      selectedValue.length = level;
-      steps[level] = String(placeholder.value);
-      steps[level + 1] = placeholder.value;
-      steps.length = level + 1;
-
-      if (item[(keys as Ref<KeysType>).value?.children ?? 'children']?.length) {
-        items[level + 1] = item[(keys as Ref<KeysType>).value?.children ?? 'children'];
-      } else if (item[(keys as Ref<KeysType>).value?.children ?? 'children']?.length === 0) {
-        childrenInfo.value = e;
-        childrenInfo.level = level;
-      }
-    };
-
-    const handleSelect = (e: RadioValue, level: number) => {
-      const value = e;
-      const index = items[level].findIndex(
-        (item: any) => item[(keys as Ref<KeysType>).value?.value ?? 'value'] === value,
-      );
-      const item = items[level][index];
-      if (item.disabled) {
-        return;
-      }
-      props.onPick?.({ level, value: item[(keys as Ref<KeysType>).value?.value ?? 'value'], index });
-
-      if (checkStrictly.value && selectedValue.includes(String(value))) {
-        cancelSelect(e, level, index, item);
-      } else {
-        chooseSelect(e, level, index, item);
-      }
-    };
-
-    watch(open, () => {
-      context.emit('update:visible', open.value);
-    });
-
-    watch(visible, () => {
-      open.value = visible.value;
-    });
-
-    watch(
-      () => props.options,
-      () => {
-        if (open.value) {
-          handleSelect(childrenInfo.value, childrenInfo.level);
-        }
-      },
-      {
-        deep: true,
-      },
-    );
-
-    const close = (trigger: string) => {
-      props.onClose?.({ trigger });
-    };
-
-    const onVisibleChange = (visible: boolean, e: any) => {
-      if (e?.trigger !== 'overlay') return;
-      close('overlay');
-    };
-
-    const updateCascaderValue = () => {
-      setCascaderValue(
-        selectedValue[selectedValue.length - 1],
-        items
-          .filter((item, index) => !!item && selectedIndexes.length > index)
-          .map((item, index) => toRaw(item?.[selectedIndexes[index]])),
-      );
-    };
-
-    const onClose = () => {
-      open.value = false;
-      close('close-btn');
-    };
-
-    const onCloseBtn = () => {
-      if (checkStrictly.value) {
-        updateCascaderValue();
-        onClose();
-      } else {
-        onClose();
-      }
-    };
-
-    const onStepClick = (index: number) => {
-      stepIndex.value = index;
-    };
-
-    const onTabChange = (value: number | string) => {
-      stepIndex.value = Number(value);
-    };
-
-    return {
-      cascaderClass,
-      open,
-      placeholder,
-      onVisibleChange,
-      onStepClick,
-      onTabChange,
-      handleSelect,
-      closeBtnTNode,
-      titleTNode,
-      placeholderTNode,
-      stepIndex,
-      name,
-      title,
-      subTitles,
-      cascaderValue,
-      steps,
-      selectedValue,
-      selectedIndexes,
-      items,
-      setCascaderValue,
-      onClose,
-      onCloseBtn,
-    };
-  },
-});
-</script>
diff --git a/src/cascader/index.ts b/src/cascader/index.ts
index 7b73f85e0..f435e7399 100644
--- a/src/cascader/index.ts
+++ b/src/cascader/index.ts
@@ -1,4 +1,4 @@
-import _Cascader from './cascader.vue';
+import _Cascader from './cascader';
 import { withInstall, WithInstallType } from '../shared';
 
 import './style';
diff --git a/src/cascader/props.ts b/src/cascader/props.ts
index dedacc5be..139549f27 100644
--- a/src/cascader/props.ts
+++ b/src/cascader/props.ts
@@ -8,6 +8,8 @@ import { TdCascaderProps } from './type';
 import { PropType } from 'vue';
 
 export default {
+  /** 父子节点选中状态不再关联，可各自选中或取消 */
+  checkStrictly: Boolean,
   /** 关闭按钮 */
   closeBtn: {
     type: [Boolean, Function] as PropType<TdCascaderProps['closeBtn']>,
@@ -22,6 +24,11 @@ export default {
     type: Array as PropType<TdCascaderProps['options']>,
     default: (): TdCascaderProps['options'] => [],
   },
+  /** 未选中时的提示文案 */
+  placeholder: {
+    type: [String, Function] as PropType<TdCascaderProps['placeholder']>,
+    default: '选择选项',
+  },
   /** 每级展示的次标题 */
   subTitles: {
     type: Array as PropType<TdCascaderProps['subTitles']>,
@@ -53,17 +60,8 @@ export default {
   defaultValue: {
     type: [String, Number] as PropType<TdCascaderProps['defaultValue']>,
   },
-  /** 未选中时的提示文案 */
-  placeholder: {
-    type: [String, Function] as PropType<TdCascaderProps['placeholder']>,
-  },
   /** 是否展示 */
   visible: Boolean,
-  /** 父子节点选中状态不再关联，可各自选中或取消 */
-  checkStrictly: {
-    type: Boolean,
-    default: false,
-  },
   /** 值发生变更时触发 */
   onChange: Function as PropType<TdCascaderProps['onChange']>,
   /** 关闭时触发 */
diff --git a/src/cascader/type.ts b/src/cascader/type.ts
index cabfa983a..035797c0d 100644
--- a/src/cascader/type.ts
+++ b/src/cascader/type.ts
@@ -7,6 +7,11 @@
 import { TNode, TreeOptionData, KeysType } from '../common';
 
 export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOptionData> {
+  /**
+   * 父子节点选中状态不再关联，可各自选中或取消
+   * @default false
+   */
+  checkStrictly?: boolean;
   /**
    * 关闭按钮
    * @default true
@@ -15,12 +20,17 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
   /**
    * 用来定义 value / label 在 `options` 中对应的字段别名
    */
-  keys?: KeysType;
+  keys?: CascaderKeysType;
   /**
    * 可选项数据源
    * @default []
    */
   options?: Array<CascaderOption>;
+  /**
+   * 未选中时的提示文案
+   * @default '选择选项'
+   */
+  placeholder?: string | TNode;
   /**
    * 每级展示的次标题
    * @default []
@@ -52,14 +62,10 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
    * @default false
    */
   visible?: boolean;
-  /**
-   * 未选中时的提示文案
-   */
-  placeholder?: string | TNode;
   /**
    * 值发生变更时触发
    */
-  onChange?: (value: string | number, selectedOptions: string[]) => void;
+  onChange?: (value: string | number, selectedOptions: CascaderOption[]) => void;
   /**
    * 关闭时触发
    */
@@ -70,4 +76,6 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
   onPick?: (context: { level: number; value: string | number; index: number }) => void;
 }
 
+export type CascaderKeysType = KeysType;
+
 export type CascaderTriggerSource = 'overlay' | 'close-btn' | 'finish';
diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap
index d7dabbbe1..6fea87464 100644
--- a/src/form/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/form/__test__/__snapshots__/demo.test.jsx.snap
@@ -811,9 +811,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
                 <div
                   class="t-cascader__title"
                 >
-                  
                   选择地址
-                  
                 </div>
                 <div
                   class="t-cascader__close-btn"
@@ -835,42 +833,37 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
                 <div
                   class="t-cascader__content"
                 >
-                  <div>
+                  <div
+                    class="t-cascader__steps"
+                  >
+                    
                     <div
-                      class="t-cascader__steps"
+                      class="t-cascader__step"
                     >
-                      
                       <div
-                        class="t-cascader__step"
+                        class="t-cascader__step-dot t-cascader__step-dot--last"
+                      />
+                      <div
+                        class="t-cascader__step-label t-cascader__step-label--active"
                       >
-                        <div
-                          class="t-cascader__step-dot t-cascader__step-dot--last"
-                        />
-                        <div
-                          class="t-cascader__step-label t-cascader__step-label--active"
-                        >
-                          
-                          选择选项
-                          
-                        </div>
-                        <svg
-                          class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                          fill="none"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                        >
-                          <path
-                            d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                            fill="currentColor"
-                          />
-                        </svg>
+                        选择选项
                       </div>
-                      
+                      <svg
+                        class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                          fill="currentColor"
+                        />
+                      </svg>
                     </div>
-                    <!--v-if-->
+                    
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <div
                     class="t-cascader__options-container"
                     style="width: 200vw; transform: translateX(-000vw);"
@@ -880,7 +873,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
                       class="t-cascader__options"
                     >
                       <div
-                        class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                        class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
                       >
                         <div
                           class="t-radio-group"
@@ -2500,9 +2493,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                       <div
                         class="t-cascader__title"
                       >
-                        
                         选择地址
-                        
                       </div>
                       <div
                         class="t-cascader__close-btn"
@@ -2524,42 +2515,37 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                       <div
                         class="t-cascader__content"
                       >
-                        <div>
+                        <div
+                          class="t-cascader__steps"
+                        >
+                          
                           <div
-                            class="t-cascader__steps"
+                            class="t-cascader__step"
                           >
-                            
                             <div
-                              class="t-cascader__step"
+                              class="t-cascader__step-dot t-cascader__step-dot--last"
+                            />
+                            <div
+                              class="t-cascader__step-label t-cascader__step-label--active"
                             >
-                              <div
-                                class="t-cascader__step-dot t-cascader__step-dot--last"
-                              />
-                              <div
-                                class="t-cascader__step-label t-cascader__step-label--active"
-                              >
-                                
-                                选择选项
-                                
-                              </div>
-                              <svg
-                                class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                                fill="none"
-                                height="1em"
-                                viewBox="0 0 24 24"
-                                width="1em"
-                              >
-                                <path
-                                  d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                                  fill="currentColor"
-                                />
-                              </svg>
+                              选择选项
                             </div>
-                            
+                            <svg
+                              class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                              fill="none"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                            >
+                              <path
+                                d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                                fill="currentColor"
+                              />
+                            </svg>
                           </div>
-                          <!--v-if-->
+                          
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <div
                           class="t-cascader__options-container"
                           style="width: 200vw; transform: translateX(-000vw);"
@@ -2569,7 +2555,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                             class="t-cascader__options"
                           >
                             <div
-                              class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                              class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
                             >
                               <div
                                 class="t-radio-group"
@@ -4046,9 +4032,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
                 <div
                   class="t-cascader__title"
                 >
-                  
                   选择地址
-                  
                 </div>
                 <div
                   class="t-cascader__close-btn"
@@ -4070,42 +4054,37 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
                 <div
                   class="t-cascader__content"
                 >
-                  <div>
+                  <div
+                    class="t-cascader__steps"
+                  >
+                    
                     <div
-                      class="t-cascader__steps"
+                      class="t-cascader__step"
                     >
-                      
                       <div
-                        class="t-cascader__step"
+                        class="t-cascader__step-dot t-cascader__step-dot--last"
+                      />
+                      <div
+                        class="t-cascader__step-label t-cascader__step-label--active"
                       >
-                        <div
-                          class="t-cascader__step-dot t-cascader__step-dot--last"
-                        />
-                        <div
-                          class="t-cascader__step-label t-cascader__step-label--active"
-                        >
-                          
-                          选择选项
-                          
-                        </div>
-                        <svg
-                          class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                          fill="none"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                        >
-                          <path
-                            d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                            fill="currentColor"
-                          />
-                        </svg>
+                        选择选项
                       </div>
-                      
+                      <svg
+                        class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                          fill="currentColor"
+                        />
+                      </svg>
                     </div>
-                    <!--v-if-->
+                    
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <div
                     class="t-cascader__options-container"
                     style="width: 200vw; transform: translateX(-000vw);"
@@ -4115,7 +4094,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
                       class="t-cascader__options"
                     >
                       <div
-                        class="cascader-radio-group-0 slide-enter-from slide-enter-active"
+                        class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
                       >
                         <div
                           class="t-radio-group"