前言:在有些场景下,我们需要把原本img的点击事件,给禁止掉,变成不可点击事件。

一、html部分,给img添加class属性

       通过三目运算符动态添加img的属性

<img src="@assets/images/unRead.png" @click="showDtpicker()" :class="calendarFlag == true?'img-onlyRead':''" />

       关键控制div、img是否可以点击的属性是:

       pointer-events:none;(禁止鼠标点击事件)

pointer-events是CSS3的一个属性,支持的值非常多。none可以使元素永远不会成为鼠标事件的target。当其后代元素的pointer-events属性指定指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。pointer-events:none意思就是让鼠标事件失效(链接、点击等事件)。

二、css样式

.img-onlyRead{
    pointer-events:none;
}

 参考博客:

        vue中div、img如何禁止点击事件   https://www.cnblogs.com/Ky-Thompson23/p/12784872.html

 

Logo

前往低代码交流专区

更多推荐