uni-app 弹出层组件的实现

uni-app 弹出层组件的实现

以下是一个简单的 uni-app 弹出层组件的实现代码示例，它可以根据传递的属性来控制弹出层的显示和隐藏，以及控制弹出层的显示位置：

<template>
  <view
    class="overlay "
    v-if="visible"
    @click="close"
    :class="{
			'center' : position==='center' ,
			'top' : position==='top',
			'right' : position==='right',
			'bottom' : position==='bottom',
			'left' : position==='left',
			}"
  >
    <view
      class="modal"
      @click.stop
      :class="{
			'center-modal' : position==='center',
			'center-modal-fadein': position==='center',
			'top-modal' : position==='top',
			'top-modal-fadein': position==='top',
			'right-modal' : position==='right',
			'right-modal-fadein': position==='right',
			'bottom-modal' : position==='bottom',
			'bottom-modal-fadein': position==='bottom',
			'left-modal' : position==='left',
			'left-modal-fadein': position==='left',
			}"
    >
      <slot></slot>
    </view>
  </view>
</template>

<script>
  export default {
    name: "popup",
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      position: {
        type: String,
        default: "bottom",
      },
    },
    methods: {
      close() {
        this.$emit("close", false);
      },
    },
  };
</script>

<style scoped>
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
  }

  .modal {
    background-color: #fff;
    padding: 20px;
    display: flex;
    justify-content: center;
  }

  /* =========== 居中弹窗 =========== */
  .center {
    justify-content: center;
    align-items: center;
  }

  .center-modal {
    min-width: 50%;
    min-height: 100px;
    border-radius: 10px;
  }

  .center-modal-fadein {
    animation: opacity-fadein 500ms;
  }

  /* 透明度淡入动画 */
  @keyframes opacity-fadein {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 0.5;
    }

    100% {
      opacity: 1;
    }
  }

  /* =========== 底部弹窗 =========== */
  .bottom {
    justify-content: center;
    align-items: flex-end;
  }

  .bottom-modal {
    bottom: 0;
    width: 100%;
    min-height: 100px;
    border-radius: 10px 10px 0 0;
  }

  .bottom-modal-fadein {
    animation: bottom-top-fadein 500ms linear;
  }

  /* 自下向上淡入动画 */
  @keyframes bottom-top-fadein {
    0% {
      transform: translate(0, 100%);
    }

    100% {
      transform: none;
    }
  }

  /* =========== 顶部弹窗 =========== */
  .top {
    justify-content: center;
    align-items: flex-start;
  }

  .top-modal {
    top: 0;
    width: 100%;
    min-height: 100px;
    border-radius: 0 0 10px 10px;
  }

  .top-modal-fadein {
    animation: top-bottom-fadein 500ms linear;
  }

  /* 自上向下淡入动画 */
  @keyframes top-bottom-fadein {
    0% {
      transform: translate(0, -100%);
    }

    100% {
      transform: none;
    }
  }

  /* =========== 左侧弹窗 =========== */
  .left {
    justify-content: flex-start;
    align-items: center;
  }

  .left-modal {
    left: 0;
    height: 100%;
    min-width: 50%;
    max-width: 90%;
    border-radius: 0 10px 10px 0;
  }

  .left-modal-fadein {
    animation: left-right-fadein 500ms linear;
  }

  /* 自左向右淡入动画 */
  @keyframes left-right-fadein {
    0% {
      transform: translate(-100%, 0);
    }

    100% {
      transform: none;
    }
  }

  /* =========== 右侧弹窗 =========== */
  .right {
    justify-content: flex-end;
    align-items: center;
  }

  .right-modal {
    right: 0;
    height: 100%;
    min-width: 50%;
    max-width: 90%;
    border-radius: 10px 0 0 10px;
  }

  .right-modal-fadein {
    animation: right-left-fadein 500ms linear;
  }

  /* 自右向左淡入动画 */
  @keyframes right-left-fadein {
    0% {
      transform: translate(100%, 0);
    }

    100% {
      transform: none;
    }
  }
</style>

在使用此组件时，可以通过传递“visible”属性来控制弹出层的显示和隐藏，通过 position 属性控制弹出层的位置。可以在组件的插槽中添加内容。例如，以下代码将创建一个弹出层，当按钮被点击时显示：

<template>
  <view>
    <button @click="showModal">Show Modal</button>
    <popup
      :visible="modalVisible"
      position="bottom"
      @close="modalVisible = $event"
    >
      <view>Modal Title</view>
      <view>Modal content goes here...</view>
      <button @click="modalVisible = false">Close</button>
    </popup>
  </view>
</template>

<script>
  // 在根目录下的 components 文件夹添加的组件无需导入

  export default {
    data() {
      return {
        modalVisible: false,
      };
    },
    methods: {
      showModal() {
        this.modalVisible = true;
      },
    },
  };
</script>