<template>
  <div class="docs">
    <div class="title">
      <p>组件demo</p>
    </div>
    <div class="main">
      <div v-for="(item, index) in allComponents" :key="index" class="item">
        <p @click="goToRouter(item)">{{ item }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { allComponents } from '../router'
export default {
  data() {
    return {
      allComponents: allComponents.map(item => item.substr(2)).filter(item => !item.includes('index.vue'))
    }
  },
  methods: {
    goToRouter(item) {
      const name = item.replace(/\.vue/g, '')
      this.$router.push({ name })
    }
  }
}
</script>

<style lang="scss" scoped>
.docs {
    position: relative;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .title {
        font-size: 24px;
        font-weight: 700;
        padding-bottom: 15px;
    }
}
.main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .item {
        margin-left: 15px;
        color: #0c7ae8;
        cursor: pointer;
    }
}
</style>
