vue实现图片插件
Vue 图片插件实现方案
在 Vue 中实现图片插件通常涉及图片展示、懒加载、预览等功能。以下是几种常见的实现方式：
基础图片组件封装
创建一个可复用的图片组件，支持默认图片、加载失败处理等基础功能：
<template>
<img
:src="realSrc"
:style="style"
@error="handleError"
@load="handleLoad"
/>
</template>
<script>
export default {
props: {
src: String,
defaultSrc: {
type: String,
default: 'default-image.png'
},
style: Object
},
data() {
return {
realSrc: this.src
}
},
methods: {
handleError() {
this.realSrc = this.defaultSrc
},
handleLoad() {
this.$emit('loaded')
}
}
}
</script>图片懒加载实现
结合 IntersectionObserver API 实现懒加载：
// lazy-directive.js
const lazyLoad = {
inserted(el, binding) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
el.src = binding.value
observer.unobserve(el)
}
})
})
observer.observe(el)
}
}
// 全局注册
Vue.directive('lazy', lazyLoad)使用方式：
<img v-lazy="imageUrl" alt="lazy image">图片预览插件
实现点击图片放大预览功能：
<template>
<div class="image-preview">
<img :src="src" @click="showPreview">
<div v-if="visible" class="preview-modal" @click="hidePreview">
<img :src="src" class="preview-image">
</div>
</div>
</template>
<script>
export default {
props: ['src'],
data() {
return {
visible: false
}
},
methods: {
showPreview() {
this.visible = true
document.body.style.overflow = 'hidden'
},
hidePreview() {
this.visible = false
document.body.style.overflow = ''
}
}
}
</script>
<style>
.preview-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.preview-image {
max-width: 90%;
max-height: 90%;
}
</style>第三方库集成
对于更复杂的需求，可以考虑集成以下流行库：
vue-lazyload：专业懒加载解决方案viewerjs：功能强大的图片查看器vue-photo-preview：轻量级图片预览组件
安装示例：
npm install vue-lazyload使用示例：
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'error.png',
loading: 'loading.gif',
attempt: 3
})<img v-lazy="imageUrl">性能优化建议
- 使用 WebP 格式图片减少体积
- 实现图片压缩和裁剪服务
- 添加 placeholder 提升用户体验
- 考虑使用 CDN 加速图片加载
以上方案可根据实际需求组合使用或单独实现，根据项目复杂度选择最适合的方案。
