vue实现图片插件

实现图片插件的基本思路

在Vue中实现图片插件通常涉及封装一个可复用的组件，支持图片展示、懒加载、预览、缩放等功能。以下是关键实现步骤：

基础图片组件封装

创建一个基础图片组件Image.vue，支持动态src和alt属性：

<template>
  <img :src="src" :alt="alt" @error="handleError" />
</template>

<script>
export default {
  props: {
    src: { type: String, required: true },
    alt: { type: String, default: '' }
  },
  methods: {
    handleError() {
      this.$emit('error')
    }
  }
}
</script>

添加懒加载功能

使用Intersection Observer API实现懒加载：

<template>
  <img
    :src="placeholder"
    :data-src="src"
    :alt="alt"
    ref="imgEl"
    @error="handleError"
  />
</template>

<script>
export default {
  props: {
    src: { type: String, required: true },
    alt: { type: String, default: '' },
    placeholder: { type: String, default: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==' }
  },
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this.$refs.imgEl.src = this.$refs.imgEl.dataset.src
          observer.unobserve(entry.target)
        }
      })
    })
    observer.observe(this.$refs.imgEl)
  }
}
</script>

实现图片预览功能

结合第三方库如viewer.js实现预览功能：

<template>
  <div class="image-preview">
    <img
      v-for="(img, index) in images"
      :key="index"
      :src="img.thumbnail"
      :data-src="img.src"
      :alt="img.alt"
      @click="preview(index)"
    />
  </div>
</template>

<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'

export default {
  props: {
    images: { type: Array, required: true }
  },
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initViewer()
  },
  methods: {
    initViewer() {
      this.viewer = new Viewer(this.$el, {
        inline: false,
        button: true,
        navbar: false,
        title: false,
        toolbar: {
          zoomIn: 1,
          zoomOut: 1,
          reset: 1,
          rotateLeft: 1,
          rotateRight: 1,
          flipHorizontal: 1,
          flipVertical: 1,
        }
      })
    },
    preview(index) {
      this.viewer.view(index)
    }
  }
}
</script>

添加图片加载动画

使用CSS实现加载过渡效果：

<template>
  <div class="image-container">
    <img
      :class="{ 'loaded': loaded }"
      :src="src"
      :alt="alt"
      @load="handleLoad"
      @error="handleError"
    />
    <div v-if="!loaded" class="loading-spinner"></div>
  </div>
</template>

<script>
export default {
  props: {
    src: { type: String, required: true },
    alt: { type: String, default: '' }
  },
  data() {
    return {
      loaded: false
    }
  },
  methods: {
    handleLoad() {
      this.loaded = true
    }
  }
}
</script>

<style scoped>
.image-container {
  position: relative;
  width: 100%;
  height: 100%;
}

img {
  opacity: 0;
  transition: opacity 0.3s ease;
  width: 100%;
  height: auto;
}

img.loaded {
  opacity: 1;
}

.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
</style>

响应式图片处理

使用srcset和sizes属性实现响应式图片：

<template>
  <img
    :src="src"
    :srcset="srcset"
    :sizes="sizes"
    :alt="alt"
  />
</template>

<script>
export default {
  props: {
    src: { type: String, required: true },
    alt: { type: String, default: '' },
    srcset: { type: String, default: '' },
    sizes: { type: String, default: '100vw' }
  }
}
</script>

全局注册插件

将组件全局注册为插件：

// image-plugin.js
import ImageComponent from './Image.vue'
import ImagePreview from './ImagePreview.vue'

export default {
  install(Vue) {
    Vue.component('VImage', ImageComponent)
    Vue.component('VImagePreview', ImagePreview)
  }
}

// main.js
import ImagePlugin from './plugins/image-plugin'
Vue.use(ImagePlugin)

插件配置选项

支持通过插件选项进行全局配置：

// image-plugin.js
export default {
  install(Vue, options = {}) {
    const defaults = {
      placeholder: 'data:image/gif;base64,...',
      lazy: true,
      preview: false
    }

    const config = { ...defaults, ...options }

    Vue.prototype.$imageConfig = config
    Vue.component('VImage', {
      ...ImageComponent,
      props: {
        ...ImageComponent.props,
        lazy: { type: Boolean, default: config.lazy }
      }
    })
  }
}

这些实现方式可以根据具体需求组合使用或单独扩展，构建出功能完善的图片处理插件。