CHomeNav 首页导航

功能说明

用于首页显示导航菜单项的组件，支持两列或三列排版，可以显示分组标题。搭配CHomeItem子组件使用，用于展示一组功能入口。

引用方式

import { CHomeNav, CHomeItem } from '@components/layout/homeNav';

组件结构

首页导航组件由以下两个组件组成：

1. CHomeNav - 导航容器，作为导航项的容器，控制排版
2. CHomeItem - 导航项，代表一个功能入口

组件参数

CHomeNav

• layout (String，可选)：排版方式，默认值为 'two'
• two：两列排版
• three：三列排版
• title (String，可选)：分组标题，不设置则不显示

CHomeItem

• label (String，必选)：导航项名称
• icon (String，必选)：导航项图标地址
• href (String，必选)：点击后跳转的链接地址

使用示例

基础用法

<template>
  <view class="page">
    <CHomeNav title="常用功能">
      <CHomeItem
        label="订单管理"
        icon="/static/icons/order.png"
        href="/pages/order/list"
      />
      <CHomeItem
        label="客户管理"
        icon="/static/icons/customer.png"
        href="/pages/customer/list"
      />
      <CHomeItem
        label="配送管理"
        icon="/static/icons/delivery.png"
        href="/pages/delivery/list"
      />
      <CHomeItem
        label="数据统计"
        icon="/static/icons/statistics.png"
        href="/pages/statistics/index"
      />
    </CHomeNav>
  </view>
</template>

<script>
import { CHomeNav, CHomeItem } from '@components/layout/homeNav';

export default {
  components: {
    CHomeNav,
    CHomeItem
  }
}
</script>

三列排版

<template>
  <view class="page">
    <CHomeNav 
      title="快捷功能" 
      layout="three"
    >
      <CHomeItem
        label="新增订单"
        icon="/static/icons/add-order.png"
        href="/pages/order/create"
      />
      <CHomeItem
        label="新增客户"
        icon="/static/icons/add-customer.png"
        href="/pages/customer/create"
      />
      <CHomeItem
        label="扫码收款"
        icon="/static/icons/qr-payment.png"
        href="/pages/payment/scan"
      />
    </CHomeNav>
  </view>
</template>

<script>
import { CHomeNav, CHomeItem } from '@components/layout/homeNav';

export default {
  components: {
    CHomeNav,
    CHomeItem
  }
}
</script>

注意事项

1. CHomeNav 组件内部需要包含 CHomeItem 子组件，不支持其他内容
2. CHomeItem 组件使用了 CAnchor 组件处理链接跳转，能够根据链接类型自动选择合适的跳转方式
3. 根据设计，当使用两列布局时图标稍大，三列布局时图标稍小
4. 传给 CHomeItem 的 icon 应该是一个完整的图片路径
5. 不管使用哪种布局，都会自动调整导航项的间距，保证美观