Repository: Tencent/tdesign-mobile-vue
Pull request #440 (2022-10-28 04:27:43)

docs(dropdown-menu): update docs and demo
### 🤔 这个 PR 的性质是？

- [x]  演示代码改进


### 🔗 相关 Issue

#413 

### 📝 更新日志

- feat(DropdownMenu): 更新示例代码



Patch:
diff --git a/src/dropdown-menu/demos/disabled.vue b/src/dropdown-menu/demos/disabled.vue
index eeb32568..639e3c31 100644
--- a/src/dropdown-menu/demos/disabled.vue
+++ b/src/dropdown-menu/demos/disabled.vue
@@ -1,32 +1,42 @@
 <template>
   <demo-container>
-    <t-dropdown-menu>
+    <t-dropdown-menu class="space">
+      <t-dropdown-item label="禁用" disabled />
+      <t-dropdown-item label="禁用" disabled />
+      <t-dropdown-item label="禁用" disabled />
+      <t-dropdown-item label="禁用" disabled />
+    </t-dropdown-menu>
+  </demo-container>
+  <demo-container>
+    <t-dropdown-menu class="space">
+      <t-dropdown-item label="禁用菜单" disabled />
+      <t-dropdown-item label="禁用菜单" disabled />
       <t-dropdown-item label="禁用菜单" disabled />
-      <t-dropdown-item label="禁用选项" :options="optionsN" />
     </t-dropdown-menu>
-    <p>禁用了序号是3的倍数的选项。</p>
+  </demo-container>
+  <demo-container>
+    <t-dropdown-menu class="space">
+      <t-dropdown-item label="禁用菜单" disabled />
+      <t-dropdown-item label="禁用菜单" disabled :options="optionsN" />
+    </t-dropdown-menu>
   </demo-container>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import DemoContainer from './demo-container.vue';
 
-export default defineComponent({
-  components: {
-    DemoContainer,
-  },
-  setup() {
-    const emptyArr = new Array(20).fill(null);
-    const numberArr = emptyArr.map((_, i) => ({
-      title: `选项 ${i + 1}`,
-      value: `option_${i + 1}`,
-      disabled: (i + 1) % 3 === 0,
-    }));
-    const optionsN = ref(numberArr);
-    return {
-      optionsN,
-    };
-  },
-});
+const emptyArr = new Array(8).fill(null);
+const numberArr = emptyArr.map((_, i) => ({
+  title: `选项 ${i + 1}`,
+  value: `option_${i + 1}`,
+  disabled: true,
+}));
+const optionsN = ref(numberArr);
 </script>
+
+<style lang="less" scoped>
+.space {
+  margin: 0 0 16px 0;
+}
+</style>
diff --git a/src/dropdown-menu/demos/mobile.vue b/src/dropdown-menu/demos/mobile.vue
index 9f2d7973..f7a918f1 100644
--- a/src/dropdown-menu/demos/mobile.vue
+++ b/src/dropdown-menu/demos/mobile.vue
@@ -1,27 +1,20 @@
 <template>
   <div class="tdesign-mobile-demo">
     <h1 class="title">DropdownMenu 下拉菜单</h1>
-    <p class="summary">向下弹出的菜单列表</p>
+    <p class="summary">菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。</p>
     <tdesign-demo-block title="01 类型" summary="单选下拉菜单">
-      <!-- <t-dropdown-menu>
-        <t-dropdown-item :value="valueS1" label="菜单名称" :options="optionsN" @change="onChange" />
-        <t-dropdown-item v-model="valueS2" label="菜单名称" :options="optionsC" />
-      </t-dropdown-menu> -->
       <singleVue />
     </tdesign-demo-block>
     <tdesign-demo-block summary="多选下拉菜单">
       <multipleVue />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="树形下拉菜单">
+    <tdesign-demo-block summary="树型下拉菜单">
       <treeVue />
     </tdesign-demo-block>
     <tdesign-demo-block title="02 状态" summary="下拉菜单状态">
-      <t-dropdown-menu>
-        <t-dropdown-item disabled label="禁用菜单" :options="[]" />
-        <t-dropdown-item disabled label="禁用菜单" :options="[]" />
-      </t-dropdown-menu>
+      <DisabledDemo />
     </tdesign-demo-block>
-    <div style="height: 300px" />
+    <div style="height: 40px" />
   </div>
 </template>
 
@@ -29,4 +22,5 @@
 import singleVue from './single.vue';
 import multipleVue from './multiple.vue';
 import treeVue from './tree.vue';
+import DisabledDemo from './disabled.vue';
 </script>
