vue自定義指令擷取圖片中心顯示

木木_fth發表於2018-07-31
Vue

使用vue做專案時，有一種產品需求，是像朋友圈一樣展示圖片，在小圖時，只展示中心的一部分圖片

在vue中可以用自定義指令來做

  • 頁面程式碼
<div class="image-item" v-for="(image, index) in data.img" :key="index">
    <img v-interceptImg :src="image.img_min" alt="">
</div>
複製程式碼
  • 樣式程式碼
.image-item {
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}
複製程式碼
  • 自定義指令程式碼
export function interceptImg (el, binding) {
  el.addEventListener('load', () => {
    let width = el.naturalWidth;
    let height = el.naturalHeight;
    // 獲取父元素的設定寬度
    let parentWidth = Number(window.getComputedStyle(el.parentNode).width.replace('px', ''));
    let parentHeight = Number(window.getComputedStyle(el.parentNode).height.replace('px', ''));
    // 獲取父元素寬高比例
    let scale = binding.value ? binding.value.scale : parentHeight / parentWidth;
    // 清除元素style值
    el.style = '';
    if (height / width < scale) {
      el.style.height = '100%';
      // 獲取圖片放入後實際的寬度
      // let imgWidth = Number(window.getComputedStyle(el).width.replace('px', ''));
      let imgWidth = (width * parentHeight) / height;
      el.style.marginLeft = `${(parentWidth - imgWidth) / 2}px`;
    } else if (height / width > scale) {
      el.style.width = '100%';
    } else {
      el.style.width = '100%';
      el.style.height = '100%';
    }
  });
}
複製程式碼

相關文章