@vrx-arco/pro-components
Version:
<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>
67 lines (66 loc) • 1.93 kB
JavaScript
import { defineComponent, createVNode, isVNode } from "vue";
import { propsSlot } from "@vrx-arco/use";
import { style } from "../style/var.mjs";
const ProCardMeta = /* @__PURE__ */ defineComponent({
name: "vrx-arco-pro-card-meta",
props: {
/**
* 标题
*/
title: {},
/**
* 头像
*/
avatar: {},
/**
* 描述
*/
description: {},
/**
* 操作按钮
*/
actions: Array
},
setup: (props, {
slots
}) => {
const {
bemClass
} = style("pro-card-meta");
const getAction = (actions) => {
return actions.map((action, index) => isVNode(action) && createVNode("li", {
"style": {
width: `${100 / actions.length}%`
},
"key": `action-${index}`
}, [createVNode("span", null, [action])]));
};
return () => {
const avatar = propsSlot(slots, props, "avatar");
const title = propsSlot(slots, props, "title");
const description = propsSlot(slots, props, "description");
const actions = propsSlot(slots, props, "actions");
const avatarDom = avatar ? createVNode("div", {
"class": bemClass("__avatar")
}, [avatar]) : null;
const titleDom = title ? createVNode("div", {
"class": bemClass("__title")
}, [title]) : null;
const descriptionDom = description ? createVNode("div", {
"class": bemClass("__description")
}, [description]) : null;
const MetaDetail = titleDom || descriptionDom ? createVNode("div", {
"class": bemClass("__detail")
}, [titleDom, descriptionDom]) : null;
const actionsDom = (actions == null ? void 0 : actions.length) ? createVNode("ul", {
"class": bemClass("__actions")
}, [getAction(actions)]) : null;
return createVNode("div", {
"class": bemClass()
}, [avatarDom, MetaDetail, actionsDom]);
};
}
});
export {
ProCardMeta
};