song-ui-u/lib/components/card/src/index.cjs

vue3 + js的PC前端组件库

'use strict';

var vue = require('vue');
var index = require('../../../hook/use-namespace/index.cjs');
require('song-ui-pro-icon');
require('../../../hook/use-zindex/index.cjs');

var Card = /* @__PURE__ */ vue.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 = index.useNamespace("card");
    const handelMouseEnter = (e) => {
      emit("mouseenter", e);
    };
    const handelMouseLeave = (e) => {
      emit("mouseleave", e);
    };
    return () => vue.createVNode("div", {
      "class": [ns.b(), ns.m("shadow", props.shadow)],
      "onmouseleave": (e) => handelMouseLeave(e),
      "onmouseenter": (e) => handelMouseEnter(e)
    }, [vue.createVNode("div", {
      "class": [ns.e("header")]
    }, [props.title || slots.title?.()]), vue.createVNode("div", {
      "class": [ns.e("body")]
    }, [slots.default?.()]), vue.createVNode("div", {
      "class": [ns.e("footer")]
    }, [props.footer || slots.footer?.()])]);
  }
});

module.exports = Card;
//# sourceMappingURL=index.cjs.map