list item selection sheet supports large size

This commit is contained in:
MaysWind
2023-06-06 01:01:24 +08:00
parent a5e5389d6c
commit 8d68dcabb5
@@ -1,6 +1,6 @@
<template> <template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" <f7-sheet swipe-to-close swipe-handler=".swipe-handler"
:class="{ 'list-item-selection-huge-sheet': hugeListItemRows }" :opened="show" :class="heightClass" :opened="show"
@sheet:open="onSheetOpen" @sheet:closed="onSheetClosed"> @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar> <f7-toolbar>
<div class="swipe-handler"></div> <div class="swipe-handler"></div>
@@ -57,8 +57,14 @@ export default {
} }
}, },
computed: { computed: {
hugeListItemRows() { heightClass() {
return this.items.length > 10; if (this.items.length > 10) {
return 'list-item-selection-huge-sheet';
} else if (this.items.length > 6) {
return 'list-item-selection-large-sheet';
} else {
return '';
}
} }
}, },
methods: { methods: {
@@ -133,6 +139,10 @@ export default {
<style> <style>
@media (min-height: 630px) { @media (min-height: 630px) {
.list-item-selection-large-sheet {
height: 310px;
}
.list-item-selection-huge-sheet { .list-item-selection-huge-sheet {
height: 400px; height: 400px;
} }