vue 自適應圖片組件 前端 - 戴向天

大家好！我叫戴向天。今天我給大家分享一個關於vue的圖片自適應的組件。

該組件的自適應原理是利用css3的flex佈局進行完成的，使用起來簡單易懂

下面的代碼完全是純手寫的，若有寫錯的地方還望指正。

QQ:809002582 戴向天

廢話不多說了，直接上代碼👇👇👇

layout-div 組件詳情 》https://blog.csdn.net/weixin_41088946/article/details/91448369

<template>
  <layout-div class="bg-e over-h flex-center flex" :width="width" :height="height" :unit="unit">
    <img :src="src" @click="clickHandle" class="dis-n" ref="ddImg" @load="layer">
    <slot/>
  </layout-div>
</template>

<script>
  export default {
    props: {
      width: {
        type: Number,
        default: 45
      },
      height: {
        type: Number,
        default: 45
      },
      src: {
        type: String,
        default: ''
      },
      unit: {
        type: String,
        default: 'rem'
      },
      type: {
        type: String,
        default: 'auto'
      },
      fillet: {
        type: Number,
        default: 0
      },
      stop: {     //是否阻止冒泡
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        multiline: 100,   //寬高，倍數 可根據UI的尺寸圖進行設置比例 100==>相對於 750*1334
      }
    },
    methods: {
      clickHandle(e) { //點擊事件處理
        this.stop && e.stopPropagation()
        this.$emit('click')
      },
      layer() {
        let item = this.$refs.ddImg,
          parent = item.parentNode,
          pw = parent.clientWidth,
          ph = parent.clientHeight,
          w = item.width,
          h = item.height
        // 父級是一個正方形
        if (this.width == this.height) {
          if (w == h) {// 圖片是正方形
            if (w >= pw) {
              item.style.width = '100%'
            } else {
              item.style.height = '100%'
            }
          } else if (w > h) { //圖片是一個橫向的矩形
            item.style.height = '100%'
          } else if (w < h) {   //圖片是一個縱向的矩形
            item.style.width = '100%'
          } else {
            item.style.height = '100%'
          }
        } else if (this.width > this.height) {
          if (w == h) {// 圖片是正方形
            item.style.width = '100%'
          } else if (w > h) { //圖片是一個橫向的矩形
            if (w > pw) {
              if (pw / w * h > ph) {
                item.style.width = '100%'
              } else {
                item.style.height = '100%'
              }
            } else {
              item.style.height = '100%'
            }
          } else if (w < h) {   //圖片是一個縱向的矩形
            if (pw / w * h > ph) {
              item.style.width = '100%'
            } else {
              item.style.height = '100%'
            }
          } else {
            item.style.height = '100%'
          }
        }
        item.style.display = 'block'
      }
    }
  }
</script>


<style>
	.bg-e {
	  background-color: #eee;
	}
	.over-h {
	  overflow: hidden;
	}
	.flex-center {
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	}
	.posi-r {
	  position: relative;
	  z-index: 1;
	}
	.dis-n {
	  display: none;
	}
</style>

使用方式：

<template>
	<div>
		<!-- 注意：由於該組件對寬高度的數據類型進行了嚴格要求，所以再附值寬高的時候加上 ":"  -->
		<image src='https://avatar.csdn.net/1/8/8/3_weixin_41088946.jpg' :width="20" :height=20/>
	</div>
	
</template>
<script>
	
	import image from './image.vue'   	//導入組件

	export default {
		components:{image}		//註冊組件
	}
</script>