blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 22:49:15 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Loading: jsx (#2540)

Browse Source
This commit is contained in:
neverland 2019-01-16 20:29:54 +08:00 committed by GitHub
parent 024defbc23
commit 7ed9a5352f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 65 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
packages/loading/index.js Normal file
View File

@ -0,0 +1,52 @@
import { use } from '../utils';
const [sfc, bem] = use('loading');
const DEFAULT_COLOR = '#c9c9c9';
export default sfc({
props: {
size: String,
type: {
type: String,
default: 'circular'
},
color: {
type: String,
default: DEFAULT_COLOR
}
},
render(h) {
const { color, size, type } = this;
const colorType = color === 'white' || color === 'black' ? color : '';
const style = {
color: color === 'black' ? DEFAULT_COLOR : color,
width: size,
height: size
};
const Spin = [];
if (type === 'spinner') {
for (let i = 0; i < 12; i++) {
Spin.push(<i />);
}
}
const Circular = type === 'circular' && (
<svg class={bem('circular')} viewBox="25 25 50 50">
<circle cx="50" cy="50" r="20" fill="none" />
</svg>
);
return (
<div class={bem([type, colorType])} style={style}>
<span class={bem('spinner', type)}>
{Spin}
{Circular}
</span>
</div>
);
}
});

62
packages/loading/index.vue
View File

@ -1,62 +0,0 @@
<template>
<div
:class="b([type, colorType])"
:style="style"
>
<span :class="b('spinner', type)">
<i
v-for="(item, index) in (type === 'spinner' ? 12 : 0)"
:key="index"
/>
<svg
v-if="type === 'circular'"
:class="b('circular')"
viewBox="25 25 50 50"
>
<circle
cx="50"
cy="50"
r="20"
fill="none"
/>
</svg>
</span>
</div>
</template>
<script>
import create from '../utils/create-basic';
const DEFAULT_COLOR = '#c9c9c9';
export default create({
name: 'loading',
props: {
size: String,
type: {
type: String,
default: 'circular'
},
color: {
type: String,
default: DEFAULT_COLOR
}
},
computed: {
colorType() {
const { color } = this;
return color === 'white' || color === 'black' ? color : '';
},
style() {
return {
color: this.color === 'black' ? DEFAULT_COLOR : this.color,
width: this.size,
height: this.size
};
}
}
});
</script>

4
packages/loading/test/__snapshots__/demo.spec.js.snap
View File

@ -7,8 +7,8 @@ exports[`renders demo correctly 1`] = `
<div class="van-loading van-loading--circular van-loading--white" style="color:white;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>
<div>
<div class="van-loading van-loading--spinner van-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <!----></span></div>
<div class="van-loading van-loading--spinner van-loading--white" style="color:white;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <!----></span></div>
<div class="van-loading van-loading--spinner van-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
<div class="van-loading van-loading--spinner van-loading--white" style="color:white;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div>
</div>
`;