按钮热区扩大小技巧

一、背景

项目中经常有地方要操作的按钮很小，特别是表格的操作列需要点击很小的文字或者图标来触发事件，用户觉得不好操作，此时就需要扩大热区。
下面我以按钮为例，用伪元素的方式实现此功能，四周扩大20px

二、效果展示

三、代码

<template>
  <el-button type="primary" round @click="search">查询</el-button>
</template>

<script>
  export default {
    methods: {
      search() {
        console.log("点击查询")
      }
    }
  }
</script>

<style lang="less" scoped>
.el-button {
  margin: 30px;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: -20px;
    right: -20px;
    bottom: -20px;
    left: -20px;
  }
}
</style>