25
11/19
详解css3 pointer-events(阻止hover、active、onclick等触发事件)
pointer-events 更像是JavaScript,它能够: 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的 hover 和 active 状态的变化触发事件 阻止JavaScript点击动作触发的事件 实际代码使用中案例: 1、提交页面,提交按钮点击后,添加这个样式属性(style="pointer-events"),来防止重复提交。 2、一些层的绝对定位,覆盖按钮,穿透可以点击它。等等。 来看下具体用法: pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all...
25
11/19
:host 和::ng-deep的使用
:host 表示选择当前的组件。 ::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。 1.修改样式 :host { background: #F5F5F5; overflow: hidden; padding: 24px; display: block; } .card-container ::ng-deep .ant-tabs-card .ant-tabs-content { height: 120px; margin-top: -16px; } 2.阻止默认事件 ::ng-deep .mat-horizontal-stepper-header{ pointer-events: none!important; } 3.