element-plus中用el-image-viewer实现图片预览

el-image-viewer是element-plus文档中没有单独描述的组件如果要了解更详细需要去看源码哦

最近小编在工作中因为多人开发为了统一图片预览风格，于是打算修改上传el-upload的预览效果，当然也可以自己去封装一个预览组件，下面是我用el-image-viewer写的一个小demo，仅供参考

<template>
  <el-image-viewer
    v-if="show"
    :url-list="props.imgs"
    teleported
    @close="closePreview"
  />
</template>

<script setup>
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  imgs: {
    type: Array,
    default: []
  }
});

// 如果页面有滚动条
watch(
  () => props.show,
  (newVal) => {
    if (newVal) {
      document.querySelector('body').style.overflow = 'hidden';
    } else {
      document.querySelector('body').style.overflow = '';
    }
  }
);

const emit = defineEmits();
function closePreview() {
  emit('update:show', false);
}
</script>

<style lang="scss" scoped>
</style>

好啦，记录今天的工作总结，就到这里啦