liebao-web/src/components/set.vue

<template>
  <div class="setting">
    <el-row class="order_tab">
      <el-col :span="15">
        <div class="tabList">
          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
            <span>{{item.name}}</span>
            <div class="tab_line"></div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="content">
      <el-col :span="24">
        <component v-if="renderComponent" :is="activeName"></component>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import voiceSetting from "./settingComponents/voiceSetting.vue";
import deliverySetting from "./settingComponents/deliverySetting.vue";
export default {
  name: "HelloWorld",
  data() {
    return {
      tabList: [
        { name: "自动接单/语音设置", index: 0,activeName: 'voiceSetting' },
        { name: "推荐/屏蔽运力", index: 1,activeName: 'deliverySetting' },
      ],
      tabNum: 0,
      activeName: "voiceSetting",
      renderComponent: true,
    };
  },
  components: {
    voiceSetting,
    deliverySetting,
  },
  methods: {
    forceRerender() {
      // 从 DOM 中删除 my-component 组件
      this.renderComponent = false;
      this.$nextTick(() => {
        // 在 DOM 中添加 my-component 组件
        this.renderComponent = true;
      });
    },
    changeTabs(i) {
      if (i === this.tabNum) {
        this.forceRerender();
        return;
      }
      this.tabNum = i;
      this.activeName = this.tabList[i].activeName;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.setting {
  .order_tab {
    width: 100%;
    height: 74px;
    background: #fff;

    .tabList {
      width: 100%;
      height: 74px;
      padding-top: 20px;
      padding-left: 36px;
      box-sizing: border-box;
      display: flex;

      .tab_item {
        min-width: 58px;
        margin-right: 56px;
        font-size: 16px;
        font-weight: 500;
        color: #b1b1b1;
        position: relative;
        text-align: center;
        cursor: pointer;

        .tab_line {
          width: 58px;
          height: 6px;
          background: #fff;
          border-radius: 3px;
          margin: 15px auto 0;
        }
      }

      .tab_item_ac {
        color: #fc7200;

        .tab_line {
          background: #fc7200;
        }
      }
    }
  }
  .content {
    width: 100%;
    margin-top: 10px;
  }
}
</style>