dl_site_nuxt/components/aside-tree.vue

<template>
  <aside class="aside-tree">
    <div>
      <div class="aside-header">
        <h3>{{ headerTitle }}</h3>
      </div>
      <nav class="tree-box">
        <no-ssr>
          <el-tree
            v-if="refresh"
            :data="treeData"
            :empty-text="$t('common.empty')"
            node-key="id"
            highlight-current
            default-expand-all
            :props="props"
            :current-node-key="currentNodeKey"
            @current-change="handleNodeClick"
          />
        </no-ssr>
      </nav>
    </div>

    <div class="mt-2">
      <h3 class="contact-us">{{ $t('contactUs.contactUs') }}</h3>
      <div class="contact-details">
        <h4 class="mt-3 mb-3">{{ footerInfo.companyName }}</h4>
        <p class="mb-2">
          <label class="mb-0">{{ $t('common.addressLabel') }}:</label>
          <span>{{ footerInfo.address }}</span>
        </p>
        <p class="mb-2">
          <label class="mb-0">{{ $t('common.tel') }}:</label>
          <span>{{ footerInfo.tel }}</span>
        </p>
        <p class="mb-2">
          <label class="mb-0">{{ $t('common.Mob/Whatsapp/Wechat') }}:</label>
          <span>{{ footerInfo.whatsapp }}</span>
        </p>
        <p class="mb-2">
          <label class="mb-0">{{ $t('common.E-mail') }}:</label>
          <span>{{ footerInfo.email }}</span>
        </p>
      </div>
    </div>
  </aside>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'AsideTree',
  props: {
    headerTitle: {
      type: String,
      default: ''
    },
    treeData: {
      type: Array,
      default: () => []
    },
    props: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          label: 'label'
        }
      }
    },
    baseUrl: {
      type: String,
      default: '/'
    }
  },
  data () {
    return {
      currentNodeKey: '',
      refresh: true
    }
  },
  computed: {
    ...mapState(['footerInfo'])
  },
  watch: {
    '$route.query.catgId': {
      handler (val) {
        this.refresh = false
        this.currentNodeKey = val
        this.$nextTick(() => {
          this.refresh = true
        })
      },
      immediate: true
    }
  },
  mounted () {
  },
  methods: {
    handleNodeClick(row,node) {
      if (node.isLeaf) {
        this.$router.push({
          path: `${this.baseUrl}`,
          query: {
            ...this.$route.query,
            catgId: row.id,
            title: node.data.label
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "element-ui/lib/theme-chalk/tree.css";
@import "element-ui/lib/theme-chalk/menu.css";
@import "element-ui/lib/theme-chalk/scrollbar.css";
.aside-tree {
  padding: 0;
  @mixin header {
    display: block;
    margin: 0;
    padding: 1.5rem 0;
    text-indent: 2.125rem;
    color: #fff;
    background-color: #015fe8;
    font-size: 1.25rem;
    font-weight: bold;
  }
  .aside-header {
    @include header;
  }
  .tree-box {
    padding: .625rem .625rem;
    border: .0625rem solid #d9dde0;
    ::v-deep .is-current {
      > .el-tree-node__content {
        color: #015fe8;
      }
    }
  }
  .contact-us {
    @include header;
  }
  .contact-details {
    padding: .625rem 1.25rem;
    border: .0625rem solid #d9dde0;
    background-color: #f5f7f9;
    font-size: .875rem;
    h4 {
      color: #302d2d;
      font-size: .875rem;
    }
    label {
      color: #77778b;
    }
  }
}

// 特殊样式小屏幕处理
@media screen and (max-width:400px) {
  
}

</style>