mirror of
https://github.com/youzan/vant.git
synced 2025-10-22 11:54:02 +00:00
feat(Image): add loading-icon prop (#5469)
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user