v-html圖片點(diǎn)擊放大

開發(fā)中經(jīng)常用到富文本渲染的，但是有沒(méi)有注意到富文本回來(lái)的圖片，我們需要點(diǎn)擊會(huì)放大的效果，所以還要通過(guò)點(diǎn)擊事件來(lái)實(shí)現(xiàn)的！

具體實(shí)現(xiàn)v-html圖片點(diǎn)擊放大方案：

• vux
  

• vue

• vue-images-loaded+vant-ImagePreview

• V-VIEWER

一、vux

關(guān)于圖片放大的效果，可以調(diào)用vux的組件Previewer。在輸出v-html的父元素（包裹輸出內(nèi)容的元素）綁定click事件。利用e.target.nodeName == "IMG"判斷是否點(diǎn)擊了圖片，然后可以利用 e.target.currentSrc 獲取當(dāng)前圖片的鏈接，存放進(jìn)previewer的綁定數(shù)組，讓這個(gè)數(shù)組每次點(diǎn)擊時(shí)都只存放當(dāng)前圖片的鏈接，所以觸發(fā)previewer所需要的index自然而然就解決了，每次都是0。

    <div class="content">      <div v-html="detail.data.content" @click="previewImage"></div>    </div>    <div v-transfer-dom>      <previewer :list="list" ref="previewer"></previewer>????</div>????import?{?Previewer,?TransferDom?}?from?'vux';        directives: {            TransferDom        },                components: {            Previewer        },              methods: {            previewImage (e) {????????????????if?(e.target.nodeName?==?'IMG')?{                    let url = e.target.currentSrc;                    let item = {                        src: url                    };                    this.list.length = 0;                    this.list.push(item);????????????????????this.$refs.previewer.show(0);                } else {                    return;                }            }????????},

二、vue

<!-- 新增點(diǎn)擊富文本圖片放大功能 --><div?class="wendang"?v-html="content"?@click="showImg($event)"></div><!-- 富文本圖片放大 -->    <div class="imgDolg" v-show="imgPreview.show" @click.stop="imgPreview.show = false">      <i class="el-icon-close" id="imgDolgClose" @click.stop="imgPreview.show = false"></i>      <img @click.stop="imgPreview.show = true" :src="imgPreview.img" />????</div

imgPreview:{  img:"",  show:false}

// 圖片點(diǎn)擊放大    showImg(e) {      // console.log(e.target)      if (e.target.tagName == 'IMG') {        this.imgPreview.img = e.target.src        this.imgPreview.show = true      }????},

//富文本圖片放大.imgDolg {  width: 100vw;  height: 100vh;  position: fixed;  z-index: 9999;  background-color: rgba(140, 134, 134, 0.6);  top: 0;  left: 0;  display: flex;  align-items: center;  justify-content: center;  #imgDolgClose {    position: fixed;    top: 35px;    cursor: pointer;    right: 7%;    font-size: 50px;    color: white;  }  img{    width: 80%;  }}

三、vue-images-loaded+vant-ImagePreview

npm?i?vue-images-loaded?-s

import?imageLoad?from?"vue-images-loaded";

 directives: {    imageLoad,??},

<div?v-html="data.content"?class="content"??v-imageLoad="loadImg"></div>

mounted中定義方法loadImg

//圖片縮映    loadImg() {      let _this=this      //獲取v-html中的所有img標(biāo)簽，返回一個(gè)類數(shù)組      let img = document.getElementsByTagName("img");      //將類數(shù)組轉(zhuǎn)換為數(shù)組      img =  Array.from(img)      //遍歷數(shù)組添加點(diǎn)擊事件     img.forEach((element,index) => {     //把v-html中img的src屬性添加至data中定義的imageUrl中        _this.imageUrl.push(element.src)        //添加點(diǎn)擊事件       element.οnclick=function(){        //通過(guò)函數(shù)調(diào)用vant-ImagePreview組件         ImagePreview({images: _this.imageUrl,startPosition:index})       }     });????},

四、V-VIEWER

npm install v-viewer --save

import Vue from 'vue';import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)Viewer.setDefaults({  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }})

<viewer :images="photo">       //photo 一定要一個(gè)數(shù)組，否則報(bào)錯(cuò)          <img                v-for="(src,index) in photo"                :src="src"                :key="index"                :onerror="errorImg"              ></viewer>