忙？懶：懶怜械。
好久沒有更新東西了颅和。忙里偷閑，記錄點(diǎn)東西吧宫盔。

項(xiàng)目中需要圖片預(yù)覽功能融虽。
首先想到的是，使用element的Dialog展示灼芭，但是需要改彈窗的樣式有额，另外圖片的寬度不固定，高度也不固定彼绷，這樣做出來的效果比較難看巍佑。放棄了el-dialog。
然后想著網(wǎng)上有什么開源的組件寄悯，拿來直接用萤衰。總比自己造輪子強(qiáng)吧猜旬〈喽埃看了 vue-photo-viewer之類的，基本上都是輪播形式洒擦，并且不能陰式的調(diào)用椿争。不能滿足需求。放棄熟嫩。

自己動(dòng)手豐衣足食秦踪，還是自己搞吧。

總結(jié)下常見的展示樣式，然后自己搞了個(gè)椅邓，樣式如下：

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)">關(guān) 閉</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>

調(diào)用 this.showDialog=true ：

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

暫時(shí)功能可以滿足放大縮小圖片柠逞。

• 默認(rèn)展示圖片大小的80%，放在圖片區(qū)域景馁，鼠標(biāo)變?yōu)榉糯箸R板壮，點(diǎn)擊圖片，可以放大至100%裁僧。這時(shí)鼠標(biāo)變?yōu)榭s小鏡个束，再次點(diǎn)擊可以改變圖片至80%慕购。

• 點(diǎn)擊關(guān)閉按鈕聊疲，或者圖片以外的區(qū)域都可以關(guān)閉預(yù)覽界面。

• 沒有增加鼠標(biāo)滾輪放大縮小的特效沪悲。

• 不支持輪播功能（暫時(shí)沒有必要）获洲。