Imitate disabled style

This time I will bring you the style of imitating disabled, what are the precautions for imitating the disabled style, the following is a practical case, let's take a look.

Imitate disabled

Outer layer plus cursor: not-allowed

Inner layer organization click

Events 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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to filter out false, null, 0, "", undefined, and NaN values ​​in a js array

How to use CSS to solve the problem of too many fonts in table tr th and table tr td

How to set the 360 ​​speed mode to open by default

The above is the detailed content of Imitate disabled style. For more information, please follow other related articles on the PHP Chinese website!