vue封装一个从顶部滑出的浮层小组件, 原生和react都可以仿照做出来

本文链接：https://blog.csdn.net/yunchong_zhao/article/details/121289060

本文介绍如何在UI开发中使用FloatTop.vue组件，通过模板、脚本和样式实现一个可自定义的浮层效果，包括其结构、属性和使用示例。重点在于代码实现和简单原理讲解。

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

先看下效果哈，相信这种效果业务中还是比较常见的，
因为吧pdf最大只能上传5M的大小，所以稍微动下就要超过了，所以录制的时候我点的很快。将就着看吧。毕竟代码才是关键哈哈。效果就凑合着看
在这里插入图片描述
大部分情况下。ui组件会给我们封装好的，但有些还是得需要我们自己写了
其实当你了解了简单的原理之后其实还是很简单的就实现了呢
FloatTop.vue 组件。可以直接拿去使用哈

<template>
  <div class="container">
    <div class="content">
      <div class="slot-content" :class="[showMask ? 'show' : 'hide']">
        <slot></slot>
      </div>
    </div>
    <div class="mask" :class="[showMask ? 'show' : 'hide']" @click="handleChange"></div>
  </div>
</template>

<script>
export default {
  props: {
    showMask: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleChange() {
      this.$emit('change')
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  .content {
    position: relative;
    height: 0;
    z-index: 3;
    .slot-content {
      position: absolute;
      width: 100%;
      box-sizing: border-box;
      bottom: 0;
      background-color: white;
      border-radius: 0 0 10px 10px;
      overflow: hidden;
      transition: transform 0.2s ease-in-out;
      z-index: 9;
      padding: 20px;
      &.hide {
        transform: translateY(0%);
      }
      &.show {
        transform: translateY(100%);
      }
    }
  }
  .mask {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100vh;
    top: 0px;
    transition: all 0.2s linear;
    &.show {
      background-color: rgba(0, 0, 0, 0.5);
      pointer-events: inherit;
    }
    &.hide {
      background-color: rgba(0, 0, 0, 0);
      display: none;
    }
  }
}
</style>

我们使用的时候。
直接引入然后把你需要显示的内容放在组件中间就可以了

<template>
  <div id="app">
    <button @click="showMask = true">浮层</button>

    <float-top :showMask="showMask" @change="showMask = false"> 
      <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
      </div>
    </float-top>
  </div>
</template>


import FloatTop from "./components/FLoatTop.vue";
export default {
  components: {
    FloatTop,
  },
  data() {
    return {
      showMask: false
    }
  },
};