快捷導(dǎo)航

elementui實(shí)現(xiàn)預(yù)覽圖片組件二次封裝

更新時(shí)間：2020年12月29日 09:19:35 作者：LastStarDust

這篇文章主要介紹了elementui實(shí)現(xiàn)預(yù)覽圖片組件二次封裝的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下

起因

在elementui組件庫(kù)中，el-image組件有個(gè)預(yù)覽圖片功能，比較簡(jiǎn)潔，但是和圖片綁定在一起，我們只想要一個(gè)單純的預(yù)覽組件，傳遞一個(gè)圖片，通過(guò)事件方式，顯示大圖

分析

通過(guò)查看elementui的代碼，發(fā)現(xiàn)在image（el-image組件）目錄中里面有一個(gè)image-viewer組件, el-image組件的預(yù)覽功能也是通過(guò)這一個(gè)組件實(shí)現(xiàn)的，只是官方?jīng)]有把這個(gè)組件單獨(dú)暴露出來(lái)

這里就比較簡(jiǎn)單了，我們可以使用手動(dòng)導(dǎo)入組件的方式，引入image-viewer組件

image-viewer組件二次封裝

這里大概做了三件事

組件方式導(dǎo)入element的image-viewer組件
使用$attrs和$listeners把上層的屬性和方法，原封不動(dòng)傳遞給image-viewer組件，不用手動(dòng)處理屬性和方法，除非添加額外的功能
修改關(guān)閉按鈕的樣式

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

<script>
// 手動(dòng)導(dǎo)入圖片預(yù)覽組件
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"
  >大圖預(yù)覽</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: {
 // 預(yù)覽
 handlePictureCardPreview() {
  this.dialogImageUrl = this.imageUrl;
  this.dialogVisible = true;
 }
 },
};
</script>

優(yōu)化：點(diǎn)擊mask遮罩層關(guān)閉圖片預(yù)覽

上面封裝以后，可以很簡(jiǎn)單使用圖片預(yù)覽，美中不足的是，點(diǎn)擊遮罩層，無(wú)法關(guān)閉大圖預(yù)覽，只能點(diǎn)擊右上角關(guān)閉按鈕，才會(huì)關(guān)閉預(yù)覽，使用上不太方便

分析

在查看image-viewer組件的源碼發(fā)現(xiàn)，關(guān)閉按鈕綁定hide方法，用于關(guān)閉預(yù)覽的，但是遮罩層沒(méi)有綁定任何方法，遮罩層也沒(méi)有對(duì)外暴露任何方法調(diào)用，難受~

解決方法

先獲取image-viewer組件
隨后獲取到遮罩層元素，給遮罩層綁定一個(gè)方法，點(diǎn)擊時(shí)候，就調(diào)用image-viewer組件里的hdie方法，達(dá)到關(guān)閉的目的
在卸載組件的時(shí)候，移除之前給遮罩層綁定的方法
點(diǎn)擊遮罩關(guān)閉預(yù)覽，對(duì)外暴露一個(gè)標(biāo)志，控制是否點(diǎn)擊遮罩關(guān)閉預(yù)覽

完整代碼如下：

<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: {
 // 點(diǎn)擊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) {
   // 遮罩層增加點(diǎn)擊事件，關(guān)閉預(yù)覽
   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>