网页中的Vuejs / JavaScript可缩放区域

Question

如果我们打开Goog​​le地图，则可以放大和缩小地图区域。我确实想实现这样的目标。

    <template>
  <div>
    <h1>Board</h1>
    <div class="board"></div>
    <footer>footer</footer>
  </div>
</template>

在这里，我确实想将board区域设为可缩放区域。如何在HTML，CSS，JavaScript / Vue.js中实现此目标？