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

先看下效果哈，相信这种效果业务中还是比较常见的，
因为吧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
    }
  },
};

简单好用
原创不易点个关注行不行 ^_

关注我。持续更新前端知识