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%';
    }
  });
}
复制代码