song-ui-u/es/components/card/src/index.mjs

vue3 + js的PC前端组件库

import { defineComponent, createVNode } from 'vue';
import { useNamespace } from '../../../hook/use-namespace/index.mjs';
import 'song-ui-pro-icon';
import '../../../hook/use-zindex/index.mjs';

var Card = /* @__PURE__ */ defineComponent({
  name: "x-card",
  props: {
    title: {
      type: String,
      default: ""
    },
    footer: {
      type: String,
      default: ""
    },
    // 卡片阴影出现的时机
    shadow: {
      type: String,
      default: "always",
      validator: (value) => {
        return ["hover", "always", "never"].includes(value);
      }
    },
    width: {
      type: String,
      default: "100%"
    }
  },
  setup(props, {
    slots,
    emit
  }) {
    const ns = useNamespace("card");
    const handelMouseEnter = (e) => {
      emit("mouseenter", e);
    };
    const handelMouseLeave = (e) => {
      emit("mouseleave", e);
    };
    return () => createVNode("div", {
      "class": [ns.b(), ns.m("shadow", props.shadow)],
      "onmouseleave": (e) => handelMouseLeave(e),
      "onmouseenter": (e) => handelMouseEnter(e)
    }, [createVNode("div", {
      "class": [ns.e("header")]
    }, [props.title || slots.title?.()]), createVNode("div", {
      "class": [ns.e("body")]
    }, [slots.default?.()]), createVNode("div", {
      "class": [ns.e("footer")]
    }, [props.footer || slots.footer?.()])]);
  }
});

export { Card as default };
//# sourceMappingURL=index.mjs.map