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

perf(Loading): reduce vnode cost

Browse Source
This commit is contained in:
chenjiahan 2020-09-03 21:10:28 +08:00
parent f735b24a4b
commit 96fe977d1b
1 changed files with 16 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/loading/index.js
View File

@ -1,8 +1,19 @@
import { computed } from 'vue'; import { computed } from 'vue';
import { createNamespace, addUnit } from '../utils'; import { createNamespace, addUnit, getSizeStyle } from '../utils';
const [createComponent, bem] = createNamespace('loading'); const [createComponent, bem] = createNamespace('loading');
const SpinIcon = [];
for (let i = 0; i < 12; i++) {
SpinIcon.push(<i />);
}
const CircularIcon = (
<svg class={bem('circular')} viewBox="25 25 50 50">
<circle cx="50" cy="50" r="20" fill="none" />
</svg>
);
export default createComponent({ export default createComponent({
props: { props: {
size: [Number, String], size: [Number, String],
@ -16,17 +27,6 @@ export default createComponent({
}, },
setup(props, { slots }) { setup(props, { slots }) {
const SpinIcon = [];
for (let i = 0; i < 12; i++) {
SpinIcon.push(<i />);
}
const CircularIcon = (
<svg class={bem('circular')} viewBox="25 25 50 50">
<circle cx="50" cy="50" r="20" fill="none" />
</svg>
);
const renderText = () => { const renderText = () => {
if (slots.default) { if (slots.default) {
return ( return (
@ -42,23 +42,13 @@ export default createComponent({
} }
}; };
const spinnerStyle = computed(() => { const spinnerStyle = computed(() => ({
const style = {
color: props.color, color: props.color,
}; ...getSizeStyle(props.size),
}));
if (props.size) {
const size = addUnit(props.size);
style.width = size;
style.height = size;
}
return style;
});
return () => { return () => {
const { type, vertical } = props; const { type, vertical } = props;
return ( return (
<div class={bem([type, { vertical }])}> <div class={bem([type, { vertical }])}>
<span class={bem('spinner', type)} style={spinnerStyle.value}> <span class={bem('spinner', type)} style={spinnerStyle.value}>