birdpaper-ui/es/message/src/message.vue.js

一个通用的 vue3 UI组件库。A common vue3 UI component library.

import { defineComponent, ref, computed, onMounted, nextTick, onUnmounted, openBlock, createElementBlock, normalizeClass, createBlock, resolveDynamicComponent, createCommentVNode, createElementVNode, toDisplayString, createVNode, unref } from "vue";
import { IconCloseLine, IconCheckboxCircleFill, IconCloseCircleFill, IconErrorWarningFill, IconLoader5Line } from "birdpaper-icon";
const __default__ = defineComponent({
  name: "MessageList"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    /** 消息ID Message id */
    id: { type: String },
    /** 消息提示类型 Message prompt type */
    type: { type: String, default: "text" },
    /** 消息提示内容 Message prompt content */
    content: { type: String, default: "" },
    /** 延迟关闭时间 Delayed shutdown time */
    duration: { type: Number, default: 3e3 },
    /** 是否允许手动关闭 Closeable or not */
    closeable: { type: Boolean, default: false },
    /** 是否开启无背景展示 */
    plain: { type: Boolean, default: false },
    /** 关闭后的回调函数 */
    onClose: { type: Function }
  },
  emits: ["remove"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const name = "bp-message";
    const timer = ref(0);
    const iconType = {
      success: IconCheckboxCircleFill,
      error: IconCloseCircleFill,
      warning: IconErrorWarningFill,
      loading: IconLoader5Line
    };
    const init = () => {
      if (props.duration > 0 && props.type !== "loading") {
        timer.value = window.setTimeout(handleClose, props.duration);
      }
    };
    const clsName = computed(() => {
      let cls = [name];
      cls.push(props.plain ? `${name}-plain` : `${name}-${props.type}`);
      return cls;
    });
    const clearTimer = () => {
      if (timer) {
        window.clearTimeout(timer.value);
        timer.value = 0;
      }
    };
    const handleClose = () => {
      emits("remove", props.id);
      props.onClose && props.onClose(props.id);
    };
    onMounted(() => {
      nextTick(() => init());
    });
    onUnmounted(() => {
      clearTimer();
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("li", {
        class: normalizeClass(clsName.value)
      }, [
        __props.type !== "text" ? (openBlock(), createElementBlock("span", {
          key: 0,
          class: normalizeClass([`${name}-icon`, `icon-${__props.type}`])
        }, [
          (openBlock(), createBlock(resolveDynamicComponent(iconType[__props.type]), { size: "18px" }))
        ], 2)) : createCommentVNode("", true),
        createElementVNode("span", {
          class: normalizeClass(`${name}-content`)
        }, toDisplayString(__props.content), 3),
        __props.closeable ? (openBlock(), createElementBlock("span", {
          key: 1,
          class: normalizeClass(`${name}-close`),
          onClick: handleClose
        }, [
          createVNode(unref(IconCloseLine))
        ], 2)) : createCommentVNode("", true)
      ], 2);
    };
  }
});
export {
  _sfc_main as default
};