diff --git a/src/dropdown-menu/demos/multiple.vue b/src/dropdown-menu/demos/multiple.vue
index 7cf9b3f4..cf59cd9e 100644
--- a/src/dropdown-menu/demos/multiple.vue
+++ b/src/dropdown-menu/demos/multiple.vue
@@ -11,7 +11,7 @@
     />
     <t-dropdown-item
       v-model="value3"
-      label="三列多选"
+      label="最多四字项"
       :options="options"
       multiple
       options-layout="columns"
diff --git a/src/dropdown-menu/demos/single.vue b/src/dropdown-menu/demos/single.vue
index a9e8bf0a..0f5fbc6f 100644
--- a/src/dropdown-menu/demos/single.vue
+++ b/src/dropdown-menu/demos/single.vue
@@ -3,15 +3,15 @@
     <t-dropdown-item v-model="value1" label="菜单" :options="options" />
     <t-dropdown-item v-model="value2" label="菜单" :options="options" />
     <t-dropdown-item v-model="value3" label="菜单" :options="options" />
-    <t-dropdown-item v-model="value4" label="菜单" :options="options" />
+    <t-dropdown-item v-model="value4" label="两字菜单" :options="options" />
   </t-dropdown-menu>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const chineseMap = '一二三四五六七八九十';
