超简单☞vue-photo-preview

忙?懒:懒。
好久没有更新东西了。忙里偷闲,记录点东西吧。

项目中需要图片预览功能。
首先想到的是,使用element的Dialog展示,但是需要改弹窗的样式,另外图片的宽度不固定,高度也不固定,这样做出来的效果比较难看。放弃了el-dialog。
然后想着网上有什么开源的组件,拿来直接用。总比自己造轮子强吧。看了 vue-photo-viewer之类的,基本上都是轮播形式,并且不能阴式的调用。不能满足需求。放弃。

自己动手丰衣足食,还是自己搞吧。

总结下常见的展示样式,然后自己搞了个,样式如下:


image.png

首先封装:

<template>
  <div class="photo_preview" v-if="dialogVisible">
    <div class="photo_preview_dialog">
      <div class="preview_header">
        <el-button type="text" @click="dialogClose(false)">关 闭</el-button>
      </div>
      <div class="preview_body" :style="{height:warpHeight+'px'}" @click="dialogClose(false)">
        <img :src="src" class="img"
             :style="mouseStyle"
             alt="" @click.stop="handleMouse">
      </div>
    </div>
  </div>
</template>
<script>

  export default {
    name: '',
    props: {
      src: {
        type: String,
        default: ''
      },
      visible: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        dialogVisible: false,
        warpHeight: '',
        mouseStyle: {
          cursor: 'zoom-in',
          height: '80%'
        },
        toogle: false
      }
    },
    created () {
      this.dialogVisible = this.visible
    },
    watch: {
      visible (val, oldval) {
        this.dialogVisible = val
        this.warpHeight = document.body.clientHeight - 100
      }
    },
    methods: {
      dialogClose (value) {
        this.$emit('close', value)
        Object.assign(this.$data, this.$options.data())
      },
      handleMouse () {
        let cursor = this.toogle ? 'zoom-in' : 'zoom-out'
        let height = this.toogle ? '80%' : '100%'
        this.toogle = !this.toogle

        this.mouseStyle = {
          cursor: cursor,
          height: height
        }
      }
    }
  }

</script>

<style lang="scss" scoped>
  .photo_preview {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.9) !important;
    z-index: 999999;
    overflow: hidden;

    .photo_preview_dialog {
      position: relative;
      width: 100%;
      margin: 0 auto;
      height: 100%;

      .preview_header {
        height: 50px;
        padding: 0 20px;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .el-button {
          color: #ffffff;
        }
      }

      .preview_body {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .img {
          height: 100%;
          width: auto;
          display: block;
        }
      }
    }

  }
</style>

调用 this.showDialog=true :


    <f-photo-preview 
      :src="imgUrl" 
      :visible="showDialog" 
      @close="e => showDialog = e">
    </f-photo-preview>

暂时功能可以满足放大缩小图片。

  • 默认展示图片大小的80%,放在图片区域,鼠标变为放大镜,点击图片,可以放大至100%。这时鼠标变为缩小镜,再次点击可以改变图片至80%。

  • 点击关闭按钮,或者图片以外的区域都可以关闭预览界面。

  • 没有增加鼠标滚轮放大缩小的特效。

  • 不支持轮播功能(暂时没有必要)。

推荐阅读更多精彩内容