vue8方向控制，主要作用于云台

一、效果图

二、编写步骤

<template>
  <div class="rocker-con">
    <svg
      id="gimm"
      xmlns="http://www.w3.org/2000/svg"
      :width="w"
      :height="h"
      viewBox="0 0 140.47 140.47"
    >
      <circle id="bg" class="cls-1" cx="70" cy="70" r="70" />
      <g>
        <path
          d="M1737.05,386.4a70,70,0,1,1-37.65,91.556A69.991,69.991,0,0,1,1737.05,386.4Zm13.09,31.379a36,36,0,1,1-19.36,47.085A35.99,35.99,0,0,1,1750.14,417.776Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-1"
        ></path>
        <path
          id="gimm-right-t"
          d="M1797.22,437.139a35.861,35.861,0,0,0-19.53-19.434l12.93-31.445a69.771,69.771,0,0,1,37.98,37.787h0l-31.38,13.092h0Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-2"
          @click="controlClick(3)"
        ></path>
        <path
          id="gimm-up"
          d="M1777.69,417.705a35.883,35.883,0,0,0-27.55.07L1737.05,386.4a69.768,69.768,0,0,1,53.57-.137Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-2"
          @click="controlClick(1)"
        ></path>
        <path
          id="gimm-left-t"
          d="M1737.05,386.4h0l13.09,31.378h0a35.847,35.847,0,0,0-19.43,19.532l-31.45-12.931A69.776,69.776,0,0,1,1737.05,386.4Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-2"
          @click="controlClick(2)"
        ></path>
        <path
          id="gimm-left"
          d="M1730.78,464.861h0l-31.38,13.092h0a69.765,69.765,0,0,1-.14-53.576l31.45,12.931A35.85,35.85,0,0,0,1730.78,464.861Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-2"
          @click="controlClick(7)"
        ></path>
        <path
          id="gimm-right"
          d="M1797.22,437.139a35.85,35.85,0,0,1,.07,27.553l31.45,12.931a69.763,69.763,0,0,0-.14-53.575h0l-31.38,13.092h0Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-2"
          @click="controlClick(8)"
        ></path>
        <path
          id="gimm-right-b"
          d="M1797.29,464.692a35.852,35.852,0,0,1-19.43,19.533l13.09,31.378a69.776,69.776,0,0,0,37.79-37.98Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-2"
          @click="controlClick(6)"
        ></path>
        <path
          id="gimm-bottom"
          d="M1790.95,515.6h0l-13.09-31.378h0a35.883,35.883,0,0,1-27.55.07l-12.93,31.445A69.768,69.768,0,0,0,1790.95,515.6Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-2"
          @click="controlClick(4)"
        ></path>
        <path
          id="gimm-left-b"
          d="M1730.78,464.862h0l-31.38,13.092h0a69.764,69.764,0,0,0,37.98,37.787l12.93-31.445A35.863,35.863,0,0,1,1730.78,464.862Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-2"
          @click="controlClick(5)"
        ></path>
      </g>
      <g style="pointer-events: none;">
        <path
          id="s-top"
          d="M1770.84,402.426h-13.32l6.66-11.331Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-4"
        ></path>
        <path
          id="s-right-t"
          d="M1802.17,420.417l-7.33-9.5,12.38-1.968Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-4"
        ></path>
        <path
          id="s-right"
          d="M1812.81,457.707V444.389l11.33,6.659Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-4"
        ></path>
        <path
          id="s-right-b"
          d="M1802,479.371l-7.28,9.539,12.38,1.9Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-4"
        ></path>
        <path
          id="s-bottom"
          d="M1757.53,499.677h13.32l-6.66,11.331Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-4"
        ></path>
        <path
          id="s-left-b"
          d="M1725.44,479.848l7.33,9.5-12.37,1.968Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-4"
        ></path>
        <path
          id="s-left"
          d="M1716,444v14l-11-7Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-4"
        ></path>
        <path
          id="s-left-t"
          d="M1725.62,419.894l7.28-9.539-12.39-1.905Z"
          transform="translate(-1693.97 -380.969)"
          class="cls-4"
        ></path>
      </g>
    </svg>
  </div>
</template>

<script>
export default {
  props: {
    w: {
      type: Number,
      default: 140,
    },
    h: {
      type: Number,
      default: 140,
    },
  },
  data() {
    return {}
  },
  methods: {
    controlClick(val) {
      // 1-上，2.左上，3.右上，4.下，5.左下，6.右下，7.左，8.右，
      this.$emit('rockChange', val)
    },
  },
}
</script>

<style lang="less" scoped>
.rocker-con {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  /* 控制整体背景色 */
  .cls-1 {
    fill: #082644;
    fill-opacity: 0;
  }
  /* 控制圆盘背景色 */
  .cls-2 {
    fill: #000;
    opacity: 0.15;
  }
  /* 填充规则 */
  .cls-2,
  .cls-4 {
    fill-rule: evenodd;
  }

  /* 箭头颜色 */
  .cls-4 {
    fill: #fff;
    opacity: 1;
  }

  #gimm-right-t:hover,
  #gimm-right-b:hover,
  #gimm-right:hover,
  #gimm-left:hover,
  #gimm-left-t:hover,
  #gimm-left-b:hover,
  #gimm-up:hover,
  #gimm-bottom:hover {
    fill: #1a75ff !important;
    opacity: 1 !important;
    cursor: pointer;
  }
}
</style>

三、使用

<Rocker @rockChange="setPtzCmdChange"></Rocker>

setPtzCmdChange(val) {
  this.controlPTz.ptzCmd = val
},

总结

提示：这里对文章进行总结：

送自己和大家一句话吧：乾坤未定，你我皆是黑马！！！加油