xtf-goods-nav

组件说明

xtf-goods-nav 是商品导航栏组件，用于在页面底部展示商品操作入口。支持左侧图标选项（带徽标）和右侧操作按钮（渐变背景），适用于商品详情页的购买导航等场景。

---

基础用法

1. 默认样式

<template>
  <xtf-goods-nav @click="onClick" @button-click="onButtonClick" />
</template>

<script>
export default {
  methods: {
    onClick(data) {
      console.log('点击图标:', data.content.text)
    },
    onButtonClick(data) {
      console.log('点击按钮:', data.content.text)
    }
  }
}
</script>

2. 自定义选项与按钮

通过 options 设置左侧图标选项，通过 buttonGroup 设置右侧按钮：

<template>
  <xtf-goods-nav
    :options="navOptions"
    :button-group="navButtons"
    @click="onClick"
    @button-click="onButtonClick"
  />
</template>

<script>
export default {
  data() {
    return {
      navOptions: [
        { icon: 'storefront', text: '店铺' },
        { icon: 'shopping_cart', text: '购物车', info: 3 }
      ],
      navButtons: [
        {
          text: '加入购物车',
          backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
          color: '#fff'
        },
        {
          text: '立即购买',
          backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
          color: '#fff'
        }
      ]
    }
  },
  methods: {
    onClick(data) {
      console.log('选项', data)
    },
    onButtonClick(data) {
      console.log('按钮', data)
    }
  }
}
</script>

3. 填充模式

通过 fill 使按钮填充整个右侧区域：

<template>
  <xtf-goods-nav fill />
</template>

---

全部属性

属性	类型	默认值	作用描述	适用范围
options	Array	[{ icon: 'storefront', text: '店铺' }, { icon: 'shopping_cart', text: '购物车' }]	左侧图标选项	选项
buttonGroup	Array	[{ text: '加入购物车', ... }, { text: '立即购买', ... }]	右侧按钮列表	按钮
fill	Boolean	false	按钮是否填充	填充模式
customClass	String	''	自定义类名	样式覆盖
customStyle	String | Object	''	自定义样式	动态样式覆盖

---

事件

事件名称	触发时机	回调参数	参数说明
click	点击左侧选项时触发	({ index, content })	索引和选项数据
buttonClick	点击右侧按钮时触发	({ index, content })	索引和按钮数据

事件使用示例

第一个示例已同时监听 click 和 buttonClick，其回调包含实际的 console.log 输出。

---

主题说明

• 左侧图标使用 xtf-icon 组件
• 右侧按钮使用渐变背景
• 徽标使用红色圆形标记
• 底部固定定位，高度 100rpx

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。