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