uniapp开发H5 或vue的v-html富文本,给图片添加事件,点击图片放大.

在onLoad生命周期中,拿到v-html渲染的节点,并给img标签添加事件

let parentDom = window.document.getElementById('title_value')
if (parentDom && parentDom.childNodes.length > 0) {
					let p_dom = parentDom.childNodes
					p_dom.forEach(item=>{
						item.childNodes.forEach(item0=>{
							if (item0.nodeName === "IMG") {
								item0.addEventListener("click", (e) => {
									console.log(e.target.src)
									utils.previewImage(img_list.indexOf(e.target.src), img_list)
								})
							}
						})
					})
	}

utiles文件里的图片预览函数

//预览轮播图
function previewImage(index, arr) {
	let arrList = arr.map(item => { //获取当前页面的轮播图数据
		if (item.url) {
			return item.url
		} else {
			return item
		}
	})

	//uniapp预览轮播图
	if (arrList.length > 0) {
		uni.previewImage({
			current: index, //预览图片的下标
			urls: arrList, //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以
			indicator:'number'
		})
	}

}

你可能感兴趣的:(vue.js,html,uni-app)