深圳网站ui设计,网站产品 模块,苏州科建设交通学院网站,沂源网站简介
按钮#xff0c;尤其是手机端使用的页面按钮#xff0c;很需要热区#xff0c;避免用户点击困难。
分析
1.不改变原有的样式 2.扩大可点击范围
具体实现
templatediv classiconBtnBoxdiv:classprops.widthHeight ? iconBt…简介
按钮尤其是手机端使用的页面按钮很需要热区避免用户点击困难。
分析
1.不改变原有的样式 2.扩大可点击范围
具体实现
templatediv classiconBtnBoxdiv:classprops.widthHeight ? iconBtnFixed : iconBtnPadding:style{--hotPadding: -${props.hotPadding}px,--widthHeight: ${props.widthHeight}px}slot //div/div
/templatescript setup langtsimport { withDefaults, defineProps } from vueconst props withDefaults(defineProps{// hotPadding 与 widthHeight 选择传递一个即可或都不传/*** 自适应放大的热区扩大值单位是px*/hotPadding?: number/*** 固定的热区宽高单位是px*/widthHeight?: number}(),{hotPadding: 5})
/scriptstyle scoped langless.iconBtnBox {position: relative;:active {opacity: 0.6;}}.iconBtnFixed::before {content: ;width: var(--widthHeight);height: var(--widthHeight);position: absolute;top: 50%;right: 50%;transform: translate(50%, -50%);}.iconBtnPadding::before {content: ;position: absolute;top: var(--hotPadding); /* 增大点击热区的顶部 */right: var(--hotPadding); /* 增大点击热区的右侧 */bottom: var(--hotPadding); /* 增大点击热区的底部 */left: var(--hotPadding); /* 增大点击热区的左侧 */}
/style最后
觉得有用的朋友请用你的金手指点一下赞或者评论留言一起探讨技术
