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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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>
|
Copy after login
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!