mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-08-18 18:19:46 +08:00
chore(Skeleton): extract render fn
This commit is contained in:
parent
982a9d16da
commit
a847313477
@ -40,51 +40,7 @@ export default createComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
setup(props, { slots }) {
|
setup(props, { slots }) {
|
||||||
return function () {
|
const renderAvatar = () => {
|
||||||
if (!props.loading) {
|
|
||||||
return slots.default && slots.default();
|
|
||||||
}
|
|
||||||
|
|
||||||
function Title() {
|
|
||||||
if (props.title) {
|
|
||||||
return (
|
|
||||||
<h3
|
|
||||||
class={bem('title')}
|
|
||||||
style={{ width: addUnit(props.titleWidth) }}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function Rows() {
|
|
||||||
const Rows = [];
|
|
||||||
const { rowWidth } = props;
|
|
||||||
|
|
||||||
function getRowWidth(index) {
|
|
||||||
if (rowWidth === DEFAULT_ROW_WIDTH && index === +props.row - 1) {
|
|
||||||
return DEFAULT_LAST_ROW_WIDTH;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(rowWidth)) {
|
|
||||||
return rowWidth[index];
|
|
||||||
}
|
|
||||||
|
|
||||||
return rowWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 0; i < props.row; i++) {
|
|
||||||
Rows.push(
|
|
||||||
<div
|
|
||||||
class={bem('row')}
|
|
||||||
style={{ width: addUnit(getRowWidth(i)) }}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return Rows;
|
|
||||||
}
|
|
||||||
|
|
||||||
function Avatar() {
|
|
||||||
if (props.avatar) {
|
if (props.avatar) {
|
||||||
const size = addUnit(props.avatarSize);
|
const size = addUnit(props.avatarSize);
|
||||||
return (
|
return (
|
||||||
@ -94,14 +50,56 @@ export default createComponent({
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderTitle = () => {
|
||||||
|
if (props.title) {
|
||||||
|
return (
|
||||||
|
<h3
|
||||||
|
class={bem('title')}
|
||||||
|
style={{ width: addUnit(props.titleWidth) }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getRowWidth = (index) => {
|
||||||
|
const { rowWidth } = props;
|
||||||
|
|
||||||
|
if (rowWidth === DEFAULT_ROW_WIDTH && index === +props.row - 1) {
|
||||||
|
return DEFAULT_LAST_ROW_WIDTH;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(rowWidth)) {
|
||||||
|
return rowWidth[index];
|
||||||
|
}
|
||||||
|
|
||||||
|
return rowWidth;
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderRows = () => {
|
||||||
|
const Rows = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < props.row; i++) {
|
||||||
|
Rows.push(
|
||||||
|
<div class={bem('row')} style={{ width: addUnit(getRowWidth(i)) }} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Rows;
|
||||||
|
};
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (!props.loading) {
|
||||||
|
return slots.default?.();
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class={bem({ animate: props.animate, round: props.round })}>
|
<div class={bem({ animate: props.animate, round: props.round })}>
|
||||||
{Avatar()}
|
{renderAvatar()}
|
||||||
<div class={bem('content')}>
|
<div class={bem('content')}>
|
||||||
{Title()}
|
{renderTitle()}
|
||||||
{Rows()}
|
{renderRows()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user