v-html给图片添加点击事件，限制图片大小

@Kacie

已于 2023-07-17 10:18:39 修改

阅读量481

点赞数

分类专栏： # Vue 文章标签： html 前端

于 2023-07-17 10:16:43 首次发布

本文链接：https://blog.youkuaiyun.com/Joye_7y/article/details/131760470

版权

Vue 专栏收录该内容

5 篇文章

订阅专栏

该文章展示了一个Vue.js组件，用于在点击含有HTMLBox类的<div>元素时打开一个40%宽度的图片查看弹窗。当用户点击的是<img>标签时，弹窗会显示所点击图片的源，并提供onerror处理机制以防图片加载失败。样式使用了Less，并且通过data属性和methods方法控制弹窗的可见性和图片URL。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
 	<div class="htmlBox" v-html="message" @click="bigImgOpen"></div>

	<!-- 图片查看弹窗 -->
	<el-dialog width="40%" title="图片查看" :visible.sync="bigImgVisible">
		<div style="width: 200px; margin: auto">
			<img οnerrοr="this.style.display='none'" width="100%" :src="dialogImageUrl" />
		</div>
	</el-dialog>
<template>
<script>
export default {
	name: 'subscribe',
	data() {
		return {
			bigImgVisible: false, // 图片弹窗状态
			dialogImageUrl: '', // 弹窗图片url
		};
	},
	methods: {
		bigImgOpen(e) {
			if (e.target.nodeName == 'IMG') {
				this.dialogImageUrl = e.target.currentSrc;
				this.bigImgVisible = true;
			}
		},
	},
}
</script>
<style lang="less" scoped>
/deep/.htmlBox {
	img {
		width: 200px !important;
		height: 200px !important;
	}
}
</style>