97 lines
2.8 KiB
Python
97 lines
2.8 KiB
Python
<template>
|
||
<view class="u-demo">
|
||
<view class="u-demo-wrap">
|
||
<view class="u-demo-title">演示效果</view>
|
||
<view class="u-demo-area u-flex u-row-center">
|
||
<u-image :shape="shape" ref="uImage" :width="width" :height="height" :src="src" mode="aspectFill">
|
||
<u-loading size="44" mode="flower" slot="loading" v-if="loadingSlot"></u-loading>
|
||
<view v-if="errorSlot" slot="error" style="font-size: 24rpx;">加载失败</view>
|
||
</u-image>
|
||
</view>
|
||
</view>
|
||
<view class="u-config-wrap">
|
||
<view class="u-config-title u-border-bottom">参数配置</view>
|
||
<view class="u-config-item">
|
||
<view class="u-item-title">状态</view>
|
||
<u-subsection :current="statusCurrent" vibrateShort :list="['加载成功', '加载中', '加载失败']" @change="statusChange"></u-subsection>
|
||
</view>
|
||
<!-- 微信小程序中，无法动态切换slot，所以隐藏此部分的演示 -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<view class="u-config-item">
|
||
<view class="u-item-title">加载中状态</view>
|
||
<u-subsection vibrateShort :list="['默认', '自定义']" @change="loadingChange"></u-subsection>
|
||
</view>
|
||
<!-- #endif -->
|
||
<view class="u-config-item">
|
||
<view class="u-item-title">加载失败状态</view>
|
||
<u-subsection vibrateShort :list="['默认', '自定义']" @change="errorChange"></u-subsection>
|
||
</view>
|
||
<view class="u-config-item">
|
||
<view class="u-item-title">形状</view>
|
||
<u-subsection vibrateShort :list="['方形', '圆形']" @change="shapeChange"></u-subsection>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
|
||
width: '200',
|
||
height: '200',
|
||
loadingSlot: false,
|
||
statusCurrent: 0,
|
||
errorSlot: false,
|
||
shape: 'square'
|
||
};
|
||
},
|
||
computed: {
|
||
// statusCurrent() {
|
||
// }
|
||
},
|
||
methods: {
|
||
statusChange(index) {
|
||
// 此处通过ref操作组件内部状态，仅是为了演示使用，实际中无需这些操作，由内部的图片加载事件自动完成
|
||
if (index == 0) {
|
||
this.src = 'http://img5.imgtn.bdimg.com/it/u=2438062088,2808868405&fm=26&gp=0.jpg';
|
||
this.$refs.uImage.loading = false;
|
||
this.$refs.uImage.isError = false;
|
||
} else if (index == 1) {
|
||
this.$refs.uImage.loading = true;
|
||
} else {
|
||
this.$refs.uImage.loading = false;
|
||
this.$refs.uImage.isError = true;
|
||
}
|
||
},
|
||
loadingChange(index) {
|
||
this.statusCurrent = 1;
|
||
this.statusChange(1);
|
||
if (index == 0) {
|
||
this.loadingSlot = false;
|
||
} else {
|
||
this.loadingSlot = true;
|
||
}
|
||
},
|
||
errorChange(index) {
|
||
this.statusCurrent = 2;
|
||
this.statusChange(2);
|
||
if (index == 0) {
|
||
this.errorSlot = false;
|
||
} else {
|
||
this.errorSlot = true;
|
||
}
|
||
},
|
||
shapeChange(index) {
|
||
this.shape = index == 0 ? 'square' : 'circle';
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.u-demo-area {
|
||
}
|
||
</style>
|