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): content max height (#4609)

Browse Source
This commit is contained in:
neverland 2019-09-27 17:41:54 +08:00 committed by GitHub
parent b8daee5551
commit ffdb823117
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/dropdown-item/index.less
View File

@ -28,6 +28,7 @@
&__content { &__content {
position: absolute; position: absolute;
max-height: @dropdown-menu-content-max-height;
} }
&__icon { &__icon {

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

@ -2,84 +2,40 @@
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-dropdown-menu> <van-dropdown-menu>
<van-dropdown-item <van-dropdown-item v-model="value1" :options="option1" />
v-model="value1" <van-dropdown-item v-model="value2" :options="option2" />
:options="option1"
/>
<van-dropdown-item
v-model="value2"
:options="option2"
/>
</van-dropdown-menu> </van-dropdown-menu>
</demo-block> </demo-block>
<demo-block :title="$t('customContent')"> <demo-block :title="$t('customContent')">
<van-dropdown-menu> <van-dropdown-menu>
<van-dropdown-item <van-dropdown-item v-model="value1" :options="option1" />
v-model="value1" <van-dropdown-item :title="$t('itemTitle')" ref="item">
:options="option1" <van-switch-cell v-model="switch1" :title="$t('switchTitle1')" />
/> <van-switch-cell v-model="switch2" :title="$t('switchTitle2')" />
<van-dropdown-item <van-button type="info" block @click="onConfirm">{{ $t('confirm') }}</van-button>
:title="$t('itemTitle')"
ref="item"
>
<van-switch-cell
v-model="switch1"
:title="$t('switchTitle1')"
/>
<van-switch-cell
v-model="switch2"
:title="$t('switchTitle2')"
/>
<van-button
type="info"
block
@click="onConfirm"
>
{{ $t('confirm') }}
</van-button>
</van-dropdown-item> </van-dropdown-item>
</van-dropdown-menu> </van-dropdown-menu>
</demo-block> </demo-block>
<demo-block :title="$t('customActiveColor')"> <demo-block :title="$t('customActiveColor')">
<van-dropdown-menu active-color="#ee0a24"> <van-dropdown-menu active-color="#ee0a24">
<van-dropdown-item <van-dropdown-item v-model="value1" :options="option1" />
v-model="value1" <van-dropdown-item v-model="value2" :options="option2" />
:options="option1"
/>
<van-dropdown-item
v-model="value2"
:options="option2"
/>
</van-dropdown-menu> </van-dropdown-menu>
</demo-block> </demo-block>
<demo-block :title="$t('expandDirection')"> <demo-block :title="$t('expandDirection')">
<van-dropdown-menu direction="up"> <van-dropdown-menu direction="up">
<van-dropdown-item <van-dropdown-item v-model="value1" :options="option1" />
v-model="value1" <van-dropdown-item v-model="value2" :options="option2" />
:options="option1"
/>
<van-dropdown-item
v-model="value2"
:options="option2"
/>
</van-dropdown-menu> </van-dropdown-menu>
</demo-block> </demo-block>
<demo-block :title="$t('disableMenu')"> <demo-block :title="$t('disableMenu')">
<van-dropdown-menu> <van-dropdown-menu>
<van-dropdown-item <van-dropdown-item v-model="value1" disabled :options="option1" />
v-model="value1" <van-dropdown-item v-model="value2" disabled :options="option2" />
disabled
:options="option1"
/>
<van-dropdown-item
v-model="value2"
disabled
:options="option2"
/>
</van-dropdown-menu> </van-dropdown-menu>
</demo-block> </demo-block>
</demo-section> </demo-section>
@ -104,7 +60,7 @@ export default {
option2: [ option2: [
{ text: '默认排序', value: 'a' }, { text: '默认排序', value: 'a' },
{ text: '好评排序', value: 'b' }, { text: '好评排序', value: 'b' },
{ text: '销量排序', value: 'c' }, { text: '销量排序', value: 'c' }
] ]
}, },
'en-US': { 'en-US': {
@ -123,7 +79,7 @@ export default {
option2: [ option2: [
{ text: 'Option A', value: 'a' }, { text: 'Option A', value: 'a' },
{ text: 'Option B', value: 'b' }, { text: 'Option B', value: 'b' },
{ text: 'Option C', value: 'c' }, { text: 'Option C', value: 'c' }
] ]
} }
}, },

1
src/style/var.less
View File

@ -273,6 +273,7 @@
@dropdown-menu-title-padding: 0 @padding-xs; @dropdown-menu-title-padding: 0 @padding-xs;
@dropdown-menu-title-line-height: 18px; @dropdown-menu-title-line-height: 18px;
@dropdown-menu-option-active-color: @blue; @dropdown-menu-option-active-color: @blue;
@dropdown-menu-content-max-height: 80%;
// Field // Field
@field-label-width: 90px; @field-label-width: 90px;