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

<view class="title_value tips" id="title_value" ref="tips" v-html="article.content"></view>

在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'
		})
	}

}

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Quill Editor是一个Vue富文本编辑器插件,它可以用于在Vue项目中进行富文本编辑。您可以通过安装Vue-Quill-Editor和Quill来使用它。 关于图片预览的问题,根据提供的引用内容,我没有找到直接关于富文本图片预览的说明。但是,根据Vue Quill Editor的使用方法,您可以使用自定义的toolbar来实现相关功能。您可以在toolbar中添加一个按钮,当用户点击该按钮时,触发一个方法来预览富文本中的图片。您可以使用Vue的v-if指令根据条件来显示或隐藏图片预览的组件。具体实现的代码如下所示: ``` <template> <div class="editor"> ... <!-- 自定义toolbar中增加图片预览按钮 --> <div id="my-toolbar"> ... <button @click="previewImages">预览图片</button> </div> ... </div> </template> <script setup> import { QuillEditor, Quill } from '@vueup/vue-quill' import { getCurrentInstance, ref } from "vue"; const { proxy } = getCurrentInstance(); const previewImages = () => { // 实现预览图片的逻辑 // 可以使用Quill的API获取富文本中的图片,然后展示在预览组件中 } </script> ``` 在上述代码中,您可以在`previewImages`方法中实现预览图片的逻辑。您可以使用Quill的API获取富文本中的图片,并将其显示在预览组件中。 需要注意的是,具体的图片预览逻辑和组件实现取决于您的具体需求和项目实现。您可以根据自己的情况进行适当的调整和扩展。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue-Quill-Editor富文本编辑器的使用教程](https://download.csdn.net/download/weixin_38701952/13980065)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [使用vue-quill展示富文本内容](https://blog.csdn.net/qq_36576430/article/details/127793120)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值