feat(dropdown-menu): add multiple custom class support (#5099)

youzan · Nov 18, 2022 · 01a389c · 01a389c
1 parent f4c71d3
commit 01a389c
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 26 deletions.
diff --git a/packages/dropdown-item/index.ts b/packages/dropdown-item/index.ts
@@ -3,6 +3,7 @@ import { VantComponent } from '../common/component';
 import { Option } from './shared';
 
 VantComponent({
+  classes: ['item-title-class'],
   field: true,
 
   relation: useParent('dropdown-menu', function () {
@@ -84,7 +85,7 @@ VantComponent({
 
     onOptionTap(event: WechatMiniprogram.TouchEvent) {
       const { option } = event.currentTarget.dataset;
-      const { value } = (option as unknown) as Option;
+      const { value } = option as unknown as Option;
 
       const shouldEmitChange = this.data.value !== value;
       this.setData({ showPopup: false, value });

diff --git a/packages/dropdown-item/index.wxml b/packages/dropdown-item/index.wxml
@@ -2,7 +2,7 @@
 
 <view
   wx:if="{{ showWrapper }}"
-  class="{{ utils.bem('dropdown-item', direction) }}"
+  class="{{ utils.bem('dropdown-item', direction) }} custom-class"
   style="{{ wrapperStyle }}"
 >
   <van-popup
@@ -30,7 +30,7 @@
     >
       <view
         slot="title"
-        class="van-dropdown-item__title"
+        class="van-dropdown-item__title item-title-class"
         style="{{ item.value === value  ? 'color:' + activeColor : '' }}"
       >
         {{ item.text }}

diff --git a/packages/dropdown-menu/README.md b/packages/dropdown-menu/README.md
@@ -151,14 +151,14 @@ Page({
 
 ### DropdownItem Props
 
-| 参数        | 说明                   | 类型               | 默认值         |
-| ----------- | ---------------------- | ------------------ | -------------- |
-| value       | 当前选中项对应的 value | _number \| string_ | -              |
-| title       | 菜单项标题             | _string_           | 当前选中项文字 |
-| options     | 选项数组               | _Option[]_         | `[]`           |
-| disabled    | 是否禁用菜单           | _boolean_          | `false`        |
-| title-class | 标题额外类名           | _string_           | -              |
-| popup-style | 自定义弹出层样式       | _string_           | -              |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 当前选中项对应的 value | _number \| string_ | - |
+| title | 菜单项标题 | _string_ | 当前选中项文字 |
+| options | 选项数组 | _Option[]_ | `[]` |
+| disabled | 是否禁用菜单 | _boolean_ | `false` |
+| title-class | 标题额外类名，建议使用自定义样式 item-title-class 代替 | _string_ | - |
+| popup-style | 自定义弹出层样式 | _string_ | - |
 
 ### DropdownItem Events
 
@@ -186,8 +186,16 @@ Page({
 | value | 标识符                           | _number \| string_ |
 | icon  | 左侧[图标名称](#/icon)或图片链接 | _string_           |
 
-### 外部样式类
+### DropdownMenu 外部样式类
+
+| 类名                  | 说明         |
+| --------------------- | ------------ |
+| custom-class          | 根节点样式类 |
+| title-class `v1.10.7` | 选中项样式类 |
+
+### DropdownItem 外部样式类
 
-| 类名         | 说明         |
-| ------------ | ------------ |
-| custom-class | 根节点样式类 |
+| 类名                       | 说明         |
+| -------------------------- | ------------ |
+| custom-class `v1.10.7`     | 根节点样式类 |
+| item-title-class `v1.10.7` | 选项样式类   |
diff --git a/packages/dropdown-menu/index.ts b/packages/dropdown-menu/index.ts
@@ -6,6 +6,7 @@ let ARRAY: WechatMiniprogram.Component.TrivialInstance[] = [];
 
 VantComponent({
   field: true,
+  classes: ['title-class'],
 
   relation: useChildren('dropdown-item', function () {
     this.updateItemListData();

diff --git a/packages/dropdown-menu/index.wxml b/packages/dropdown-menu/index.wxml
@@ -10,7 +10,7 @@
     bind:tap="onTitleTap"
   >
     <view
-      class="{{ item.titleClass }} {{ utils.bem('dropdown-menu__title', { active: item.showPopup, down: item.showPopup === (direction === 'down') }) }}"
+      class="{{ item.titleClass }} {{ utils.bem('dropdown-menu__title', { active: item.showPopup, down: item.showPopup === (direction === 'down') }) }} title-class"
       style="{{ item.showPopup ? 'color:' + activeColor : '' }}"
     >
       <view class="van-ellipsis">

diff --git a/packages/dropdown-menu/test/__snapshots__/demo.spec.ts.snap b/packages/dropdown-menu/test/__snapshots__/demo.spec.ts.snap
@@ -23,7 +23,7 @@ exports[`should render demo and match snapshot 1`] = `
             bind:tap="onTitleTap"
           >
             <wx-view
-              class=" van-dropdown-menu__title"
+              class=" van-dropdown-menu__title title-class"
               style=""
             >
               <wx-view
@@ -41,7 +41,7 @@ exports[`should render demo and match snapshot 1`] = `
             bind:tap="onTitleTap"
           >
             <wx-view
-              class=" van-dropdown-menu__title"
+              class=" van-dropdown-menu__title title-class"
               style=""
             >
               <wx-view
@@ -80,7 +80,7 @@ exports[`should render demo and match snapshot 1`] = `
             bind:tap="onTitleTap"
           >
             <wx-view
-              class=" van-dropdown-menu__title"
+              class=" van-dropdown-menu__title title-class"
               style=""
             >
               <wx-view
@@ -98,7 +98,7 @@ exports[`should render demo and match snapshot 1`] = `
             bind:tap="onTitleTap"
           >
             <wx-view
-              class=" van-dropdown-menu__title"
+              class=" van-dropdown-menu__title title-class"
               style=""
             >
               <wx-view
@@ -139,7 +139,7 @@ exports[`should render demo and match snapshot 1`] = `
             bind:tap="onTitleTap"
           >
             <wx-view
-              class=" van-dropdown-menu__title"
+              class=" van-dropdown-menu__title title-class"
               style=""
             >
               <wx-view
@@ -157,7 +157,7 @@ exports[`should render demo and match snapshot 1`] = `
             bind:tap="onTitleTap"
           >
             <wx-view
-              class=" van-dropdown-menu__title"
+              class=" van-dropdown-menu__title title-class"
               style=""
             >
               <wx-view
@@ -196,7 +196,7 @@ exports[`should render demo and match snapshot 1`] = `
             bind:tap="onTitleTap"
           >
             <wx-view
-              class=" van-dropdown-menu__title van-dropdown-menu__title--down"
+              class=" van-dropdown-menu__title van-dropdown-menu__title--down title-class"
               style=""
             >
               <wx-view
@@ -214,7 +214,7 @@ exports[`should render demo and match snapshot 1`] = `
             bind:tap="onTitleTap"
           >
             <wx-view
-              class=" van-dropdown-menu__title van-dropdown-menu__title--down"
+              class=" van-dropdown-menu__title van-dropdown-menu__title--down title-class"
               style=""
             >
               <wx-view
@@ -253,7 +253,7 @@ exports[`should render demo and match snapshot 1`] = `
             bind:tap="onTitleTap"
           >
             <wx-view
-              class=" van-dropdown-menu__title"
+              class=" van-dropdown-menu__title title-class"
               style=""
             >
               <wx-view
@@ -271,7 +271,7 @@ exports[`should render demo and match snapshot 1`] = `
             bind:tap="onTitleTap"
           >
             <wx-view
-              class=" van-dropdown-menu__title"
+              class=" van-dropdown-menu__title title-class"
               style=""
             >
               <wx-view