1.0.2 • Published 2 months ago

@tanzhenxing/zx-breadcrumb v1.0.2

Weekly downloads
-
License
ISC
Repository
-
Last release
2 months ago

ZX-Breadcrumb 面包屑组件

显示当前页面的路径，快速返回之前的任意页面。参考 Element Plus Breadcrumb 组件设计。

特性

  • 🎯 路径导航：清晰显示页面层级关系
  • 🔗 路由跳转：支持路由跳转和外部链接
  • 🎨 自定义分隔符：支持文字和图标分隔符
  • 📏 多种尺寸：large、default、small 三种尺寸
  • 🎪 自定义样式：支持自定义颜色和样式
  • 🚫 禁用状态：支持整体或单项禁用
  • 🧩 插槽支持：支持自定义内容和分隔符

基础用法

<template>
  <zx-breadcrumb separator="/">
    <zx-breadcrumb-item :to="{ path: '/' }">首页</zx-breadcrumb-item>
    <zx-breadcrumb-item to="/promotion">推广管理</zx-breadcrumb-item>
    <zx-breadcrumb-item to="/promotion/list">推广列表</zx-breadcrumb-item>
    <zx-breadcrumb-item>推广详情</zx-breadcrumb-item>
  </zx-breadcrumb>
</template>

图标分隔符

通过设置 separator-icon 可使用相应的图标作为分隔符，注意这将使 separator 失效：

<template>
  <zx-breadcrumb separator-icon="arrow-right">
    <zx-breadcrumb-item :to="{ path: '/' }">首页</zx-breadcrumb-item>
    <zx-breadcrumb-item>推广管理</zx-breadcrumb-item>
    <zx-breadcrumb-item>推广列表</zx-breadcrumb-item>
    <zx-breadcrumb-item>推广详情</zx-breadcrumb-item>
  </zx-breadcrumb>
</template>

不同尺寸

<template>
  <!-- 小号 -->
  <zx-breadcrumb size="small">
    <zx-breadcrumb-item to="/">首页</zx-breadcrumb-item>
    <zx-breadcrumb-item>列表页</zx-breadcrumb-item>
    <zx-breadcrumb-item>详情页</zx-breadcrumb-item>
  </zx-breadcrumb>

  <!-- 默认 -->
  <zx-breadcrumb size="default">
    <zx-breadcrumb-item to="/">首页</zx-breadcrumb-item>
    <zx-breadcrumb-item>列表页</zx-breadcrumb-item>
    <zx-breadcrumb-item>详情页</zx-breadcrumb-item>
  </zx-breadcrumb>

  <!-- 大号 -->
  <zx-breadcrumb size="large">
    <zx-breadcrumb-item to="/">首页</zx-breadcrumb-item>
    <zx-breadcrumb-item>列表页</zx-breadcrumb-item>
    <zx-breadcrumb-item>详情页</zx-breadcrumb-item>
  </zx-breadcrumb>
</template>

自定义颜色

<template>
  <zx-breadcrumb 
    color="#409eff" 
    active-color="#f56c6c"
    separator-color="#909399"
  >
    <zx-breadcrumb-item to="/">首页</zx-breadcrumb-item>
    <zx-breadcrumb-item to="/list">列表页</zx-breadcrumb-item>
    <zx-breadcrumb-item>详情页</zx-breadcrumb-item>
  </zx-breadcrumb>
</template>

外部链接

<template>
  <zx-breadcrumb>
    <zx-breadcrumb-item href="https://www.example.com" target="_blank">
      外部链接
    </zx-breadcrumb-item>
    <zx-breadcrumb-item>当前页面</zx-breadcrumb-item>
  </zx-breadcrumb>
</template>

禁用状态

<template>
  <!-- 整体禁用 -->
  <zx-breadcrumb disabled>
    <zx-breadcrumb-item to="/">首页</zx-breadcrumb-item>
    <zx-breadcrumb-item>详情页</zx-breadcrumb-item>
  </zx-breadcrumb>

  <!-- 单项禁用 -->
  <zx-breadcrumb>
    <zx-breadcrumb-item to="/">首页</zx-breadcrumb-item>
    <zx-breadcrumb-item disabled>禁用项</zx-breadcrumb-item>
    <zx-breadcrumb-item>详情页</zx-breadcrumb-item>
  </zx-breadcrumb>
</template>

自定义内容

<template>
  <zx-breadcrumb>
    <zx-breadcrumb-item to="/">
      <zx-icon name="home" size="16" color="#409eff" />
      首页
    </zx-breadcrumb-item>
    <zx-breadcrumb-item>
      <template #separator>
        <zx-icon name="arrow-right" size="12" color="#c0c4cc" />
      </template>
      自定义分隔符
    </zx-breadcrumb-item>
    <zx-breadcrumb-item>详情页</zx-breadcrumb-item>
  </zx-breadcrumb>
</template>

API 参考

ZxBreadcrumb 属性

属性名说明类型可选值默认值
separator分隔符string—/
separator-icon图标分隔符的组件或组件名string——
size面包屑尺寸stringlarge/default/smalldefault
disabled是否禁用整个面包屑boolean—false
color文字颜色string——
active-color当前页面颜色string——
separator-color分隔符颜色string——

ZxBreadcrumb 插槽

插槽名说明子标签
default自定义默认内容ZxBreadcrumbItem

ZxBreadcrumbItem 属性

属性名说明类型可选值默认值
to路由跳转目标，同 vue-router 的 to 属性string/object——
replace如果设置该属性为 true, 导航将不会留下历史记录boolean—false
text面包屑项的文字内容string/number——
disabled是否禁用该项boolean—false
color文字颜色string——
href链接地址string——
target链接打开方式string_self/_blank_self

ZxBreadcrumbItem 事件

事件名说明回调参数
click点击面包屑项时触发—

ZxBreadcrumbItem 插槽

插槽名说明
default自定义默认内容
separator自定义分隔符

注意事项

  1. 路由跳转：组件会自动检测项目中的路由方法（$zx.route），如果不存在会输出日志
  2. 当前页面判断：没有 to 和 href 属性的 BreadcrumbItem 会被视为当前页面
  3. 外部链接：使用 href 属性可以跳转到外部链接，在不同平台有不同的处理方式
  4. 图标分隔符：当设置 separator-icon 时，separator 属性会被忽略
  5. 颜色优先级：单项的 color 属性优先级高于父组件的颜色设置

样式变量

如需自定义样式，可以覆盖以下 CSS 变量：

// 默认颜色
$breadcrumb-link-color: #606266;
$breadcrumb-active-color: #909399;
$breadcrumb-separator-color: #c0c4cc;
$breadcrumb-hover-color: #409eff;

// 字体大小
$breadcrumb-small-size: 12px;
$breadcrumb-default-size: 14px;
$breadcrumb-large-size: 16px;

// 间距
$breadcrumb-small-gap: 6px;
$breadcrumb-default-gap: 8px;
$breadcrumb-large-gap: 10px;

使用示例

参考 src/pages/components/breadcrumb/ 目录下的示例文件，包含了各种用法的完整演示。

Breadcrumb面包屑组件
@tanzhenxing/zx-breadcrumb-item
@tanzhenxing/zxui
1.0.2

2 months ago

1.0.1

5 months ago