多个相邻按钮共用边框切换效果

经过我不懈努力的百度+请教别人，终于有以下成果了，如果小伙伴有更好的方法记得告诉我哦(●’◡’●)

<template>
  <div style="height: 100%">
    <div class="tab-title-box clearfix">
      <p  data-id="all">集团</p>
      <p data-id="my">板块</p>
      <p data-id="my">产业</p>
      <p data-id="my">事业部</p>
      <p data-id="my">业务单元</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "DotLoader",
    data() {
      return {
       
      }
    },

    mounted() {
      document.querySelectorAll('.tab-title-box p').forEach(item=>{
        item.addEventListener('click',function(){
          console.log(this,'this')
          // 给点击的元素添加类名
          this.classList.toggle('active')
          // 上一个兄弟元素
          let prev = this.previousElementSibling
          // 下一个兄弟元素
          let next = this.nextElementSibling
          // 上一个兄弟元素没有，视为点击的第一个，取消左边添加的边框
          if(!prev){
            this.classList.toggle('bd-left-color')
          }else{
            prev.classList.toggle('bd-right-color')
          }
          if(next){
            //
            this.classList.toggle('bd-right-color')
          }
        })
      })
    },
    methods: {
    
    },

  };
</script>

<style lang="scss" scoped>
  .tab-title-box {
    width: 50%;
    padding: 6px;
    display: flex;

  }
  .tab-title-box p {
    flex:1;
    /* width: 50%; */
    float: left;
    height: 100%;
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 400;
    color: #E82323;
    background: #FFFFFF;
    border:1px solid #E82323;
    border-left:0px
  }
  .tab-title-box p:first-child{
    border-left:1px solid #E82323;
  }
  .tab-title-box .active{
    color:#B9BCC5;
    border-color:#B9BCC5;
  }
  .tab-title-box p.bd-left-color{
    border-left-color:#B9BCC5;
  }
  .tab-title-box p.bd-right-color{
    border-right-color:#E82323;
  }
</style>