mobile-frame-h5-example/pages/componentsB/image/index.vue

<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" :list="['加载成功', '加载中', '加载失败']" @change="statusChange"></u-subsection>
			</view>
			<!-- 微信小程序中，无法动态切换slot，所以隐藏此部分的演示 -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="u-config-item">
				<view class="u-item-title">加载中状态</view>
				<u-subsection :list="['默认', '自定义']" @change="loadingChange"></u-subsection>
			</view>
			<!-- #endif -->
			<view class="u-config-item">
				<view class="u-item-title">加载失败状态</view>
				<u-subsection :list="['默认', '自定义']" @change="errorChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">形状</view>
				<u-subsection :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>