<template>
  <view>
    <template v-for="(group, i) of components">
      <l-title :key="i" :color="group.color" class="margin-top">{{ group.title }}类组件：</l-title>

      <view :key="i + 1000" class="cu-list grid col-4">
        <view
          v-for="(item, index) in group.list"
          @click="toPage(`${group.url}/${item.url}`)"
          :key="index"
          class="cu-item"
        >
          <view :class="['cuIcon-' + item.icon, 'text-' + group.color]"></view>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
import components from './components.json'

export default {
  data() {
    return { components }
  },

  methods: {
    // 点击组件项，跳转到组件页面
    toPage(pageUrl) {
      this.NAV_TO(`/pages/demo/${pageUrl}`)
    }
  }
}
</script>
