[breaking change] Popup: add lockScroll instead of lockOnScroll & preventScroll (#688)

This commit is contained in:
neverland
2018-03-14 11:07:48 +08:00
committed by GitHub
parent 7d3768591f
commit d36dd61bc9
12 changed files with 33 additions and 61 deletions

View File

@@ -2,21 +2,19 @@
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-button @click="show1 = true">{{ $t('button1') }}</van-button>
<van-popup v-model="show1" prevent-scroll>{{ $t('content') }}</van-popup>
<van-popup v-model="show1">{{ $t('content') }}</van-popup>
</demo-block>
<demo-block :title="$t('position')">
<van-button @click="show2 = true;">{{ $t('button2') }}</van-button>
<van-popup v-model="show2" position="bottom" prevent-scroll>
<van-popup v-model="show2" position="bottom">
<van-tabs>
<van-tab class="custom-pane" title="Tab1">
<ul class="scroller">
<li v-for="i in 30" :key="i" class="list-item">{{ i }} item item item</li>
</ul>
<van-tab title="Tab1">
<van-cell v-for="i in 20" :key="i" :title="`Item ${ i }`" />
</van-tab>
<van-tab class="custom-pane" title="Tab2">
<p class="long-text">Lorem ipsum dolor sit amet, quis interdum et sollicitudin consectetuer scelerisque, gravida nulla consequatur dis mauris non morbi, dictum leo enim elementum ac wisi nullam, nam orci erat. Ultrices est. Nunc penatibus vel varius odio. Ullamcorper placerat amet amet sed, urna tempor, elit elit at. Eget congue. Sed proin metus sapien libero, pulvinar ut, ut aenean fermentum magna placerat dapibus voluptas, sed at lacinia pede fermentum rutrum et. Vitae nulla sapien vel in hac felis, montes in donec nulla eu volutpat augue.</p>
<van-tab title="Tab2">
Lorem ipsum dolor sit amet, quis interdum et sollicitudin consectetuer scelerisque, gravida nulla consequatur dis mauris non morbi, dictum leo enim elementum ac wisi nullam, nam orci erat. Ultrices est. Nunc penatibus vel varius odio. Ullamcorper placerat amet amet sed, urna tempor, elit elit at. Eget congue. Sed proin metus sapien libero, pulvinar ut, ut aenean fermentum magna placerat dapibus voluptas, sed at lacinia pede fermentum rutrum et. Vitae nulla sapien vel in hac felis, montes in donec nulla eu volutpat augue.
</van-tab>
</van-tabs>
</van-popup>
@@ -89,6 +87,8 @@ export default {
<style lang="postcss">
.demo-popup {
height: 10000px;
.van-button {
margin: 10px 0 10px 15px;
}
@@ -107,20 +107,15 @@ export default {
}
.van-tabs__content {
height: 166px;
height: 156px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
.list-item {
padding: 10px 10px;
&:not(:last-child) {
border-bottom: 1px solid #f9f9f9;
}
}
.long-text {
padding: 10px;
line-height: 1.4;
color: #666;
}
}
.van-tab__pane:not(:first-child) {
padding: 10px;
line-height: 1.4;
color: #666;
}
&--top {