feat(Image): add loading-icon prop (#5469)

This commit is contained in:
neverland
2020-01-03 18:17:41 +08:00
committed by GitHub
parent 783e30361f
commit e380c23b1c
6 changed files with 35 additions and 52 deletions

View File

@@ -2,27 +2,14 @@
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-row>
<van-image
width="100"
height="100"
:src="image"
/>
<van-image width="100" height="100" :src="image" />
</van-row>
</demo-block>
<demo-block :title="$t('fitMode')">
<van-row gutter="20">
<van-col
v-for="fit in fits"
span="8"
:key="fit"
>
<van-image
:fit="fit"
width="100%"
height="27vw"
:src="image"
/>
<van-col v-for="fit in fits" span="8" :key="fit">
<van-image :fit="fit" width="100%" height="27vw" :src="image" />
<div class="text">{{ fit }}</div>
</van-col>
</van-row>
@@ -30,18 +17,8 @@
<demo-block :title="$t('round')">
<van-row gutter="20">
<van-col
v-for="fit in fits"
span="8"
:key="fit"
>
<van-image
round
:fit="fit"
width="100%"
height="27vw"
:src="image"
/>
<van-col v-for="fit in fits" span="8" :key="fit">
<van-image round :fit="fit" width="100%" height="27vw" :src="image" />
<div class="text">{{ fit }}</div>
</van-col>
</van-row>
@@ -50,23 +27,14 @@
<demo-block :title="$t('loading')">
<van-row gutter="20">
<van-col span="8">
<van-image
width="100%"
height="27vw"
/>
<van-image width="100%" height="27vw" />
<div class="text">{{ $t('defaultTip') }}</div>
</van-col>
<van-col span="8">
<van-image
width="100%"
height="27vw"
>
<van-image width="100%" height="27vw">
<template #loading>
<van-loading
type="spinner"
size="20"
/>
<van-loading type="spinner" size="20" />
</template>
</van-image>
<div class="text">{{ $t('customTip') }}</div>
@@ -77,20 +45,12 @@
<demo-block :title="$t('error')">
<van-row gutter="20">
<van-col span="8">
<van-image
width="100%"
height="27vw"
src="x"
/>
<van-image width="100%" height="27vw" src="x" />
<div class="text">{{ $t('defaultTip') }}</div>
</van-col>
<van-col span="8">
<van-image
width="100%"
height="27vw"
src="x"
>
<van-image width="100%" height="27vw" src="x">
<template #error>{{ $t('loadFail') }}</template>
</van-image>
<div class="text">{{ $t('customTip') }}</div>
@@ -133,7 +93,7 @@ export default {
</script>
<style lang="less">
@import "../../style/var";
@import '../../style/var';
.demo-image {
overflow-x: hidden;