模仿disabled的样式

这次给大家带来模仿disabled的样式，模仿disabled样式的注意事项有哪些，下面就是实战案例，一起来看一下。

模仿disabled

外层加 cursor: not-allowed

内层组织点击事件 pointer-events: none

<template>
    <li v-for="item in navLists" 
          href="javascript:;"
          class="li i"
          :class="{
          'activeShow':item.active,
          'disabled-li':!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>

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

相关阅读：

怎样在js的数组中过滤掉false, null, 0, "", undefined, and NaN这些值

table tr th 及table tr td 字体太多超出怎样用CSS解决

怎样设置默认打开360极速模式

以上就是模仿disabled的样式的详细内容，更多请关注其它相关文章！