当前位置：首页 > article >正文

H5: 按钮的点击热区

article 2024/9/20 17:27:11

简介

按钮，尤其是手机端使用的页面按钮，很需要热区，避免用户点击困难。

分析

1.不改变原有的样式
2.扩大可点击范围

具体实现

<template>
  <div class="iconBtnBox">
    <div
      :class="props.widthHeight ? 'iconBtnFixed' : 'iconBtnPadding'"
      :style="{
        '--hotPadding': `-${props.hotPadding}px`,
        '--widthHeight': `${props.widthHeight}px`
      }"
    >
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { withDefaults, defineProps } from 'vue'

  const props = withDefaults(
    defineProps<{
      // hotPadding 与 widthHeight 选择传递一个即可，或都不传
      /**
       * 自适应放大的热区扩大值（单位是px）
       */
      hotPadding?: number
      /**
       * 固定的热区宽高（单位是px）
       */
      widthHeight?: number
    }>(),
    {
      hotPadding: 5
    }
  )
</script>

<style scoped lang="less">
  .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>