[bugfix] DropdownMenu: incorrect style when inside NavBar (#4098)

src/dropdown-item/index.js

@@ -82,6 +82,7 @@ export default createComponent({
           key={option.value}
           icon={option.icon}
           title={option.text}
+          class={bem('option')}
           style={{ color: active ? activeColor : '' }}
           onClick={() => {
             this.showPopup = false;

src/dropdown-item/index.less

@@ -6,6 +6,10 @@
   left: 0;
   overflow: hidden;
 
+  &__option {
+    text-align: left;
+  }
+
   &--up {
     top: 0;
   }

src/dropdown-menu/index.less

@@ -35,11 +35,13 @@
     padding: @dropdown-menu-title-padding;
     color: @dropdown-menu-title-text-color;
     font-size: @dropdown-menu-title-font-size;
+    line-height: @dropdown-menu-title-line-height;
 
     &::after {
       position: absolute;
-      top: 3px;
+      top: 50%;
       right: -4px;
+      margin-top: -5px;
       border: 3px solid;
       border-color: transparent transparent currentColor currentColor;
       transform: rotate(-45deg);
@@ -49,7 +51,7 @@
 
     &--down {
       &::after {
-        top: 7px;
+        margin-top: -1px;
         transform: rotate(135deg);
       }
     }

src/dropdown-menu/test/__snapshots__/index.spec.js.snap

@@ -7,10 +7,10 @@ exports[`click option 1`] = `
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-overlay" style="z-index: 2011; animation-duration: 0.2s; position: absolute;" name="van-fade"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2012;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable" style="">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="">
         <div class="van-cell__title"><span>A</span></div>
       </div>
-      <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>B</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
             <!----></i></div>
@@ -29,12 +29,12 @@ exports[`close-on-click-outside 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
@@ -87,12 +87,12 @@ exports[`disable close-on-click-outside 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
@@ -118,13 +118,13 @@ exports[`render option icon 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);"><i class="van-icon van-icon-success van-cell__left-icon">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);"><i class="van-icon van-icon-success van-cell__left-icon">
           <!----></i>
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable"><i class="van-icon van-icon-success van-cell__left-icon">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option"><i class="van-icon van-icon-success van-cell__left-icon">
           <!----></i>
         <div class="van-cell__title"><span>B</span></div>
       </div>
@@ -142,12 +142,12 @@ exports[`show dropdown item 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
@@ -164,24 +164,24 @@ exports[`show dropdown item 2`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
@@ -195,24 +195,24 @@ exports[`show dropdown item 3`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>

src/style/var.less

@@ -258,6 +258,7 @@
 @dropdown-menu-title-text-color: @text-color;
 @dropdown-menu-title-disabled-text-color: @gray-dark;
 @dropdown-menu-title-padding: 0 @padding-xs;
+@dropdown-menu-title-line-height: 18px;
 
 // Field
 @field-label-width: 90px;