【知识分享】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>

      </button>

      <div class="inner-ring">

        <button class="plus"><i class="fa fa-plus"></i></button>

        <div class="line"></div>

        <button @click="controlPanTilt('ZOOM_IN')" class="minus">

          <i class="fa fa-minus"></i>

        </button>

      </div>

    </div>

  </div>

</template>

<style scoped>

.pan-tilt-button {

  color: #fff;

  border: none;

  padding: 10px;

  cursor: pointer;

}

[class*='yuntai'] {

  display: none;

}

button {

  background-color: transparent;

  border: none;

  color: #000;

  font-size: 24px;

  cursor: pointer;

}

.ptz {

  .outer-ring {

    position: relative;

    width: 80px;

    height: 80px;

    background-color: #fff;

    border-radius: 50%;

    box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;

    i {

      font-size: 20px;

      cursor: pointer;

      &:hover {

        color: #00b176;

      }

    }

    .caret-up {

      position: absolute;

      top: 4px;

      left: 36px;

      margin-left: -10px;

    }

    .caret-down {

      position: absolute;

      bottom: -3px;

      left: 36px;

      margin-left: -10px;

    }

    .caret-left {

      position: absolute;

      left: -3px;

      top: 42px;

      margin-top: -10px;

    }

    .caret-right {

      position: absolute;

      right: -14px;

      top: 42px;

      margin-top: -10px;

    }

    .ob-caret-left {

      transform: rotate(45deg);

      position: absolute;

      top: 24px;

      left: 24px;

    }

    .ob-caret-up {

      transform: rotate(45deg);

      position: absolute;

      top: 24px;

      right: 24px;

    }

    .ob-caret-right {

      transform: rotate(45deg);

      position: absolute;

      bottom: 24px;

      right: 24px;

    }

    .ob-caret-down {

      transform: rotate(45deg);

      position: absolute;

      bottom: 24px;

      left: 24px;

    }

    .inner-ring {

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      width: 40px;

      height: 40px;

      border-radius: 50%;

      background-color: #fff;

      border: 1px solid #ddd;

      .plus {

        position: absolute;

        top: 4px;

        left: 15px;

        margin-left: -10px;

      }

      .line {

        height: 1px;

        width: 100%;

        background-color: #ddd;

        position: absolute;

        top: 20px;

        left: 0;

      }

      .minus {

        position: absolute;

        bottom: -6px;

        left: 15px;

        margin-left: -10px;

      }

    }

  }

}

</style>