zhibo/unpackage/dist/dev/mp-weixin/components/px-popup-bottom/px-popup-bottom.js

"use strict";
const common_vendor = require("../../common/vendor.js");
const _sfc_main = {
  props: {
    title: {
      //标题
      type: String,
      default: ""
    },
    fontweight: {
      type: [String, Number],
      default: "normal"
    },
    visible: {
      //隐藏显示标识
      type: Boolean,
      default: false
    },
    maxHeight: {
      //内容区域最大高度
      type: [String, Number],
      default: "75%"
    },
    radius: {
      //顶部圆角
      type: [String, Number],
      default: "0"
    },
    animaTime: {
      //弹窗动画时间
      type: Number,
      default: 0.2
    },
    bottom: {
      //离底部距离
      type: [String, Number],
      default: 0
    },
    bgColor: {
      type: [String],
      default: "#ffffff"
    },
    zindex: {
      type: [String, Number],
      default: 1e3
    },
    maskZindex: {
      type: [String, Number],
      default: 999
    },
    always: {
      //是否每次打开都重新计算内容高度
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      height: 0,
      PopHeight: 0,
      cotMaxHeight: "",
      isAnimaStart: false,
      rpxRate: "",
      cotRadius: 0
      // closeIcon: iconClose
    };
  },
  watch: {
    visible(newval) {
      this.isAnimaStart = true;
      setTimeout(() => {
        this.isAnimaStart = false;
      }, this.animaTime * 1e3);
      if (newval && this.height === 0) {
        if (this.PopHeight === 0 || this.always) {
          this.setContViewHeight();
        } else {
          this.height = this.PopHeight;
        }
        this.$emit("open");
      } else {
        this.height = 0;
      }
      this.show = newval;
    },
    maxHeight: {
      handler(newval) {
        this.cotMaxHeight = this.unitCheck(newval);
      },
      immediate: true
    },
    radius: {
      handler(newval) {
        this.cotRadius = this.unitCheck(newval);
      },
      immediate: true
    }
  },
  created() {
    this.rpxRate = this.getRpxRate();
  },
  mounted() {
    this.$nextTick(() => {
    });
  },
  methods: {
    onClose() {
      this.$emit("update:visible", false);
      this.$emit("close");
    },
    //触底
    onScrollToLower(e) {
      this.$emit("reachBottom");
    },
    getRpxRate() {
      let res = common_vendor.index.getWindowInfo();
      let width = res.windowWidth;
      let rate = 750 / width;
      return rate;
    },
    unitCheck(value) {
      const val = String(value);
      if (!val.includes("px") && !val.includes("%")) {
        return `${val}rpx`;
      }
      return val;
    },
    preventTouch(el) {
      el.addEventListener("touchmove", function(e) {
        e.stopPropagation();
      }, {
        passive: false
      });
    },
    setBodyOverFlow(val) {
      document.body.style.overflow = val;
    },
    //设置内容区域高度
    async setContViewHeight() {
      let data = await this.computeHeight();
      this.height = data.height + (this.title ? 100 / parseFloat(this.rpxRate) : 0);
      this.PopHeight = this.height;
    },
    //计算内容区域高度
    computeHeight() {
      return new Promise((resolve) => {
        this.$nextTick(() => {
          const query = common_vendor.index.createSelectorQuery().in(this);
          query.select("#popup_content").boundingClientRect((data) => {
            resolve(data);
          }).exec();
        });
      });
    }
  }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return {
    a: $props.maskZindex,
    b: $props.bottom + "rpx",
    c: $data.show,
    d: common_vendor.o((...args) => $options.onClose && $options.onClose(...args)),
    e: common_vendor.o(() => {
    }),
    f: common_vendor.t($props.title),
    g: $props.fontweight,
    h: common_vendor.o((...args) => $options.onClose && $options.onClose(...args)),
    i: $props.title,
    j: $data.isAnimaStart ? 1 : "",
    k: common_vendor.o((...args) => $options.onScrollToLower && $options.onScrollToLower(...args)),
    l: common_vendor.n({
      show: $data.show
    }),
    m: common_vendor.o(() => {
    }),
    n: common_vendor.o(() => {
    }),
    o: $props.bgColor,
    p: `${$data.height}px`,
    q: $data.show ? $data.cotMaxHeight : 0,
    r: $data.cotRadius,
    s: $data.cotRadius,
    t: `all ${$props.animaTime}s ease-in`,
    v: $props.bottom + "rpx",
    w: $props.zindex,
    x: common_vendor.n({
      "popup-show": $data.show
    }),
    y: common_vendor.o(() => {
    }),
    z: common_vendor.o(() => {
    }),
    A: $props.zindex
  };
}
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4fac7f82"]]);
wx.createComponent(Component);