VUE tab切换，通过点击 按钮切换tab

最近写了一个关于医疗的前后端分离的管理系统，写这篇文章纯属是记录项目中的小组件，求大佬们指点（不喜勿喷）

好了好了，废话少说，上代码

布局部分

    <div class="diseaseQuestionnaire">
      <div class="dq_head" @mousedown="dragMove($event)">
        <span>问卷</span>
        <span class="add_Zytzbx_head_r fr clearfix" @click="hide_diseaseQuestionnaire()"></span>
      </div>
      <div class="dq_con">
        <ul class="dp_con_head">
          <!-- <li @click="tab(index)" v-for="(item,index) in items" :key="index" :class="{acts : index===curId}">{{item.item}}</li> -->
          <li @click="tab(index)" v-for="(item,index) in items" :key="index" :class="index===curId ? 'active':''">{{item.item}}</li>
        </ul>
        <div class="dp_con_body">
          <div v-show="curId==0">个人基本信息</div>
          <div v-show="curId==1">个人疾病史</div>
          <div v-show="curId==2">个人用药史</div>
          <div v-show="curId==3">家族疾病史</div>
          <div v-show="curId==4">吸烟</div>
          <div v-show="curId==5">膳食</div>
        </div>
      </div>
      <div class="dq_foot">
        <div>
          <span @click="previous_btn()">上一步</span>
          <span @click="next_btn()">下一步</span>
          <span>暂存问卷</span>
        </div>
      </div>
    </div>

js部分

data(){
    return {
         // 选项卡
      curId: 0,
      items: [
        { item: '个人基本信息' },
        { item: '个人疾病史' },
        { item: '个人用药史' },
        { item: '家族疾病史' },
        { item: '吸烟' },
        { item: '膳食' }
      ],
    }
}

    // 拖拽
    dragMove(e) {
      let odiv = e.target; // 获取目标元素
      let aaa = e.target.parentElement; // 获取目标元素的父级元素
      //计算出鼠标相对点击元素的位置,e.clientX获取的是鼠标的位置，OffsetLeft是元素相对于外层元素的位置
      let x = e.clientX - aaa.offsetLeft;
      let y = e.clientY - aaa.offsetTop;
      document.onmousemove = (e) => {
        // 获取拖拽元素的位置
        let left = e.clientX - x;
        let top = e.clientY - y;
        this.positionX = left;
        this.positionY = top;
        //console.log(document.documentElement.clientHeight,aaa.offsetHeight)
        // 把拖拽元素 放到 当前的位置
        if (left <= 0) {
          left = 0;
        } else if (
          left >=
          document.documentElement.clientWidth - aaa.offsetWidth
        ) {
          //document.documentElement.clientWidth 屏幕的可视宽度
          left = document.documentElement.clientWidth - aaa.offsetWidth;
        }
        if (top <= 0) {
          top = 0;
        } else if (
          top >=
          document.documentElement.clientHeight - aaa.offsetHeight
        ) {
          // document.documentElement.clientHeight 屏幕的可视高度
          top = document.documentElement.clientHeight - aaa.offsetHeight;
        }
        aaa.style.left = left + "px";
        aaa.style.top = top + "px";
      };
      // 为了防止 火狐浏览器 拖拽阴影问题
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },

    // 选项卡
    tab(index) {
      this.curId = index;
    },
    // 隐藏问卷
    hide_diseaseQuestionnaire() {
      $('.diseaseQuestionnaire').hide();
    },
    

    // 上一步
    previous_btn() {
      if (this.curId == 0) {
        // console.log('当前点击的是', this.curId);
        this.isSuc = true;
        setTimeout(() => {
          this.isSuc = false;
        }, 1000);
        this.sucMsg = '当前已是第一页';
      } else if (this.curId < this.items.length) {
        this.curId--;
        console.log(this.curId);
      }
    },
    // 下一步
    next_btn() {
      if (this.curId < this.items.length - 1) {
        this.curId++;
        console.log(this.curId);

      } else if (this.curId === this.items.length - 1) {
        console.log(this.curId === this.items.length - 1);
        this.isSuc = true;
        setTimeout(() => {
          this.isSuc = false;
        }, 1000);
        this.sucMsg = '当前已是最后一页';
        return
      }

    },

CSS部分

.diseaseQuestionnaire {
  width: 1000px;
  height: 800px;
  position: fixed;
  left: 30%;
  top: 10%;
  background-color: #fff;
  border: 1px solid #ccc;
}
.dq_head {
  width: 100%;
  height: 30px;
  line-height: 30px;
  background-color: #6caef5;
  padding-left: 10px;
  box-sizing: border-box;
  cursor: move;
}
.dq_head span {
  font-size: 12px;
  font-weight: bold;
  color: #404040;
  height: 16px;
}
.dq_con {
  width: 100%;
  height: 700px;
}
.dp_con_head {
  width: 1000px;
  border-bottom: 1px #c3d9e0 solid;
  background-color: #daeef5;
  word-break: keep-all;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: auto;
  color: #404040;
  font-size: 16px;
}
.dp_con_head li {
  display: inline-block;
  border: 1px #c3d9e0 solid;
  border-bottom: none;
  padding: 5px 10px;
  font-size: 16px;
  cursor: pointer;
  background-color: #daeef5;
}
/*滚动条整体样式*/
.dp_con_head::-webkit-scrollbar {
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}

/*滚动条里面小方块*/
.dp_con_head::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
/*滚动条里面轨道*/
.dp_con_head::-webkit-scrollbar-track {
  　　-webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.dp_con_body {
  height: 660px;
  overflow-y: scroll;
  padding: 30px;
  box-sizing: border-box;
}
.dp_con_body::-webkit-scrollbar {
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.dp_con_body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.dp_con_body::-webkit-scrollbar-track {
  　　-webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.dp_con_body_item_a {
  padding: 10px;
  box-sizing: border-box;
}
.dp_con_body_item_a label {
  margin: 0 20px;
}
.dq_foot {
  width: 100%;
  height: 70px;
  position: relative;
  background-color: #eee;
}
.dq_foot > div {
  position: absolute;
  right: 20px;
  top: 20px;
}
.dq_foot > div span {
  display: inline-block;
  padding: 5px 10px;
  background-color: #eba828;
  color: #fff;
  cursor: pointer;
  margin: 0 10px;
}
.active {
  background-color: #fff !important;
  border-bottom: none;
  color: #000;
}