npm 包 vue-img-previewer 使用教程

概述

vue-img-previewer 是一个基于 Vue.js 构建的图片预览组件，可以方便地在网页中展示图片，支持缩放、旋转、拖拽等常用功能。本文将介绍该组件的使用方法，首先需要安装该组件：

npm install --save vue-img-previewer

基础用法

使用 vue-img-previewer 组件只需要在模板中引入并注册即可：

<template>
  <div>
    <img @click="previewImage($event)" src="your-image-url" />
    <vue-img-previewer :srcs="images" :index="currentIndex" />
  </div>
</template>

<script>
import VueImgPreviewer from 'vue-img-previewer'

export default {
  components: {
    VueImgPreviewer
  },
  data() {
    return {
      currentIndex: 0,
      images: ['image-url-1', 'image-url-2']
    }
  },
  methods: {
    previewImage(event) {
      this.currentIndex = this.images.indexOf(event.target.src)
    }
  }
}
</script>

在模板中使用 <vue-img-previewer> 标签，传入 srcs 和 index 两个属性，srcs 为图片链接数组，index 为当前选中的图片下标，例如上述示例中，当前选中的图片下标为 0，即 'image-url-1'。

进阶用法

基础配置

vue-img-previewer 提供了一些基础配置项，可以定制组件的行为。例如，可以通过 transition 属性定制动画效果：

<vue-img-previewer :srcs="images" :index="currentIndex" transition="fade" />

transition 属性值可以是 scale（缩放动画）和 fade（淡入淡出动画），默认值为 scale。

Slot

vue-img-previewer 还支持在图片浏览器上方添加 Slot，可以为图片添加额外的说明性文字。

<vue-img-previewer :srcs="images" :index="currentIndex">
  <div slot="header">
    这是一个图片浏览器，你可以在此查看所有图片。
  </div>
</vue-img-previewer>

自定义样式

vue-img-previewer 提供了 3 个 CSS 类，可以通过重载样式定制组件的外观：

• .vue-img-previewer: 组件根节点
• .vue-img-previewer--wrapper: 图片容器节点
• .vue-img-previewer--content: 图片节点

.vue-img-previewer {
  background: rgba(0, 0, 0, 0.5);
}

.vue-img-previewer--content {
  box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.5);
}

结束语

vue-img-previewer 提供了一种简洁、好用的图片预览方案，可以大大提升网站的用户体验。在实际开发中，可以根据业务需要定制该组件的行为和外观，希望此篇文章对您有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673dffb81d47349e53c37