vue 全屏弹窗（从底部上滑出现）

最新推荐文章于 2025-07-31 13:49:45 发布

转载

最新推荐文章于 2025-07-31 13:49:45 发布 · 8k 阅读

8 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/axstone/p/10647501.html

文章标签：

#javascript #前端 #python #ViewUI

本文介绍如何在Vue项目中创建一个从底部上滑出现的全屏弹窗，涉及template、js和scss的使用。详细步骤包括在模板中定义组件结构，JavaScript中处理显示逻辑，以及用SASS编写相关样式。

使用

<full-screen-dialog :visible.sync="dialog.visible" title="详情" class="dialog-middle" @close="close">
　　<div>弹窗中间内容</div>

  <div slot="footer"></div>
</full-screen-dialog>

1.template部分

<template>
  <transition name="fullscreen" @after-enter="afterEnter"
              @after-leave="afterLeave">//动画
    <div v-if="visible" class="fullscreen-dialog-wrapper" >