组件库文档

希望这份文档能帮助你快速上手使用这些组件！如果有任何问题，请随时联系百鹏开发团队。

组件列表

1. Navigation
2. LoginModal
3. PageFooter

1. Navigation 组件

简介

Navigation 是一个导航组件，用于渲染用户导航栏，支持用户数据、路由、菜单等功能，并提供了事件回调以处理用户交互。

属性 (Props)

| 属性名 | 类型 | 默认值 | 说明 | |----------------|----------|--------|---------------------------------------| | bankNavPath | String | '' | 银行导航路径 | | userData | Object | {} | 用户数据对象 | | route | Object | {} | 当前路由信息 | | router | Object | {} | 路由实例 | | menus | Array | [] | 导航菜单列表 | | fastMenu | Array | [] | 快速导航菜单列表 |

事件 (Events)

| 事件名 | 说明 | |------------------|-------------------------------------------| | @toUserCenter | 点击跳转用户中心时触发 | | @useLogout | 点击退出登录时触发 | | @showLoginModal | 点击显示登录弹窗时触发 | | @handleOpen | 处理菜单展开/收起时触发 | | @jumpMember | 点击跳转会员中心时触发 |

使用示例

<Navigation
  :bankNavPath="bankNavPath"
  :userData="user"
  :route="route"
  :router="router"
  :menus="menus"
  :fastMenu="fastMenu"
  @toUserCenter="toUserCenter"
  @useLogout="useLogout"
  @showLoginModal="showLoginModal"
  @handleOpen="handleOpen"
  @jumpMember="jumpMember"
/>

2. LoginModal 组件

简介

LoginModal 是一个登录弹窗组件，用于处理用户登录逻辑，支持自定义登录处理和弹窗显示控制。

属性 (Props)

| 属性名 | 类型 | 默认值 | 说明 | |-----------------|-----------|--------|---------------------------------------| | md5 | String | '' | MD5 加密字符串的方法 | | baseUrl | String | '' | 登录接口的基础 URL | | show | Boolean | false| 控制弹窗的显示/隐藏 |

事件 (Events)

| 事件名 | 说明 | |------------------|-------------------------------------------| | @handleLogin | 用户点击登录按钮时触发 | | @update:show | 弹窗显示状态更新时触发 |

使用示例

<LoginModal
  :md5="md5"
  :baseUrl="baseUrl"
  :show="loginVisible"
  @handleLogin="handleLogin"
  @update:show="updateLoginVisible"
/>

3. PageFooter 组件

简介

PageFooter 是一个页脚组件，用于渲染页面底部内容，通常包含版权信息、链接等。

使用示例

<PageFooter/>

示例代码

以下是一个完整的示例，展示了如何使用 Navigation、LoginModal 和 PageFooter 组件：

<template>
  <div>
    <Navigation
      :bankNavPath="bankNavPath"
      :userData="user"
      :route="route"
      :router="router"
      :menus="menus"
      :fastMenu="fastMenu"
      @toUserCenter="toUserCenter"
      @useLogout="useLogout"
      @showLoginModal="showLoginModal"
      @handleOpen="handleOpen"
      @jumpMember="jumpMember"
    />

    <LoginModal
      :md5="md5"
      :baseUrl="baseUrl"
      :show="loginVisible"
      @handleLogin="handleLogin"
      @update:show="updateLoginVisible"
    />

    <PageFooter/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bankNavPath: '/bank',
      user: { name: 'John Doe' },
      route: {},
      router: {},
      menus: [],
      fastMenu: [],
      md5: 'your-md5-string',
      baseUrl: 'https://api.example.com',
      loginVisible: false,
    };
  },
  methods: {
    toUserCenter() {
      console.log('跳转用户中心');
    },
    useLogout() {
      console.log('退出登录');
    },
    showLoginModal() {
      this.loginVisible = true;
    },
    handleOpen() {
      console.log('处理菜单展开/收起');
    },
    jumpMember() {
      console.log('跳转会员中心');
    },
    handleLogin(credentials) {
      console.log('处理登录', credentials);
    },
    updateLoginVisible(value) {
      this.loginVisible = value;
    },
  },
};
</script>

注意事项

1. 确保 Navigation 组件的 userData 和 route 属性已正确传入。
2. LoginModal 组件的 show 属性需要通过事件 @update:show 进行双向绑定，以控制弹窗的显示/隐藏。