vue封装一个图片组件
时间: 2024-09-29 20:01:40 浏览: 20
在Vue.js中,封装一个图片组件通常是为了复用显示图片的功能,并可以处理诸如懒加载、预加载、图片大小调整等常见需求。以下是一个简单的Vue图片组件示例:
```html
<template>
<div class="image-component">
<img :src="lazySrc" alt="图片描述" v-if="!loading" />
<div v-loading="loading">加载中...</div>
</div>
</template>
<script>
export default {
name: 'ImageComponent',
props: {
src: { // 主要的图片URL
type: String,
required: true
},
lazy: { // 是否启用懒加载,默认false
type: Boolean,
default: false
}
},
data() {
return {
lazySrc: this.src, // 初始化时直接设置src
loading: true // 初始状态设为加载中
};
},
mounted() {
if (this.lazy) { // 如果设置了懒加载
const img = new Image();
img.src = this.src; // 预先加载
img.onload = () => {
this.loading = false;
};
} else {
this.$nextTick(() => {
this.loading = false;
});
}
},
methods: {
handleError(e) {
console.error('图片加载错误', e);
this.src = '默认图片路径'; // 或者根据实际情况处理错误
}
}
};
</script>
<style scoped>
.image-component {
width: 100%;
height: auto;
}
</style>
```
在这个组件中,我们使用了`v-if`指令来控制是否立即展示图片,通过`mounted`生命周期钩子处理懒加载。如果图片加载失败,会在`handleError`方法中捕获错误。