封装 WBXpopup 组件

这是Popup组件基于微博小程序，需要改变标签，以及一写方法

支持四个方向抽屉，以及中间弹出功能

// 用法
<template>
  <wbx-view style="height: 100vh;">
 <!-- 对话框组件 -->
  <wbx-view>
    <wbx-text @click="openpup()">打开</wbx-text>
  </wbx-view>
    <WBXpopup
      ref="popupRef"
      positionType="center"
      popupWidth="300px"
      popupHeight="400px"
    >
      <template slot="popupContent">
        <wbx-view ref="drawer" style="padding: 16px;box-sizing: border-box; display: flex;flex-direction:column;justify-items: center;align-items: center;">
          <wbx-text style="font-size: 18px;height:26px;line-height: 26px;font-weight: 500;color:#000">我们仍在生成您的AI新身份</wbx-text>
          <wbx-view
            @click="guan()"
            style="width: 70px; height: 70px; border: 2px solid #000"
          ></wbx-view>
        </wbx-view>
      </template>
    </WBXpopup>
  </wbx-view>
</template>

<script>
/**
 * @type WBXAppOption
 */
import WBXpopup from "../../commpents/wbx-popup/index.vue"
const pageOptions = {
  data() {
    return {

    };
  },
  methods: {
    openpup() {
      this.$refs.popupRef.openFn();
    },
    guan() {
      this.$refs.popupRef.closeFn();
    },
  },
  components: {
    WBXpopup,//弹出框
  },
  wbox: {
    onLoad() { },
    onShow() {
      // 页面显示/切入前台时触发
    },
    onHide() {
      // 页面隐藏时触发
    },
    onUnload() {
      // 页面退出时触发
    },
  },
  mounted() { },
};
export default pageOptions;
</script>

<style></style>

  //封装的组件
<template>
  <wbx-view>
    <wbx-view
      v-if="showPopup"
      @click="closeFn()"
      style="
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0px;
        left: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        transition: all 0.5s ease;
        z-index: 1;
      "
    >
    <wbx-view :style="{width:popupWidth,height:popupHeight}" style=" transition: all 0.5s ease;z-index: 2; background-color: #fff;" v-if="positionType=='center'" >
        <slot name="popupContent"></slot>
      </wbx-view>
      <wbx-view :style="drawerStyle" v-else>
        <slot name="popupContent"></slot>
      </wbx-view>
    </wbx-view>
  </wbx-view>
</template>

<script>
/*
  openFn() 打开对话框
  closeFn() 关闭对话框
  positionType  从那边出来，抽屉的方向  left right bottom top center 
  popupWidth： 对话框的宽
  popupHeight： 对话框的高
*/
export default {
  data() {
    return {
      showPopup: false,
      isOpen: false,
    };
  },
  props: {
    positionType: {
      type: String,
      default: "right",
    },
    popupWidth: {
      type: String,
      default: "300px",
    },
    popupHeight: {
      type: String,
      default: "300px",
    },
  },
  computed: {
    drawerStyle() {
      const style = {
        transition: "all 0.5s",
        zIndex: 2,
        backgroundColor: "#fff",
        position: "fixed",
      };
      if (this.positionType === "left" || this.positionType === "right") {
        style.width = this.popupWidth;
        style.height = "100vh";
        style[this.positionType] = this.isOpen ? "0px" : `-${this.popupWidth}`;
      } else  {
        style.width = "100vw";
        style.height = this.popupHeight;
        style[this.positionType] = this.isOpen ? "0" : `-${this.popupHeight}`;
      } 
      return style;
    },
  },
  methods: {
    openFn() {
      this.showPopup = true;
      this.$nextTick(() => {
        setTimeout(() => {
          this.isOpen = true;
        }, 50);
      });
    },
    closeFn() {
      this.isOpen = false;
      setTimeout(() => {
        this.showPopup = false;
      }, 500);
    },
  },
};
</script>
<style></style>