official/src/pages/@wcui/docs/components/aside.vue

<template>
  <wc-scroll class="tree-box noselect">
    <dl class="chapters">
      <dt class="title">
        <a
          v-for="it in menu.base"
          :class="{ a: nav === it.id }"
          :href="'?' + it.id"
        >
          <span>{{ it.name }}</span>
          <em>{{ it.id }}</em>
        </a>
      </dt>
      <dt class="title">表单组件</dt>
      <dd class="subtitle">
        <a
          class="text-ell"
          v-for="it in menu.form"
          :class="{ a: nav === it.id }"
          :href="'?' + it.id"
        >
          <span>{{ it.name }}</span>
          <em>{{ it.id }}</em>
        </a>
      </dd>
      <dt class="title">布局组件</dt>
      <dd class="subtitle">
        <a
          class="text-ell"
          v-for="it in menu.layout"
          :class="{ a: nav === it.id }"
          :href="'?' + it.id"
        >
          <span>{{ it.name }}</span>
          <em>{{ it.id }}</em>
        </a>
      </dd>
      <dt class="title">数据组件</dt>
      <dd class="subtitle">
        <a
          class="text-ell"
          v-for="it in menu.data"
          :class="{ a: nav === it.id }"
          :href="'?' + it.id"
        >
          <span>{{ it.name }}</span>
          <em>{{ it.id }}</em>
        </a>
      </dd>
      <dt class="title">导航组件</dt>
      <dd class="subtitle">
        <a
          class="text-ell"
          v-for="it in menu.navs"
          :class="{ a: nav === it.id }"
          :href="'?' + it.id"
        >
          <span>{{ it.name }}</span>
          <em>{{ it.id }}</em>
        </a>
      </dd>
      <dt class="title">弹窗组件</dt>
      <dd class="subtitle">
        <a
          class="text-ell"
          v-for="it in menu.dialog"
          :class="{ a: nav === it.id }"
          :href="'?' + it.id"
        >
          <span>{{ it.name }}</span>
          <em>{{ it.id }}</em>
        </a>
      </dd>
      <dt class="title">其他组件</dt>
      <dd class="subtitle">
        <a
          class="text-ell"
          v-for="it in menu.other"
          :class="{ a: nav === it.id }"
          :href="'?' + it.id"
        >
          <span>{{ it.name }}</span>
          <em>{{ it.id }}</em>
        </a>
      </dd>
    </dl>
  </wc-scroll>
</template>

<script>
export default {
  props: {
    nav: { type: String, default: 'logs' }
  },
  data() {
    return {
      menu: {
        base: [
          { id: 'logs', name: '更新日志' },
          { id: 'install', name: '安装' },
          { id: 'colors', name: '配色' },
          { id: 'icons', name: '图标' }
        ],
        form: [
          { id: 'wc-button', name: '按钮' },
          { id: 'wc-link', name: '超连接' },
          { id: 'wc-input', name: '文本框' },
          { id: 'wc-passwd', name: '密码框' },
          { id: 'wc-number', name: '数字文本框' },
          { id: 'wc-textarea', name: '文本域' },
          { id: 'wc-select', name: '选择框' },
          { id: 'wc-switch', name: '开关' },
          { id: 'wc-radio', name: '单选框' },
          { id: 'wc-checkbox', name: '复选框' },
          { id: 'wc-star', name: '评分条' },
          { id: 'wc-slider', name: '滑块' },
          { id: 'wc-color', name: '取色器' }
        ],
        layout: [
          { id: 'wc-space', name: '间隔' },
          { id: 'wc-cell', name: '单元格' }
        ],
        navs: [
          { id: 'wc-dropdown', name: '下拉菜单' },
          { id: 'wc-steps', name: '步骤条' },
          { id: 'wc-menu', name: '菜单' },
          { id: 'wc-tabs', name: '选项卡' }
        ],
        data: [
          { id: 'wc-progress', name: '进度条' },
          { id: 'wc-table', name: '表格' },
          { id: 'wc-tree', name: '树形菜单' },
          { id: 'wc-pager', name: '分页' },
          { id: 'wc-timeline', name: '时间线' },
          { id: 'wc-scroll', name: '滚动容器' },
          { id: 'wc-code', name: '代码块' },
          { id: 'wc-markd', name: 'MD渲染组件' }
        ],
        dialog: [
          { id: 'wc-layer', name: '弹层' },
          { id: 'wc-notify', name: '通知' },
          { id: 'wc-drawer', name: '抽屉' }
        ],
        other: [
          { id: 'wc-meditor', name: 'MD编辑器' },
          { id: 'wc-editor', name: '富文本编辑器' },
          { id: 'wc-badge', name: '标记' },
          { id: 'wc-divider', name: '分割线' }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-box {
  width: 220px;
  height: 100%;

  .chapters {
    padding: 32px;
    line-height: 2;
    border-right: 1px solid var(--color-plain-2);
    background: #fff;

    .title {
      a {
        color: var(--color-dark-2);
      }
    }
    dt.title {
      color: var(--color-teal-1);
    }
    .subtitle {
      padding-left: 12px;
      color: var(--color-dark-2);
    }

    a {
      display: block;

      span {
      }
      em {
        margin-left: 8px;
        font-style: normal;
        font-size: 12px;
        color: var(--color-grey-2);
      }

      &:hover,
      &:hover em,
      &.a,
      &.a em {
        color: var(--color-red-1);
      }
    }
  }
}
</style>