mine-h5-ui
Version:
一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
45 lines (44 loc) • 1.58 kB
JavaScript
import { defineComponent as s, openBlock as t, createElementBlock as l, withModifiers as u, normalizeClass as m, normalizeStyle as a, createCommentVNode as n, createElementVNode as f, Fragment as v, renderList as c, renderSlot as y } from "vue";
const k = { class: "me-skeleton-row" }, w = /* @__PURE__ */ s({
name: "MeSkeleton",
__name: "index",
props: {
visible: { type: Boolean, default: !1 },
active: { type: Boolean, default: !1 },
title: { type: Boolean, default: !1 },
titleWidth: { default: "40%" },
row: { default: 3 },
rowWidth: { default: "100%" },
avatar: { type: Boolean, default: !1 },
avatarSize: { default: "32px" }
},
setup(e) {
return (o, i) => e.visible ? (t(), l("div", {
key: 0,
class: m(["me-skeleton", { active: e.active }]),
onClick: i[0] || (i[0] = u(() => {
}, ["stop"]))
}, [
e.avatar ? (t(), l("div", {
key: 0,
class: "me-skeleton-avatar",
style: a({ width: e.avatarSize, height: e.avatarSize })
}, null, 4)) : n("", !0),
f("div", k, [
e.title ? (t(), l("div", {
key: 0,
class: "me-skeleton-title",
style: a({ width: e.titleWidth })
}, null, 4)) : n("", !0),
(t(!0), l(v, null, c(e.row, (d, r) => (t(), l("div", {
key: d,
class: "me-skeleton-item",
style: a({ width: Array.isArray(e.rowWidth) ? e.rowWidth[r] ?? "100%" : e.rowWidth })
}, null, 4))), 128))
])
], 2)) : y(o.$slots, "default", { key: 1 });
}
});
export {
w as default
};