<template>
<div class="page">
<van-form validate-first
@submit="onSubmit">
<div class="box">
顶部
</div>
<van-cell is-link
@click="showPopup">展示弹出层</van-cell>
<van-popup v-model="show"
closeable
position="bottom"
:style="{ height: '30%' }"
get-container="body">内容</van-popup>
<!-- 提交 -->
<div style="margin: 16px;">
<van-button round
block
type="info"
native-type="submit">
提交
</van-button>
</div>
</van-form>
</div>
</template>
<script>
import { Form, Popup, Button, Cell } from 'vant'
export default {
components: {
[Form.name]: Form,
[Popup.name]: Popup,
[Button.name]: Button,
[Cell.name]: Cell
},
data () {
return {
show: false
}
},
methods: {
onSubmit (values) {
console.log('submit', values)
},
showPopup () {
this.show = true
}
}
}
</script>
<style lang="scss" scoped>
.box{
height: 1500px;
}
</style>