usky-web-pad/src/components/oa-dropdown/index.vue

<template>
  <view>
    <view class="oa-dropdown" :class="dropdownShow ? 'show' : 'none'">
      <view class="content">
        <slot name="content"></slot>
      </view>
    </view>
    <view v-if="closeOnClickOverlay" class="oa-dropdown" :class="dropdownShow ? 'mask' : 'none'" @click="close()"> </view>
  </view>
</template>
<script setup>
import { onReady, onLoad, onShow, onNavigationBarButtonTap, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, watchEffect, toRefs } from "vue";

const emit = defineEmits(["close"]);
const props = defineProps({
  //显示隐藏
  dropdownShow: {
    type: Boolean,
    default: false,
  },
  //是否开启遮罩层关闭
  closeOnClickOverlay: {
    type: Boolean,
    default: true,
  },
});

const { dropdownShow, closeOnClickOverlay } = toRefs(props);

function close() {
  emit("close", false);
}
</script>
<style lang="scss" scoped>
.oa-dropdown {
  position: absolute;
  width: 100%;
  background-color: #fff;
  max-height: 0;
  overflow: hidden;
  z-index: 90;
  transition: max-height 0.4s ease-in-out;
  box-shadow: 0px 1px 2px 0px rgba(141, 141, 141, 0.4);

  &.show {
    max-height: 100%;
  }

  &.mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    height: 100%;
    z-index: 50;
  }

  .content {
    padding: 10px;
  }
}
</style>