使用伪元素扩大点击区域

<template>
  <div id="app">
    <span @click="close">x</span>
  </div>
</template>
<script>
export default {
  methods: {
    close() {
      console.log('123')
    }
  }
}
</script>
<style lang="less" scoped>
#app {
  > span {
    position: relative;
  }
  > span::after {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    background-color: rgba(255, 0, 0, 0.5);
  }
}
</style>