feat: migrate DropdownMenu

components.js

@@ -57,4 +57,6 @@ module.exports = [
   'search',
   'stepper',
   'uploader',
+  'dropdown-menu',
+  'dropdown-item',
 ];

docs/markdown/changelog-v3.zh-CN.md

@@ -44,6 +44,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 - Checkbox
 - CheckboxGroup
 - DatetimePicker
+- DropdownItem
 - Field
 - Radio
 - RadioGroup

src/dropdown-item/index.js

@@ -17,9 +17,9 @@ export default createComponent({
   mixins: [PortalMixin({ ref: 'wrapper' }), ChildrenMixin('vanDropdownMenu')],
 
   props: {
-    value: null,
     title: String,
     disabled: Boolean,
+    modelValue: null,
     titleClass: String,
     options: {
       type: Array,
@@ -31,6 +31,8 @@ export default createComponent({
     },
   },
 
+  emits: ['open', 'opened', 'close', 'closed', 'change', 'update:modelValue'],
+
   data() {
     return {
       transition: true,
@@ -46,7 +48,7 @@ export default createComponent({
       }
 
       const match = this.options.filter(
-        (option) => option.value === this.value
+        (option) => option.value === this.modelValue
       );
       return match.length ? match[0].text : '';
     },
@@ -98,6 +100,10 @@ export default createComponent({
         event.stopPropagation();
       }
     },
+
+    onTogglePopup(show) {
+      this.showPopup = show;
+    },
   },
 
   render() {
@@ -112,7 +118,7 @@ export default createComponent({
     } = this.parent;
 
     const Options = this.options.map((option) => {
-      const active = option.value === this.value;
+      const active = option.value === this.modelValue;
       return (
         <Cell
           clickable
@@ -124,8 +130,8 @@ export default createComponent({
           onClick={() => {
             this.showPopup = false;
 
-            if (option.value !== this.value) {
-              this.$emit('input', option.value);
+            if (option.value !== this.modelValue) {
+              this.$emit('update:modelValue', option.value);
               this.$emit('change', option.value);
             }
           }}
@@ -154,7 +160,7 @@ export default createComponent({
           onClick={this.onClickWrapper}
         >
           <Popup
-            vModel={this.showPopup}
+            show={this.showPopup}
             overlay={overlay}
             class={bem('content')}
             position={direction === 'down' ? 'top' : 'bottom'}
@@ -169,9 +175,10 @@ export default createComponent({
               this.showWrapper = false;
               this.$emit('closed');
             }}
+            {...{ 'onUpdate:modelValue': this.onTogglePopup }}
           >
             {Options}
-            {this.slots('default')}
+            {this.$slots.default?.()}
           </Popup>
         </div>
       </div>

src/dropdown-menu/index.js

@@ -117,7 +117,7 @@ export default createComponent({
           style={{ color: item.showPopup ? this.activeColor : '' }}
         >
           <div class="van-ellipsis">
-            {item.slots('title') || item.displayTitle}
+            {item.$slots.title ? item.$slots.title() : item.displayTitle}
           </div>
         </span>
       </div>
@@ -132,7 +132,7 @@ export default createComponent({
         >
           {Titles}
         </div>
-        {this.slots('default')}
+        {this.$slots.default?.()}
       </div>
     );
   },

vant.config.js

@@ -188,10 +188,10 @@ module.exports = {
                 path: 'dialog',
                 title: 'Dialog 弹出框',
               },
-              // {
-              //   path: 'dropdown-menu',
-              //   title: 'DropdownMenu 下拉菜单',
-              // },
+              {
+                path: 'dropdown-menu',
+                title: 'DropdownMenu 下拉菜单',
+              },
               {
                 path: 'loading',
                 title: 'Loading 加载',
@@ -522,10 +522,10 @@ module.exports = {
                 path: 'dialog',
                 title: 'Dialog',
               },
-              // {
-              //   path: 'dropdown-menu',
-              //   title: 'DropdownMenu',
-              // },
+              {
+                path: 'dropdown-menu',
+                title: 'DropdownMenu',
+              },
               {
                 path: 'loading',
                 title: 'Loading',