datang-ui/src/components/LeftNav/LeftNav.vue

<template>
  <div>
    <div class="left-title d-flex align-center justify-center">
      {{ list.title }}
    </div>
    <template v-for="item in list.children">
      <div
        :key="item.code"
        class="left-nav left-child d-flex align-center justify-center"
        :class="code === item.code ? 'active' : ''"
        @click="changeQuery(item.code, item.url)"
      >
        {{ item.title }}
      </div>
      <template v-if="item.children && item.children.length && getShow(item.code)">
        <div
          class="left-nav-child d-flex align-center justify-center"
          v-for="child in item.children"
          :class="childCode === child.code ? 'active' : ''"
          :key="child.code"
          @click="changeQuery(child.code, item.url)"
        >
          {{ child.title }}
        </div>
      </template>
    </template>
  </div>
</template>
<script>
export default {
  name: 'LeftNav',
  props: {
    list: {
      default: () => {},
      type: Object,
    },
    code: {
      default: '',
      type: String,
    },
  },
  data() {
    return {
      childCode: '',
      str: '',
    };
  },

  methods: {
    changeQuery(code, status, url) {
      if (!url) {
        if (this.code && code !== this.code) {
          this.$router.push({
            query: { code },
          });
          this.$emit('chanegCode', code);
          this.childCode = code;
        }
      } else {
        if (url === '/') {
          window.open(`${window.location.href}`);
        } else {
          window.open(`${process.env.VUE_APP_BASE_URL + process.env.VUE_APP_PUBLIC_PATH}${url}?code=${code}`);
        }
      }
    },
    getShow(code) {
      if (code === this.code) {
        return true;
      } else {
        console.log('code: ', code);
        for (let i = 0; i < this.list.children.length; i++) {
          const item = this.list.children[i];
          if (item.children && item.children.length) {
            for (let k = 0; k < item.children.length; k++) {
              if (this.code === item.children[k].code && code === item.code) {
                return true;
              }
            }
          }
        }
      }
    },
  },
};
</script>
<style scoped>
.left-title {
  background-color: rgb(174, 0, 2);
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  width: 240px;
  height: 56px;
  border-bottom: 1px solid rgba(112, 112, 112, 0.1);
  background-image: url('./title-bg.png');
  background-size: 100% 100%;
}
.left-nav {
  width: 240px;
  height: 56px;
  border-bottom: 1px solid rgba(112, 112, 112, 0.1);
  margin-bottom: 1px;
}
.left-nav-child {
  width: 240px;
  height: 28px;
  border-bottom: 1px solid rgba(112, 112, 112, 0.1);
  margin-bottom: 1px;
  background-color: #f5f5f5;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.left-child {
  background-color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.left-nav:hover {
  background-color: #b54343;
  border-left: 4px solid rgb(174, 0, 2);
  color: #fff;
}
.active {
  background-color: #b54343;
  border-left: 4px solid rgb(174, 0, 2);
  color: #fff;
}
</style>