elementui实现预览图片组件二次封装

<template>
 <div>
 <el-image-viewer
  v-bind="$attrs"
  v-on="$listeners"
 />
 </div>
</template>

<script>
// 手动导入图片预览组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
 name: 'ImagePreview',
 components: { ElImageViewer }
}
</script>

<style lang="scss" scoped>
::v-deep .el-image-viewer__btn.el-image-viewer__close {
 color: #fff;
}
</style>

<template>
 <div>
 <el-button type="primary" @click="handlePictureCardPreview"
  >大图预览</el-button
 >
 <image-preview
  v-if="dialogVisible"
  :on-close="
  () => {
   dialogVisible = false;
  }
  "
  :url-list="[dialogImageUrl]"
 />
 </div>
</template>

<script>
import ImagePreview from "@/components/ImagePreview";

export default {
 components: {
 ImagePreview,
 },
 data() {
 return {
  imageUrl:
  "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1483731740,4186543320&fm=26&gp=0.jpg",
  dialogImageUrl: "",
  dialogVisible: false,
 };
 },
 methods: {
 // 预览
 handlePictureCardPreview() {
  this.dialogImageUrl = this.imageUrl;
  this.dialogVisible = true;
 }
 },
};
</script>

<template>
 <div>
 <el-image-viewer
  ref="elImageViewer"
  v-bind="$attrs"
  v-on="$listeners"
 />
 </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
 name: 'ImagePreview',
 components: { ElImageViewer },
 props: {
 // 点击mask是否隐藏大图
 maskhide: {
  type: Boolean,
  default: true
 }
 },
 mounted() {
 if (this.maskhide) {
  this.addHideToMask()
 }
 },
 methods: {
 addHideToMask() {
  this.$viewer = this.$refs.elImageViewer
  if (this.$viewer) {
  // 获取遮罩层元素
  const mask = this.$viewer.$el.querySelector('.el-image-viewer__mask')
  if (mask) {
   // 遮罩层增加点击事件，关闭预览
   mask.addEventListener('click', this.hide)
   // hook卸载事件，移除之前添加在mask元素的事件
   this.$once('hook:beforeMount', () => {
   mask && mask.removeEventListener('click', this.hide)
   })
  }
  }
 },
 hide() {
  this.$viewer && this.$viewer.hide()
 }
 }
}
</script>

<style lang="scss" scoped>
::v-deep .el-image-viewer__btn.el-image-viewer__close {
 color: #fff;
}
</style>