图片放大_每周一推（npm包）

前言

为了不让自己的空余时间都浪费掉，打算做一个每周一推的专栏，盘点一些好的插件，分享给大家，每次分享前会先发到自己的博客，可以在博客中抢先看哦🎈。

v-viewer

我们在做后台项目的时候会涉及到图片的放大🖼，已经有很多成熟的组件提供了这些功能比如element-ui下的image组件,但是如果我们需要单独使用图片放大的功能🎡，还需要安装element-ui就有些小题大作了，🎭还有的同学使用dialog的方式来放大的图片这种只能实现单纯的放大图片🎨，但是无法实现图片翻转，缩小等等功能，于是就需要使用v-viewer来实现🥽。

这款组件支持Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作，用法也非常简单🎈。

用法

• 安装

npm install v-viewer

• 用法

// main.js
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
Vue.use(VueViewer)

 <!-- template -->
<template>
  <div>
    <!-- 指令方式放大图片 -->
    <div class="images" v-viewer>
      <img v-for="src in images" :key="src" :src="src">
    </div>
    <!-- 组件方式放大图片 -->
    <viewer :images="images">
      <img v-for="src in images" :key="src" :src="src">
    </viewer>
    <!-- 通过api的方式放大图片 -->
    <button type="button" @click="show">Click to show</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        images: [
          "https://picsum.photos/200/200",
          "https://picsum.photos/300/200",
          "https://picsum.photos/250/200"
        ]
      };
    },
    methods: {
      show() {
        this.$viewerApi({
          images: this.images,
        })
      },
    },
  }
</script>

小tips

通过这个网站可以设置随机图picsum满足我们写demo的需要🎈。

这样就通过三种方式实现了图片的放大具体的效果如下🎉。

指令方式[绑定option]

• inline

• 默认值：false
• true：默认放大并且在图片内部展示，false: 需要手动点击方法在图片外部展示

inline->false

inline->true

• button

• 默认值：true
• 是否展示右上角关闭按钮

button->false

button->true

• navbar

• 默认值：true
• 是否展示下方导航

navbar->true

navbar->false

• title

• 默认值:true
• 是否在下方显示图片alt信息

• toolbar

• 默认：true
• 是否展示下方工具栏

• movable

• 默认：true
• 放大图片是否可移动

• zoomable

• 默认值：true
• 是否可放大缩小图片

• tooltip

• 默认值：true
• 放大过程中是否展示放大比例

• rotatable

• 默认值：true
• 是否有旋转功能

• scalable

• 默认值：true
• 是否有放大缩小功能

• fullscreen

• 默认值：true
• 是否有全屏功能

• transition

• 默认值：true
• 图片放大的过程中是否有放大效果

• keyboard

• 默认值：true
• 是否支持键盘上下左右剪头操作

拿一个举例

<template>
  <div>
    <div class="images" v-viewer="{inline:false}">
      <img v-for="src in images" :key="src" :src="src" alt="我是img的alt属性">
    </div>
  </div>
</template>

组件方式

组件方式中的option与指令方式的option是相同的属性,可以在option中动态配置。

<template>
  <div>
    <viewer :options="options" :images="images">
      <img v-for="src in images" :key="src" :src="src">
    </viewer>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        images: [
          "https://picsum.photos/200/200",
          "https://picsum.photos/300/200",
          "https://picsum.photos/250/200"
        ],
        options:{
          inline: true
        }
      };
    },
  }
</script>

api方式（该方式不太常用）

<template>
  <div>
    <button type="button" class="button" @click="previewURL">URL Array</button>
    <button type="button" class="button" @click="previewImgObject">Img-Object Array</button>
  </div>
</template>
<script>
  import { api as viewerApi } from "v-viewer"
  export default {
    data() {
      return {
        sourceImageURLs: [
        'https://picsum.photos/200/200?random=1',
        'https://picsum.photos/200/200?random=2',
      ],
      sourceImageObjects: [
        {
          'src':'https://picsum.photos/200/200?random=3',
          'data-source':'https://picsum.photos/800/800?random=3'
        },
        {
          'src':'https://picsum.photos/200/200?random=4',
          'data-source':'https://picsum.photos/800/800?random=4'
        }
      ]
      }
    },
    methods: {
      previewURL () {
          // 如果使用`app.use`进行全局安装, 你就可以像这样直接调用`this.$viewerApi`
        const $viewer = this.$viewerApi({
          images: this.sourceImageURLs
        })
      },
      previewImgObject () {
          // 或者你可以单独引入api然后执行它
        const $viewer = viewerApi({
          options: {
            toolbar: true,
            url: 'data-source',
            initialViewIndex: 1
          },
          images: this.sourceImageObjects
        })
      }
    }
  }
</script>

通过外部按钮操作图片

<template>
  <div>
    <div class="iten">
      <viewer :options="options" :images="images"  @inited="inited">
        <img v-for="src in images" :key="src" :src="src">
      </viewer>
    </div>
    <button class="btn" @click="Rotate">
      旋转
    </button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      images: [
        "https://picsum.photos/200/200",
        "https://picsum.photos/300/200",
        "https://picsum.photos/250/200"
      ],
      options: {
        inline: true
      }
    };
  },
  methods: {
    Rotate() {
      this.$viewer.rotate(90)
    },
    inited(viewer) {
      this.$viewer = viewer
    }
  }
}
</script>

更多案例可以查看v-viewer点击source查看对应源码🤗

注意事项

• 如果使用vue3可以使用该组件v-viewer-vue3

往期NPM包

timeago.js

vue-seamless-scroll

circlr

总结

v-viewer的功能是比较全的一款插件主要是根据图片放大的拓展，好用！🎈。