模仿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>

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

相关阅读：

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

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

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