uv-ui
Version:
基于vue3的移动端组件库
85 lines (84 loc) • 2.36 kB
JavaScript
import { openBlock as e, createElementBlock as o, normalizeClass as c, renderSlot as d, createBlock as l, unref as n, createCommentVNode as s, createElementVNode as h, Fragment as v, renderList as y } from "vue";
import k from "../skeleton-paragraph/index.js";
import w from "../skeleton-title/index.js";
import S from "../skeleton-avatar/index.js";
import { addUnit as g } from "../../utils/common.js";
import "./skeleton.vue_vue_type_style_index_0_lang.js";
const p = { class: "uv-skeleton" }, B = { class: "uv-skeleton-content-right" }, A = { key: 1 }, W = {
name: "UvSkeleton"
}, D = /* @__PURE__ */ Object.assign(W, {
props: {
row: {
type: Number,
default: 0
},
title: {
type: Boolean,
default: !1
},
titleWidth: {
type: String,
default: "40%"
},
animate: {
type: Boolean,
default: !0
},
round: {
type: Boolean,
default: !1
},
avatar: {
type: Boolean,
default: !1
},
avatarShape: {
type: String,
default: "round"
},
rowWidth: {
type: [Number, String, Array],
default: "100%"
},
loading: {
type: Boolean,
default: !0
}
},
setup(t) {
const i = t, m = "60%", f = (a) => {
const { rowWidth: r } = i;
return r === "100%" && a === +i.row - 1 ? m : Array.isArray(r) ? r[a] : r;
};
return (a, r) => (e(), o("div", p, [
t.loading ? (e(), o("div", {
key: 0,
class: c(["uv-skeleton-content", [t.animate ? "uv-skeleton-animate" : ""]])
}, [
d(a.$slots, "template", {}, () => [
t.avatar ? (e(), l(n(S), {
key: 0,
"avatar-shape": t.avatarShape
}, null, 8, ["avatar-shape"])) : s("", !0),
h("div", B, [
t.title ? (e(), l(n(w), {
key: 0,
round: t.round,
"title-width": t.titleWidth
}, null, 8, ["round", "title-width"])) : s("", !0),
(e(!0), o(v, null, y(Array(t.row).fill(""), (N, u) => (e(), l(n(k), {
round: t.round,
key: u,
"row-width": n(g)(f(u))
}, null, 8, ["round", "row-width"]))), 128))
])
])
], 2)) : (e(), o("div", A, [
d(a.$slots, "default")
]))
]));
}
});
export {
D as default
};