blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-08-18 18:19:46 +08:00
Code Issues Projects Releases Wiki Activity

chore(Skeleton): extract render fn

Browse Source
This commit is contained in:
chenjiahan 2020-08-25 14:50:10 +08:00
parent 982a9d16da
commit a847313477
1 changed files with 54 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/skeleton/index.js
View File

@ -40,51 +40,7 @@ export default createComponent({
},
setup(props, { slots }) {
return function () {
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() {
const renderAvatar = () => {
if (props.avatar) {
const size = addUnit(props.avatarSize);
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 (
<div class={bem({ animate: props.animate, round: props.round })}>
{Avatar()}
{renderAvatar()}
<div class={bem('content')}>
{Title()}
{Rows()}
{renderTitle()}
{renderRows()}
</div>
</div>
);