起因

在elementui元件庫中，el-image元件有個預覽圖片功能，比較簡潔，但是和圖片繫結在一起，我們只想要一個單純的預覽元件，傳遞一個圖片，通過事件方式，顯示大圖

分析

通過檢視elementui的程式碼，發現在image（el-image元件）目錄中裡面有一個image-viewer元件,el-image元件的預覽功能也是通過這一個元件實現的，只是官方沒有把這個元件單獨暴露出來

這裡就比較簡單了，我們可以使用手動匯入元件的方式，引入image-viewer元件

image-viewer元件二次封裝

這裡大概做了三件事

• 元件方式匯入element的image-viewer元件
• 使用$attrs和$listeners把上層的屬性和方法，原封不動傳遞給image-viewer元件，不用手動處理屬性和方法，除非新增額外的功能
• 修改關閉按鈕的樣式

<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>

優化：點選mask遮罩層關閉圖片預覽

上面封裝以後，可以很簡單使用圖片預覽，美中不足的是，點選遮罩層，無法關閉大圖預覽，只能點選右上角關閉按鈕，才會關閉預覽，使用上不太方便

分析

在檢視image-viewer元件的原始碼發現，關閉按鈕繫結hide方法，用於關閉預覽的，但是遮罩層沒有繫結任何方法，遮罩層也沒有對外暴露任何方法呼叫，難受~

解決方法

• 先獲取image-viewer元件
• 隨後獲取到遮罩層元素，給遮罩層繫結一個方法，點選時候，就呼叫image-viewer元件裡的hdie方法，達到關閉的目的
• 在解除安裝元件的時候，移除之前給遮罩層繫結的方法
• 點選遮罩關閉預覽，對外暴露一個標誌，控制是否點選遮罩關閉預覽
  

完整程式碼如下：

<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>

檢視線上示例

檢視線上示例

以上就是elementui實現預覽圖片元件二次封裝的詳細內容，更多關於elementui 預覽圖片元件二次封裝的資料請關注我們其它相關文章！