@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) • 2.05 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const use = require("@vrx-arco/use");
const _var = require("../style/var.js");
const ProCardMeta = /* @__PURE__ */ vue.defineComponent({
name: "vrx-arco-pro-card-meta",
props: {
/**
* 标题
*/
title: {},
/**
* 头像
*/
avatar: {},
/**
* 描述
*/
description: {},
/**
* 操作按钮
*/
actions: Array
},
setup: (props, {
slots
}) => {
const {
bemClass
} = _var.style("pro-card-meta");
const getAction = (actions) => {
return actions.map((action, index) => vue.isVNode(action) && vue.createVNode("li", {
"style": {
width: `${100 / actions.length}%`
},
"key": `action-${index}`
}, [vue.createVNode("span", null, [action])]));
};
return () => {
const avatar = use.propsSlot(slots, props, "avatar");
const title = use.propsSlot(slots, props, "title");
const description = use.propsSlot(slots, props, "description");
const actions = use.propsSlot(slots, props, "actions");
const avatarDom = avatar ? vue.createVNode("div", {
"class": bemClass("__avatar")
}, [avatar]) : null;
const titleDom = title ? vue.createVNode("div", {
"class": bemClass("__title")
}, [title]) : null;
const descriptionDom = description ? vue.createVNode("div", {
"class": bemClass("__description")
}, [description]) : null;
const MetaDetail = titleDom || descriptionDom ? vue.createVNode("div", {
"class": bemClass("__detail")
}, [titleDom, descriptionDom]) : null;
const actionsDom = (actions == null ? void 0 : actions.length) ? vue.createVNode("ul", {
"class": bemClass("__actions")
}, [getAction(actions)]) : null;
return vue.createVNode("div", {
"class": bemClass()
}, [avatarDom, MetaDetail, actionsDom]);
};
}
});
exports.ProCardMeta = ProCardMeta;