更新记录

1.0.1(2023-07-28)

调整未传ownStyle带来的报错:Invalid default value for prop "ownStyle": Props with type Object/Array must use a factory function to return the default value.

1.0.0(2022-05-31)

  • 首次更新

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

yile-breadcrumb 面包屑

说明

面包屑导航,目的是为了帮助你追溯来路,让用户了解当前所处位置,以及当前页面在整个网站中的位置。

属性

参数 作用 类型 默认值
nav 内容数组 Array ''
separator 分隔符 String /
size 字体大小 String, Number 默认14px,支持rpx等格式,值为数字类型时格式默认px
color 字体颜色 String #6a6a6a
actColor 选中字体颜色 String #2979ff
marginTop 距离上一元素距离 String, Number 无默认值,支持rpx等格式,值为数字类型时格式默认px
ownStyle 自定义样式 Object 无默认值,格式{'font-weight':'bold'}

nav格式如下

nav: [{
        value: '首页',       //名称
        url: '',             //链接
        type: 'navigateTo',  //跳转方式
        isActive: true       //选中状态
    }, {
        value: '在线客服',
        url: '',
        type: 'redirectTo'
    }, {
        value: '反馈中心',
        url: '',
        type: 'reLaunch'
    }, {
        value: '个人中心',
        url: '',
        type: 'switchTab'
    }]

调用

  1. 基础

    <template>
    <yile-breadcrumb :nav="nav"></yile-breadcrumb>
    </template>
  2. 颜色

    <template>
    <yile-breadcrumb :nav="nav" color="#999999"></yile-breadcrumb>
    </template>
  3. 自定义分隔符

    <template>
    <yile-breadcrumb :nav="nav" separator=">"></yile-breadcrumb>
    </template>
  4. 选中字体颜色

    <template>
    <yile-breadcrumb :nav="nav" actColor="#ff0000"></yile-breadcrumb>
    </template>
  5. 字体大小

    <template>
    <yile-breadcrumb :nav="nav" size="16"></yile-breadcrumb>
    </template>
  6. 距离上一元素距离

    <template>
    <yile-breadcrumb :nav="nav" marginTop="20"></yile-breadcrumb>
    </template>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问