【知识分享】vue里实现一个带样式的云台控制的按钮

实现一个可进行上下左右，放大缩小操作的云台控制按钮，放大缩小按需求可修改成恢复至重置点，效果如下：

代码实现如下所示：

<template>

  <div class="ptz">

    <div class="outer-ring">

      <button class="caret-up">

        <i class="fa fa-caret-up"></i>

      </button>

      <button class="caret-down">

        <i class="fa fa-caret-down"></i>

      </button>

      <button class="caret-left">

        <i class="fa fa-caret-left"></i>

      </button>

      <button class="caret-right">

        <i class="fa fa-caret-right"></i>

      </butto