vue中使用CSS的(pointer-events)禁止鼠标的点击事件

前言：在有些场景下，我们需要把原本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