-const emptyArr = new Array(8).fill(null);
+const chineseMap = '一二三四五六';
+const emptyArr = new Array(6).fill(null);
 const options = emptyArr.map((_, i) => ({
   title: `选项${chineseMap[i]}`,
   value: `option_${i}`,
diff --git a/src/dropdown-menu/demos/tree.vue b/src/dropdown-menu/demos/tree.vue
index d6b468aa..275454f3 100644
--- a/src/dropdown-menu/demos/tree.vue
+++ b/src/dropdown-menu/demos/tree.vue
@@ -1,6 +1,6 @@
 <template>
   <t-dropdown-menu>
-    <t-dropdown-item v-model="treeValue1" label="树形双列" :options="optionsT1" options-layout="tree" multiple />
+    <t-dropdown-item v-model="treeValue1" label="树型双列" :options="optionsT1" options-layout="tree" multiple />
     <t-dropdown-item
       v-model="treeValue2"
       label="选项最多六字超出1"


Test patch:
diff --git a/src/dropdown-menu/__test__/__snapshots__/demo.test.jsx.snap b/src/dropdown-menu/__test__/__snapshots__/demo.test.jsx.snap
index 41ab06ce..a6a5a48e 100644
--- a/src/dropdown-menu/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/dropdown-menu/__test__/__snapshots__/demo.test.jsx.snap
@@ -96,70 +96,276 @@ exports[`DropdownMenu > DropdownMenu demoContainerVue demo works fine 1`] = `
 
 exports[`DropdownMenu > DropdownMenu disabledVue demo works fine 1`] = `
 <div
-  class="tdesign-demo-dropdown-menu"
+  data-v-app=""
 >
   
   <div
-    class="t-dropdown-menu"
+    class="tdesign-demo-dropdown-menu"
+    data-v-3decac88=""
   >
+    
     <div
-      class="t-dropdown-menu__bar"
+      class="t-dropdown-menu space"
+      data-v-3decac88=""
     >
-      
       <div
-        class="t-dropdown-menu__item t-is-disabled"
+        class="t-dropdown-menu__bar"
       >
+        
         <div
-          class="t-dropdown-menu__title"
+          class="t-dropdown-menu__item t-is-disabled"
         >
-          禁用菜单
+          <div
+            class="t-dropdown-menu__title"
+          >
+            禁用
+          </div>
+          <svg
+            class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M11 6H5l3 4.5L11 6z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
         </div>
-        <svg
-          class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-dropdown-menu__item t-is-disabled"
         >
-          <path
-            d="M11 6H5l3 4.5L11 6z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <div
+            class="t-dropdown-menu__title"
+          >
+            禁用
+          </div>
+          <svg
+            class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M11 6H5l3 4.5L11 6z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-dropdown-menu__item t-is-disabled"
+        >
+          <div
+            class="t-dropdown-menu__title"
+          >
+            禁用
+          </div>
+          <svg
+            class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M11 6H5l3 4.5L11 6z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-dropdown-menu__item t-is-disabled"
+        >
+          <div
+            class="t-dropdown-menu__title"
+          >
+            禁用
+          </div>
+          <svg
+            class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M11 6H5l3 4.5L11 6z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        
       </div>
+      
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+      
+    </div>
+    
+  </div>
+  <div
+    class="tdesign-demo-dropdown-menu"
+    data-v-3decac88=""
+  >
+    
+    <div
+      class="t-dropdown-menu space"
+      data-v-3decac88=""
+    >
       <div
-        class="t-dropdown-menu__item"
+        class="t-dropdown-menu__bar"
       >
+        
         <div
-          class="t-dropdown-menu__title"
+          class="t-dropdown-menu__item t-is-disabled"
         >
-          禁用选项
+          <div
+            class="t-dropdown-menu__title"
+          >
+            禁用菜单
+          </div>
+          <svg
+            class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M11 6H5l3 4.5L11 6z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
         </div>
-        <svg
-          class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-dropdown-menu__item t-is-disabled"
         >
-          <path
-            d="M11 6H5l3 4.5L11 6z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <div
+            class="t-dropdown-menu__title"
+          >
+            禁用菜单
+          </div>
+          <svg
+            class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M11 6H5l3 4.5L11 6z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-dropdown-menu__item t-is-disabled"
+        >
+          <div
+            class="t-dropdown-menu__title"
+          >
+            禁用菜单
+          </div>
+          <svg
+            class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M11 6H5l3 4.5L11 6z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        
       </div>
       
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+      
     </div>
     
-    <!--v-if-->
-    <!--v-if-->
+  </div>
+  <div
+    class="tdesign-demo-dropdown-menu"
+    data-v-3decac88=""
+  >
+    
+    <div
+      class="t-dropdown-menu space"
+      data-v-3decac88=""
+    >
+      <div
+        class="t-dropdown-menu__bar"
+      >
+        
+        <div
+          class="t-dropdown-menu__item t-is-disabled"
+        >
+          <div
+            class="t-dropdown-menu__title"
+          >
+            禁用菜单
+          </div>
+          <svg
+            class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M11 6H5l3 4.5L11 6z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-dropdown-menu__item t-is-disabled"
+        >
+          <div
+            class="t-dropdown-menu__title"
+          >
+            禁用菜单
+          </div>
+          <svg
+            class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M11 6H5l3 4.5L11 6z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        
+      </div>
+      
+      <!--v-if-->
+      <!--v-if-->
+      
+    </div>
     
   </div>
-  <p>
-    禁用了序号是3的倍数的选项。
-  </p>
   
 </div>
 `;
@@ -255,7 +461,7 @@ exports[`DropdownMenu > DropdownMenu mobileVue demo works fine 1`] = `
   <p
     class="summary"
   >
-    向下弹出的菜单列表
+    菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。
   </p>
   <div
     class="tdesign-mobile-demo-block"
@@ -271,10 +477,6 @@ exports[`DropdownMenu > DropdownMenu mobileVue demo works fine 1`] = `
       单选下拉菜单
     </p>
     
-    <!-- &lt;t-dropdown-menu&gt;
-        &lt;t-dropdown-item :value="valueS1" label="菜单名称" :options="optionsN" @change="onChange" /&gt;
-        &lt;t-dropdown-item v-model="valueS2" label="菜单名称" :options="optionsC" /&gt;
-      &lt;/t-dropdown-menu&gt; -->
     <div
       class="t-dropdown-menu"
     >
@@ -354,7 +556,7 @@ exports[`DropdownMenu > DropdownMenu mobileVue demo works fine 1`] = `
           <div
             class="t-dropdown-menu__title"
           >
-            菜单
+            两字菜单
           </div>
           <svg
             class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
@@ -448,7 +650,7 @@ exports[`DropdownMenu > DropdownMenu mobileVue demo works fine 1`] = `
           <div
             class="t-dropdown-menu__title"
           >
-            三列多选
+            最多四字项
           </div>
           <svg
             class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
@@ -481,7 +683,7 @@ exports[`DropdownMenu > DropdownMenu mobileVue demo works fine 1`] = `
     <p
       class="tdesign-mobile-demo-block__summary"
     >
-      树形下拉菜单
+      树型下拉菜单
     </p>
     
     <div
@@ -497,7 +699,7 @@ exports[`DropdownMenu > DropdownMenu mobileVue demo works fine 1`] = `
           <div
             class="t-dropdown-menu__title"
           >
-            树形双列
+            树型双列
           </div>
           <svg
             class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
@@ -558,68 +760,279 @@ exports[`DropdownMenu > DropdownMenu mobileVue demo works fine 1`] = `
       下拉菜单状态
     </p>
     
+    
     <div
-      class="t-dropdown-menu"
+      class="tdesign-demo-dropdown-menu"
+      data-v-3decac88=""
     >
+      
       <div
-        class="t-dropdown-menu__bar"
+        class="t-dropdown-menu space"
+        data-v-3decac88=""
       >
-        
         <div
-          class="t-dropdown-menu__item t-is-disabled"
+          class="t-dropdown-menu__bar"
         >
+          
           <div
-            class="t-dropdown-menu__title"
+            class="t-dropdown-menu__item t-is-disabled"
           >
-            禁用菜单
+            <div
+              class="t-dropdown-menu__title"
+            >
+              禁用
+            </div>
+            <svg
+              class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M11 6H5l3 4.5L11 6z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </div>
-          <svg
-            class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+          <div
+            class="t-dropdown-menu__item t-is-disabled"
           >
-            <path
-              d="M11 6H5l3 4.5L11 6z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
+            <div
+              class="t-dropdown-menu__title"
+            >
+              禁用
+            </div>
+            <svg
+              class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M11 6H5l3 4.5L11 6z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
+          <div
+            class="t-dropdown-menu__item t-is-disabled"
+          >
+            <div
+              class="t-dropdown-menu__title"
+            >
+              禁用
+            </div>
+            <svg
+              class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M11 6H5l3 4.5L11 6z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
+          <div
+            class="t-dropdown-menu__item t-is-disabled"
+          >
+            <div
+              class="t-dropdown-menu__title"
+            >
+              禁用
+            </div>
+            <svg
+              class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M11 6H5l3 4.5L11 6z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
+          
         </div>
+        
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        
+      </div>
+      
+    </div>
+    <div
+      class="tdesign-demo-dropdown-menu"
+      data-v-3decac88=""
+    >
+      
+      <div
+        class="t-dropdown-menu space"
+        data-v-3decac88=""
+      >
         <div
-          class="t-dropdown-menu__item t-is-disabled"
+          class="t-dropdown-menu__bar"
         >
+          
           <div
-            class="t-dropdown-menu__title"
+            class="t-dropdown-menu__item t-is-disabled"
           >
-            禁用菜单
+            <div
+              class="t-dropdown-menu__title"
+            >
+              禁用菜单
+            </div>
+            <svg
+              class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M11 6H5l3 4.5L11 6z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </div>
-          <svg
-            class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+          <div
+            class="t-dropdown-menu__item t-is-disabled"
           >
-            <path
-              d="M11 6H5l3 4.5L11 6z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
+            <div
+              class="t-dropdown-menu__title"
+            >
+              禁用菜单
+            </div>
+            <svg
+              class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M11 6H5l3 4.5L11 6z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
+          <div
+            class="t-dropdown-menu__item t-is-disabled"
+          >
+            <div
+              class="t-dropdown-menu__title"
+            >
+              禁用菜单
+            </div>
+            <svg
+              class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M11 6H5l3 4.5L11 6z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
+          
         </div>
         
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        
       </div>
       
-      <!--v-if-->
-      <!--v-if-->
+    </div>
+    <div
+      class="tdesign-demo-dropdown-menu"
+      data-v-3decac88=""
+    >
+      
+      <div
+        class="t-dropdown-menu space"
+        data-v-3decac88=""
+      >
+        <div
+          class="t-dropdown-menu__bar"
+        >
+          
+          <div
+            class="t-dropdown-menu__item t-is-disabled"
+          >
+            <div
+              class="t-dropdown-menu__title"
+            >
+              禁用菜单
+            </div>
+            <svg
+              class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M11 6H5l3 4.5L11 6z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
+          <div
+            class="t-dropdown-menu__item t-is-disabled"
+          >
+            <div
+              class="t-dropdown-menu__title"
+            >
+              禁用菜单
+            </div>
+            <svg
+              class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M11 6H5l3 4.5L11 6z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
+          
+        </div>
+        
+        <!--v-if-->
+        <!--v-if-->
+        
+      </div>
       
     </div>
     
+    
   </div>
   <div
-    style="height: 300px;"
+    style="height: 40px;"
   />
 </div>
 `;
@@ -682,7 +1095,7 @@ exports[`DropdownMenu > DropdownMenu multipleVue demo works fine 1`] = `
       <div
         class="t-dropdown-menu__title"
       >
-        三列多选
+        最多四字项
       </div>
       <svg
         class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
@@ -906,7 +1319,7 @@ exports[`DropdownMenu > DropdownMenu singleVue demo works fine 1`] = `
       <div
         class="t-dropdown-menu__title"
       >
-        菜单
+        两字菜单
       </div>
       <svg
         class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"
@@ -947,7 +1360,7 @@ exports[`DropdownMenu > DropdownMenu treeVue demo works fine 1`] = `
       <div
         class="t-dropdown-menu__title"
       >
-        树形双列
+        树型双列
       </div>
       <svg
         class="t-icon t-icon-caret-down-small t-dropdown-menu__arrow"