vue高仿饿了么学习笔记(六)—— 详情弹窗 & Sticky footer

UI 图:

一、详情弹窗

1)新增 html 代码

复制代码
<!-- header.vue -->
<div class="header">
    <div class="content-wrapper">
      <!-- 省略已有内容 -->
      <div v-if="seller.supports" class="support-count" @click="showDetail"> <!-- 新增 clisk 事件,点击显示弹窗 -->
      </div>
    </div>
    <div class="bulletin-wrapper" @click="showDetail"> <!--公告 新增 click 事件,点击显示弹窗-->
    </div>
    <div class="background">
      <img :src="seller.avatar" alt="" width="100%" height="100%">
    </div>
    <!-- 新增 detail 通过 v-show 来控制显示隐藏 -->
    <div v-show="detailShow" class="detail">
      <div class="detail-wrapper clearfix">
        <div class="detail-main">
          <h1 class="name">{{ seller.name }}</h1>
        </div>
      </div>
      <div class="detail-close"> <!-- × 关闭按钮 -->
        <i class="icon-close"></i>
      </div>
    </div>
</div>
复制代码

2)新增 detail 变量 和 showDetail 方法

复制代码
// header.vue

export default {
  data() {
      return {
        detailShow: false // 新增 detailShow 注意 data 须是一个函数
      };
    },
    methods: {
      showDetail() { // 新增 showDetail 方法
        this.detailShow = true;
      }
    }  
}
复制代码

注意:组件的 data 必须是一个函数 参考 官网 或 vue组件data为什么必须是函数

 

二、Sticky Footer

意思就是,将 footer 固定在页面底部,可参考 sticky-footer的三种解决方案

此处,我们需要固定的是 “关闭按钮”,内容少的时候,显示在页面底部,内容多的时候,被内容撑到最底部。

我们用的是三种方案中的最后一种。

样式代码:

复制代码
.detail
  position: fixed
  left: 0
  top: 0
  width: 100%
  height: 100%
  background: rgba(7, 17, 27, .8)
  .detail-wrapper
    min-height: 100%
    width: 100%
    .detail-main
      margin-top: 64px
      padding-bottom: 64px
      .name
        line-height: 16px
        font-size: 16px
        text-align: center
        font-weight: 700
  .detail-close
    position: relative
    width: 32px
    height: 32px
    margin: -64px auto 0 auto
    clear: both
    font-size: 32px
复制代码

效果图:

 

posted @   狸子同学  阅读(436)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· 赶AI大潮:在VSCode中使用DeepSeek及近百种模型的极简方法
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
点击右上角即可分享
微信分享提示