先理思路,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下标生效,左右切换生效。