vue中单独使用element-plus图片放大功能

使用element的隐藏组件element-image-viewer

一、引入组件

注意：url-list的值为数组，通过showImageViewer控制显隐

<el-image-viewer @close="closeImgViewer" :url-list="imageUrl" v-if="showImageViewer" />

二、在需要预览的地方绑定点击事件

<el-form-item label="背景" prop="background" @click="viewImg($event)">
   <div v-html="formData.background" class="content-text"></div>
</el-form-item>

三、点击事件中给预览的图片地址赋值并将showImageViewer改为true

viewImg(event) {
   if (event.target.nodeName == 'IMG') {
      let src = event.target.currentSrc;
      //下面这两句是重点,,,
      this.imageUrl = [src];
      this.showImageViewer = true;
   }
},

四、预览关闭事件

closeImgViewer() {
   this.showImageViewer = false;
}