vue移动端项目vant组件库之popup
<template>
<div>
<van-button type="primary" @click="show = true">打开弹出层</van-button>
<!--
position top bottom right left 默认中间
style 直接配置样式 一般用于配置 宽、高、阴影等
round 圆角 默认的圆角有点大 可以在 style中自行设置
overlay 是否显示遮罩层 默认显示 一般不做设置
overlay-class 自定义遮罩层类名 少用
overlay-style 自定义遮罩层样式 少用
duration 开关动画时长 单位秒 number or string 少用
lock-scroll 锁定背景滚动 默认锁定 少用 一般都是锁定
lazy-render 是否在显示弹层时才渲染节点 默认 true 少用 一般都是懒加载
close-on-popstate 是否在页面回退时自动关闭 默认 false 一般不做处理
close-on-click-overlay 是否在点击遮罩层后关闭 默认true 一般改为 false
常用 特别是带有交互的弹出层 一般点击遮罩层不允许关闭 可能是用户误触
closeable 是否显示关闭图标 看场景更改 默认false
close-icon 关闭图标
close-icon-position 图标位置 默认top-right top-left bottom-left bottom-right
transition class样式类名 可自定义弹出层动画
get-container 指定挂载的父节点
safe-area-inset-bottom 底部安全适配
-->
<van-popup v-model="show" round id="popup" @close="clearPopup">
<div class="pd30 box" ref='pop'>
<div>
ref 的使用
当弹出层有滚动条时 每次打开希望 滚动条在顶部 可以在关闭时把滚动条 scrollTop 设置为 0
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
用户打开了弹出层</div>
</van-popup>
</div>
</template>
<script>
import {
Popup, Button } from "vant";
export default {
components: {
vanPopup: Popup,
vanButton: Button,
},
data() {
return {
show: false,
};
},
methods:{
clearPopup(){
this.$refs.pop.scrollTop = 0
}
}
};
</script>
<style lang="scss" scoped>
.box{
height: 100px;
overflow-y: scroll;
}
</style>
效果
