animate-popup/animate-popup.js

基于vant4的vue3弹窗，拥有ios16的沉浸式效果！

import { defineComponent as r, computed as m, onMounted as f, watch as y, resolveComponent as _, openBlock as v, createElementBlock as h, createVNode as b, unref as d, isRef as g, normalizeStyle as u, withCtx as S, createElementVNode as l, normalizeClass as w, toDisplayString as x, renderSlot as C, pushScopeId as B, popScopeId as I } from "vue";
const k = (e, s) => {
  const n = e.__vccOpts || e;
  for (const [p, t] of s)
    n[p] = t;
  return n;
}, A = (e) => (B("data-v-1668d6fb"), e = e(), I(), e), E = { class: "popup-main" }, L = /* @__PURE__ */ A(() => /* @__PURE__ */ l("div", { class: "pt-16" }, null, -1)), P = r({
  name: "AnimatePopup"
}), z = /* @__PURE__ */ Object.assign(P, {
  props: {
    isShow: {
      type: Boolean,
      default: !1
    },
    height: {
      type: String,
      default: "96vh"
    },
    title: {
      type: String,
      default: ""
    },
    // 是否开启缩放交互
    isScaleAni: {
      type: Boolean,
      default: !0
    }
  },
  emits: ["update:isShow"],
  setup(e, { emit: s }) {
    const n = e, p = n.isScaleAni ? {
      backgroundColor: "transparent"
    } : {}, t = m({
      get() {
        return n.isShow;
      },
      set(a) {
        s("update:isShow", a);
      }
    });
    return f(() => {
      let a = document.getElementById("app");
      const o = document.getElementsByTagName("body")[0];
      y(t, (c) => {
        n.isScaleAni && (c ? (a.classList.add("app-scale-class"), o.classList.add("body-scale-class")) : (a.classList.remove("app-scale-class"), o.classList.remove("body-scale-class")));
      });
    }), (a, o) => {
      const c = _("van-popup");
      return v(), h("div", null, [
        b(c, {
          class: "dialog-scale-popup",
          show: d(t),
          "onUpdate:show": o[0] || (o[0] = (i) => g(t) ? t.value = i : null),
          closeable: "",
          round: "",
          "safe-area-inset-bottom": "",
          style: u({ height: e.height }),
          position: "bottom",
          onClickCloseIcon: o[1] || (o[1] = (i) => t.value = !1),
          teleport: "body",
          "overlay-style": d(p)
        }, {
          default: S(() => [
            l("div", E, [
              L,
              l("div", {
                class: w(["tc fz-16 fwb text-333", e.title ? "pb-12 pt-10" : "pt-12 pb-16"])
              }, x(e.title), 3),
              l("div", {
                class: "popup-content pl-14 pr-14 bos text-666",
                style: u({ height: e.title ? "calc(100% - 68px)" : "calc(100% - 58px)" })
              }, [
                C(a.$slots, "main", {}, void 0, !0)
              ], 4)
            ])
          ]),
          _: 3
        }, 8, ["show", "style", "overlay-style"])
      ]);
    };
  }
}), N = /* @__PURE__ */ k(z, [["__scopeId", "data-v-1668d6fb"]]), O = [N], V = function(e) {
  O.forEach((s) => {
    e.component(s.name, s);
  });
}, j = { install: V };
export {
  N as AnimatePopup,
  j as default
};