blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +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

42
src/loading/index.js
View File

@ -1,8 +1,19 @@
import { computed } from 'vue';
import { createNamespace, addUnit } from '../utils';
import { createNamespace, addUnit, getSizeStyle } from '../utils';
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({
props: {
size: [Number, String],
@ -16,17 +27,6 @@ export default createComponent({
},
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 = () => {
if (slots.default) {
return (
@ -42,23 +42,13 @@ export default createComponent({
}
};
const spinnerStyle = computed(() => {
const style = {
color: props.color,
};
if (props.size) {
const size = addUnit(props.size);
style.width = size;
style.height = size;
}
return style;
});
const spinnerStyle = computed(() => ({
color: props.color,
...getSizeStyle(props.size),
}));
return () => {
const { type, vertical } = props;
return (
<div class={bem([type, { vertical }])}>
<span class={bem('spinner', type)} style={spinnerStyle.value}>