默认情况下,div这种是没有disabled属性,没有不能点击的效果的,所以需要换个思路,增加disabled样式,如果生效的话置灰

<li
    v-for="item in data"
   :key="item.label"
   :class="{'item':true, disabled: item.disabled }"
   @click="onClick(item)"
 >
   <span>{{ item.label }}</span>
 </li>

样式:

.item{
	&.disabled {
      cursor: not-allowed;//不能点击的效果
      color: #cfd0d3;//置灰的颜色
    }
}
    

同时要设置onClick方法,如果置灰的时候返回

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