@cqmcui/cqmcui/dist/packages/_es/Overlay.js

轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）

import { computed, watchEffect, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, withModifiers, normalizeStyle, renderSlot, vShow } from "vue";
import { b as body, c as createComponent } from "./component-81a4c1d0.js";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
let count = 0;
const CLSNAME = "cqmc-overflow-hidden";
const useLockScroll = (isLock) => {
  const lock = () => {
    if (isLock()) {
      try {
        !count && body.classList.add(CLSNAME);
        count++;
      } catch (error) {
      }
    }
  };
  const unlock = () => {
    if (isLock() && count) {
      try {
        count--;
        !count && body.classList.remove(CLSNAME);
      } catch (error) {
      }
    }
  };
  return [lock, unlock];
};
const { componentName, create } = createComponent("overlay");
const _sfc_main = create({
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    zIndex: {
      type: [Number, String],
      default: 2e3
    },
    duration: {
      type: [Number, String],
      default: 0.3
    },
    lockScroll: {
      type: Boolean,
      default: true
    },
    overlayClass: {
      type: String,
      default: ""
    },
    overlayStyle: {
      type: Object
    },
    closeOnClickOverlay: {
      type: Boolean,
      default: true
    }
  },
  emits: ["click", "update:visible"],
  setup(props, { emit }) {
    const [lock, unlock] = useLockScroll(() => props.lockScroll);
    const classes = computed(() => {
      const prefixCls = componentName;
      return {
        [prefixCls]: true,
        [props.overlayClass]: true
      };
    });
    const style = computed(() => {
      return {
        transitionDuration: `${props.duration}s`,
        zIndex: props.zIndex,
        ...props.overlayStyle
      };
    });
    watchEffect(() => {
      props.visible ? lock() : unlock();
    });
    const onClick = (e) => {
      emit("click", e);
      if (props.closeOnClickOverlay) {
        emit("update:visible", false);
      }
    };
    return { classes, style, onClick };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createBlock(Transition, { name: "overlay-fade" }, {
    default: withCtx(() => [
      withDirectives(createElementVNode("view", {
        class: normalizeClass(_ctx.classes),
        onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.onClick && _ctx.onClick(...args), ["stop"])),
        style: normalizeStyle(_ctx.style)
      }, [
        renderSlot(_ctx.$slots, "default")
      ], 6), [
        [vShow, _ctx.visible]
      ])
    ]),
    _: 3
  });
}
const Overlay = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  Overlay as default
};