v-html如何对富文本字符串内容的图片添加点击事件

先理思路，v-html显示富文本内容，但是如何给里面的内容添加点击事件？
v-html：只是起到覆盖元素原有内容，解析并插入HTML标签。

在vue有直接给v-html点击事件赋予委托；
代码片.

<div v-html="content_message" ref="content" @click="imageEnlargement">
   {{content_message}}
</div>

imageEnlargement(e){
	if (e.target.nodeName == 'IMG') {//判断点击富文本内容为img图片
   		ImagePreview({
   			images:[e.target.currentSrc],  //获取当前图片src
   			showIndex:false,
   			loop:false,
   		})
   	} else {
   		console.log("点击内容不为img")
   	}
}

这样就能完成v-html解析后的图片点击并获取点击图片放大功能。如果需要在v-html下img图片放大并且可左右切换查看，就需要加上index下标。

如果点击img放大后需要左右切换功能，传值下标index，所以最好是直接对获取到的富文本字符串进行编辑

html
代码片.

<div v-html="img_content" ref="content">
	{{img_content}}
</div>

3、添加变量img_content和content_message;

var app = new Vue({
   el:'#wrap',
   data:{
   		content_message:'',//富文本原始数据
   		img_content:'',//富文本更新后的数据
   		img_shuzu：[],//存放img图片数组
   }
})

因为考虑到图片不止一张，那么这里就在字符串里面筛选出所有的img——找寻‘<img’，并且记录出现位置的位置和次数（ps：找寻的字符<img本身是4个长度，所以在添加的时候在第5个地方开始），仔细看以下代码。
代码片.

watch: {
   content_message:function(){//首先监听原始富文本数据
   	var that = this;
   	this.$nextTick(function(){
   		var str_new = that.content_message
   		var index = str_new.indexOf('<img'); // 字符出现的位置
   		var num = 0; // 这个字符出现的次数
   		var index_all = [];
   		while(index !== -1) {
   		    // console.log(index); // 打印字符串出现的位置
   			index_all.push(index);
   		    num++; // 每出现一次 次数加一
   		    index = str_new.indexOf('<img',index + 1); // 从字符串出现的位置的下一位置开始继续查找
   		}
   		setTimeout(function(){
   			for(var i=index_all.length;i>0;i--){//注意注意注意，考虑到上面的index循环获取字符长度，如果按照顺序进行添加在循环中，获取到下一个就会有问题，因为原有获取的位置变了，所以这里我们就找到倒序进行添加，注意注意注意。
   				var index_xiao = index_all[i-1];
   				var j = i-1;
   				str_new = str_new.slice(0,index_xiao+5)+'οnclick="see_pic('+ j +')"'+str_new.slice(index_xiao+5);//因为查询的时候<img本身就是4个长度，所以这里从查询的开始位置在加上5个长度进行添加。
   				that.img_content = str_new;
   			}
   		},0)
   		
   	})
   },
   img_content:function(){//这个监听事件只是起到保存img中的src内容，没有其他作用。
   	var that = this;
   		this.$nextTick(function(){
   			var contents = that.$refs.content
   			var children = contents.childNodes;
   			that.img_shuzu = [];
   			if(children[0].firstChild !== null){
   				for(var i =0;i<children.length;i++){
   					if(children[i].firstChild.src == undefined){
   						
   					}else{
   						// that.img_shuzu.push(children[i].firstChild.src)//这里只是把获取的img标签的src循环保存到一个数组里面。
   						for(var k=0;k<children[i].childNodes.length;k++){
   							// console.log(i,k)
   							that.img_shuzu.push(children[i].childNodes[k].src)
   						}
   					}
   				}
   			}
   		})
   },
},

mounted:function(){
	var that = this;
	window.see_pic = function(id){
		vant.ImagePreview({
			images: that.img_shuzu,
			showIndex: true,
			loop: false,
			startPosition: id
		})
	}
}

注意：在vue中标签添加的onclick事件，那么需要在生命周期mounted里面申明window.事件名= function(id){事件执行内容}
over！查看效果,点击图片


点击事件执行生效，获取点击img下标生效，左右切换生效。