Element 中 el-tag 点击事件无效 解决办法

在最近的项目开发中 遇到了小问题 就是使用了 element el-tag 组件 但是给其添加 @click 方法 不触发,下面是解决方法:

<el-tag v-if="scope.row.mapDate.exportSituation === '1'" type="danger" @click.native="defiltFile(scope.row)">未导出</el-tag>

解决办法就是 把 click  转换成 click.native 

click.native 事件是指原生的 DOM 点击事件,它会在元素上直接触发原生的点击事件。这种方式不会经过 Vue 组件的事件系统,而是直接由 DOM 处理。通常在需要监听元素原生事件时使用。

要实现在点击富文本的图片时进行放大效果,可以使用以下方法: 1. 在富文本插入 el-image 组件,设置好图片的路径和大小等属性。 2. 在 el-image 组件上绑定 click 事件,当用户点击图片时触发该事件。 3. 在 click 事件使用 Element UI 的 Dialog 组件创建一个弹窗,将 el-image 组件放入其。 4. 在弹窗设置 el-image 组件的宽度和高度为 100%,使其铺满整个弹窗。 5. 在弹窗添加关闭按钮,点击该按钮时关闭弹窗。 以下是示例代码: ```html <template> <div> <div v-html="richText" @click="handleClick"></div> <el-dialog :visible.sync="dialogVisible" width="80%"> <el-image :src="currentImageUrl" style="width: 100%; height: 100%"></el-image> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">关闭</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { richText: '<p>这里是富文本内容<img src="https://example.com/image.jpg"></p>', dialogVisible: false, currentImageUrl: '' } }, methods: { handleClick(event) { const target = event.target if (target.tagName === 'IMG') { this.dialogVisible = true this.currentImageUrl = target.src } } } } </script> ``` 在上面的代码,我们首先在富文本插入了一个 el-image 组件,然后在其上绑定了 click 事件。当用户点击图片时,我们将弹出一个 Dialog 组件,其包含了一个 el-image 组件,并将该图片的路径传递给了 el-image 组件。此外,我们还在 Dialog 组件添加了一个关闭按钮,点击该按钮时可以关闭弹窗。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值