vue移动端项目vant组件库之popup

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>

效果