blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-05 19:41:45 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
landluck 2022-11-18 10:52:52 +08:00 committed by GitHub
parent f4c71d3d56
commit 01a389c58b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 36 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/dropdown-item/index.ts
View File

@ -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 });

4
packages/dropdown-item/index.wxml
View File

@ -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 }}

32
packages/dropdown-menu/README.md
View File

@ -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 | 根节点样式类 |
| 类名 | 说明 |
| --------------------- | ------------ |
| custom-class | 根节点样式类 |
| title-class `v1.10.7` | 选中项样式类 |
### DropdownItem 外部样式类
| 类名 | 说明 |
| -------------------------- | ------------ |
| custom-class `v1.10.7` | 根节点样式类 |
| item-title-class `v1.10.7` | 选项样式类 |

1
packages/dropdown-menu/index.ts
View File

@ -6,6 +6,7 @@ let ARRAY: WechatMiniprogram.Component.TrivialInstance[] = [];
VantComponent({
field: true,
classes: ['title-class'],
relation: useChildren('dropdown-item', function () {
this.updateItemListData();

2
packages/dropdown-menu/index.wxml
View File

@ -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">

20
packages/dropdown-menu/test/__snapshots__/demo.spec.ts.snap
View File

@ -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