图片放大_每周一推(npm包)

998 阅读1分钟

前言

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

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查看对应源码🤗

注意事项

往期NPM包

timeago.js
vue-seamless-scroll
circlr

总结

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

本文正在参加「金石计划」