customPopup.nvue 746 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <view class="popUpContainer" v-if="isShow" @click="closePop">
  3. <view class="popUpMaskbox" @click.stop="">
  4. <slot></slot>
  5. </view>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. name: 'customPopup',
  11. props: {
  12. isShow: {
  13. type: Boolean,
  14. default: false
  15. }
  16. },
  17. methods: {
  18. closePop() {
  19. this.$emit('closePop')
  20. }
  21. }
  22. }
  23. </script>
  24. <style>
  25. .popUpContainer {
  26. position: fixed;
  27. left: 0;
  28. right: 0;
  29. bottom: 0;
  30. top: 0;
  31. background-color: rgba(0, 0, 0, 0.5);
  32. }
  33. .popUpMaskbox {
  34. position: absolute;
  35. bottom: 0;
  36. left: 0;
  37. right: 0;
  38. background-color: #ffffff;
  39. border-top-left-radius: 24rpx;
  40. border-top-right-radius: 24rpx;
  41. padding-top: 30rpx;
  42. padding-bottom: 40rpx;
  43. padding-left: 30rpx;
  44. padding-right: 30rpx;
  45. }
  46. </style>