tk-eui-plus/notification/index.js

import { defineComponent as m, useSlots as v, resolveComponent as a, openBlock as o, createBlock as i, createSlots as f, withCtx as n, createVNode as g, mergeProps as s, createCommentVNode as p, unref as l, renderSlot as c, createElementBlock as y, Fragment as S, resolveDynamicComponent as h } from "vue";
const k = (e) => e.replace(/(A-Z)g/, "-$1"), C = /* @__PURE__ */ m({
  __name: "index",
  props: {
    //显示的图标
    icon: {
      type: String,
      default: "Bell"
    },
    //通知数量
    value: {
      type: [String, Number],
      default: ""
    },
    //是否展示popover
    hidePopover: {
      type: Boolean,
      default: !1
    },
    //popover展示的内容，可通过属性传递，也可以通过插槽的方式传递
    popoverContent: {
      type: String,
      default: ""
    },
    //popover显示的位置
    popoverPlacement: {
      type: String,
      default: "top-start"
    },
    //popover标题
    popoverTitle: {
      type: String,
      default: ""
    },
    //popover宽度
    popoverWidth: {
      type: String,
      default: "300px"
    },
    //popover触发方式
    popoverTrigger: {
      type: String,
      default: "hover"
    }
  },
  setup(e) {
    let r = v();
    return (t, b) => {
      const d = a("el-badge"), u = a("el-popover");
      return o(), i(u, {
        placement: e.popoverPlacement,
        title: e.popoverTitle,
        width: e.popoverWidth,
        trigger: e.popoverTrigger,
        disabled: e.hidePopover,
        content: e.popoverContent
      }, f({
        reference: n(() => [
          g(d, s({ value: e.value }, t.$attrs), {
            default: n(() => [
              p(" icon自定义插槽方式，通过template #icon传递 "),
              l(r).icon ? c(t.$slots, "icon", { key: 0 }) : (o(), y(
                S,
                { key: 1 },
                [
                  p(" icon自定义属性方式，通过icon属性传递过来 "),
                  (o(), i(h(`tk-icon-${l(k)(e.icon)}`)))
                ],
                2112
                /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
              ))
            ]),
            _: 3
            /* FORWARDED */
          }, 16, ["value"])
        ]),
        _: 2
        /* DYNAMIC */
      }, [
        l(r).default ? {
          name: "default",
          fn: n(() => [
            c(t.$slots, "default")
          ]),
          key: "0"
        } : void 0
      ]), 1032, ["placement", "title", "width", "trigger", "disabled", "content"]);
    };
  }
}), P = {
  install(e) {
    e.component("tkNotification", C);
  }
};
export {
  P as default
};