模仿disabled的樣式

這次帶給大家模仿disabled的樣式，模仿disabled樣式的注意事項有哪些，下面就是實戰案例，一起來看一下。

模仿disabled

外層加cursor: not-allowed

#內層組織點擊事件 pointer-events: none

<template>
    <li v-for="item in navLists" 
          href="javascript:;"
          class="li i"
          :class="{
          &#39;activeShow&#39;:item.active,
          &#39;disabled-li&#39;:!item.flag
          }">
          <a   href="javascript:;"
             :class="{disabled:!item.flag}"
             @click.stop="toolgeNav(item)">
            <h2>{{item.title}}</h2>
            <span class="samll-en" :title="item.small">{{item.small}}</span>
            <span class="samll-en-bg">{{item.small}}</span>
          </a>
    </li></template><style scoped>.disabled {
    pointer-events: none;
    /cursor: not-allowed!important;/
}
.disabled-li {
  /阻止事件/
  cursor: not-allowed !important;
}</style>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

怎麼在js的陣列中過濾掉false, null, 0, "", undefined, and NaN這些值

#table tr th 及table tr td 字體太多超出怎樣用CSS解決

怎麼設定預設開啟360極速模式

#

以上是模仿disabled的樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！