Sticker-footer弹出层布局

最新推荐文章于 2023-11-10 15:41:42 发布

原创最新推荐文章于 2023-11-10 15:41:42 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Sticker-footer

前端同时被 2 个专栏收录

9 篇文章

订阅专栏

Vue.js

3 篇文章

订阅专栏

本文介绍如何在Vue.js项目中实现Sticker-footer布局，用于创建点击弹出层的效果。通过简单的步骤，包括新建样式文件、引入到HTML并应用到div+css布局中，可以轻松实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端布局中，经常需要用到点击弹出层这种场景，Sticker-footer布局就派上用场了。
下面演示该场景用于在vue.js项目中。

1.新建base.js

.clearfix{
    display: inline-block;
}
.clearfix:after{
    display: block;
    content: ".";
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden;
}

2.将base.js引入到index.html中

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>search</title>
    <link rel="stylesheet" type="text/css" href="static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="static/css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="static/css/base.css">//在此引入
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3.在div+css中应用布局

 <div class="detail" v-show="detailShow">
       <div class="detail-wrapper clearfix">
       </div>
       <div class="detail-close" @click="hideDetail()">
          <i class="iconfont icon-close"></i>
       </div>
   </div>

.detail{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(7, 17, 27, 0.8);
    .detail-wrapper{
      min-height: 100%;
      width: 100%;
    }
    .detail-close{
      position: relative;
      width: 32px;
      height: 32px;
      margin: -64px auto;
      clear: both;
      font-size: 32px;
      .iconfont{
        &.icon-close{
          color: white;
          height: 64px;
          width: 64px;
        }
     }
   }
  }