blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(DropdownMenu): add @dropdown-menu-box-shadow var

Browse Source
This commit is contained in:
chenjiahan 2020-07-31 20:09:57 +08:00
parent 69ac602bc2
commit 6d0c54e8f4
5 changed files with 39 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/dropdown-menu/README.md
View File

@ -48,8 +48,16 @@ export default {
<van-dropdown-menu>
<van-dropdown-item v-model="value" :options="option" />
<van-dropdown-item title="Title" ref="item">
<van-switch-cell v-model="switch1" title="Title" />
<van-switch-cell v-model="switch2" title="Title" />
<van-cell center title="Title">
<template #right-icon>
<van-switch v-model="switch1" size="24" active-color="#ee0a24" />
</template>
</van-cell>
<van-cell center title="Title">
<template #right-icon>
<van-switch v-model="switch2" size="24" active-color="#ee0a24" />
</template>
</van-cell>
<div style="padding: 5px 16px;">
<van-button type="danger" block round @click="onConfirm">
Confirm
@ -86,7 +94,7 @@ export default {
Use `active-color` prop to custom active color of the title and options
```html
<van-dropdown-menu active-color="#ee0a24">
<van-dropdown-menu active-color="#1989fa">
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>

14
src/dropdown-menu/README.zh-CN.md
View File

@ -50,8 +50,16 @@ export default {
<van-dropdown-menu>
<van-dropdown-item v-model="value" :options="option" />
<van-dropdown-item title="筛选" ref="item">
<van-switch-cell v-model="switch1" title="包邮" />
<van-switch-cell v-model="switch2" title="团购" />
<van-cell center title="包邮">
<template #right-icon>
<van-switch v-model="switch1" size="24" active-color="#ee0a24" />
</template>
</van-cell>
<van-cell center title="团购">
<template #right-icon>
<van-switch v-model="switch2" size="24" active-color="#ee0a24" />
</template>
</van-cell>
<div style="padding: 5px 16px;">
<van-button type="danger" block round @click="onConfirm">
确认
@ -88,7 +96,7 @@ export default {
通过`active-color`属性可以自定义菜单标题和选项的选中态颜色
```html
<van-dropdown-menu active-color="#ee0a24">
<van-dropdown-menu active-color="#1989fa">
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>

18
src/dropdown-menu/demo/index.vue
View File

@ -11,8 +11,16 @@
<van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item :title="t('itemTitle')" ref="item">
<van-switch-cell v-model="switch1" :title="t('switchTitle1')" />
<van-switch-cell v-model="switch2" :title="t('switchTitle2')" />
<van-cell center :title="t('switchTitle1')">
<template #right-icon>
<van-switch v-model="switch1" size="24" :active-color="RED" />
</template>
</van-cell>
<van-cell center :title="t('switchTitle2')">
<template #right-icon>
<van-switch v-model="switch2" size="24" :active-color="RED" />
</template>
</van-cell>
<div style="padding: 5px 16px;">
<van-button
type="danger"
@ -29,7 +37,7 @@
</demo-block>
<demo-block :title="t('customActiveColor')">
<van-dropdown-menu active-color="#ee0a24">
<van-dropdown-menu :active-color="BLUE">
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
@ -52,6 +60,8 @@
</template>
<script>
import { RED, BLUE } from '../../utils/constant';
export default {
i18n: {
'zh-CN': {
@ -96,6 +106,8 @@ export default {
data() {
return {
RED,
BLUE,
switch1: true,
switch2: false,
value1: 0,

2
src/dropdown-menu/index.less
View File

@ -8,7 +8,7 @@
display: flex;
height: @dropdown-menu-height;
background-color: @dropdown-menu-background-color;
box-shadow: 0 2px 12px fade(@gray-7, 12);
box-shadow: @dropdown-menu-box-shadow;
&--opened {
z-index: @dropdown-item-z-index + 1;

1
src/style/var.less
View File

@ -329,6 +329,7 @@
// DropdownMenu
@dropdown-menu-height: 48px;
@dropdown-menu-background-color: @white;
@dropdown-menu-box-shadow: 0 2px 12px fade(@gray-7, 12);
@dropdown-menu-title-font-size: 15px;
@dropdown-menu-title-text-color: @text-color;
@dropdown-menu-title-active-text-color: @red;