navbar/index.js

  1. /**
  2.  * @component Base/Navbar
  3.  * @description
  4.  *
  5.  * ## 基础组件 / Navbar组件
  6.  *
  7.  * ### 特别之处
  8.  *
  9.  * 导航条和工具条的属性类似, 只是导航条多了后退按钮, 且在当前业务页面中, **Navbar有且必须只有一个**, 也只有这个组件中的Title组件才有控制`document.title`的能力.
  10.  *
  11.  * Navbar一般是放在Header组件中使用, 并且在Navbar组件中经常和Title组件组合使用.
  12.  *
  13.  * 因为Navbar和Toolbar很相似, 其位置属性完全一样. 包括: **start/end/left/end**
  14.  *
  15.  * ### 后退按钮显示时机
  16.  *
  17.  * 因为Vimo内建导航历史记录, 当历史记录中有上一条历史时显示后退按钮, 反之, 不显示后退按钮. 当然也可以通过`hideBackButton`属性控制
  18.  *
  19.  * ### 点击后退
  20.  *
  21.  * 点击后退执行的是 `window.history.back()` 方法, 这个和点击后退按钮的效果是一样的.
  22.  *
  23.  * ### 不需要引入
  24.  *
  25.  * 具体参考App组件的说明
  26.  *
  27.  * ### 如果在支付宝中
  28.  *
  29.  * 如果在支付宝中, 对Navbar右侧设置按钮就能同步设置到支付宝的顶部导航栏而不需要其他操作(需要做好驱动). 路由切换后支付宝导航条也切换状态. 前提是必须在每页设置Navbar组件.
  30.  *
  31.  * 因为支付宝中的iconType在H5中并没有一一对应的iconName(目前使用的是ionicon图标库), 因此, 对于支付宝默认支持的icon, 这里有一一对应的关系, 即在H5中的ICON组件中设置了左侧的这些名称, 在支付宝中就像是右侧的typeName
  32.  *
  33.  * H5命名               | 支付宝命名
  34.  * ---------------------|-------------
  35.  * 'person'             | 'user',
  36.  * 'glasses'            | 'filter',
  37.  * 'search'             | 'search',
  38.  * 'add'                | 'add',
  39.  * 'settings'           | 'settings',
  40.  * 'qr-scanner'         | 'scan',
  41.  * 'information-circle' | 'info',
  42.  * 'help'               | 'help',
  43.  * 'pin'                | 'locate',
  44.  * 'more'               | 'more'
  45.  *
  46.  * 正确设置导航条参考请参考下面代码, 强烈建议按钮设置不超过两个
  47.  *
  48.  * ```
  49.  * <Buttons right slot="buttons">
  50.  *     <Button @click="$menu.open('menu')" role="bar-button">
  51.  *          WITH OUT SPAN
  52.  *     </Button>
  53.  *     <Button @click="$menu.open('menu')" role="bar-button">
  54.  *          <span>WITH SPAN</span>
  55.  *     </Button>
  56.  *     <Button @click="$menu.open('menu')" color="dark" role="bar-button">
  57.  *          <Icon name="icon-vue"></Icon>
  58.  *          <Badge>0</Badge>
  59.  *     </Button>
  60.  *     <Button @click="$menu.open('menu')" color="dark" role="bar-button">
  61.  *          <Icon name="qr-scanner"></Icon>
  62.  *          <Badge>12</Badge>
  63.  *     </Button>
  64.  * </Buttons>
  65.  * ```
  66.  *
  67.  * 并不是所有的Alipya的JSSDK都有H5对应的方法, 因为有些JSSDK不常用或者H5无法实现或者即使实现在业务中使用还不如单独设置简便, 因此Vimo目前实现的功能如下:
  68.  *
  69.  * - 在Navbar组件中Title组件能同步更新WebView中的Title
  70.  * - 在Navbar组件中的背景色(backgroundColor, 前提是使用: primary, secondary, danger, light, dark 设置的颜色)能同步更新到WebView中, 如果页面切换则重置设置.
  71.  * - 对Navbar组件调用showPopMenu方法, 可在右侧显示popover组件, 如果是在WebView中, 则使用原生方法(Alipay), PS: 因为是弹出层组件, 所以是方法调用开启.
  72.  * - 监听Title组件的'title:click'事件, 可以监听点击Title文本的事件, 如果是在WebView中, 则触发原生事件, 页面将不干扰
  73.  *
  74.  * ### 关于导航条在Hybrid下的表现
  75.  *
  76.  * 程序运行初期会从当前DOM中读取导航条参数, 比如右侧按钮个数/类型/badge/颜色/导航条背景色等信息, 之后将信息同步给我们的Hybrid层, 进而设置Hybrid的导航条, 这里需要对函数功能进行介绍:
  77.  *
  78.  * - showOptionButton: 控制Hybrid层导航条右侧按钮组显示
  79.  * - hideOptionButton: 控制Hybrid层导航条右侧按钮组隐藏
  80.  * - reset: 重置整个Hybrid层的导航条
  81.  * - showPopMenu: 显示右上角的PopMenu菜单, 一般通过导航条右上角按钮触发
  82.  *
  83.  * ### 内部方法
  84.  * - 导航条右侧按钮组
  85.  * - 导航条title/image/背景色
  86.  * - 导航条右侧popMenu显示
  87.  *
  88.  * ### 注意点
  89.  *
  90.  * ** 不建议在keepAlive模式使用 **
  91.  *
  92.  * 因为Navbar组件在此模式下只执行最后一个页面的Navbar更新, 如果页面已经打开过, 则会导致样式状态问题. 解决办法是在`activated`钩子中执行Navbar组件的`initWhenInWebview`方法, 这个是内部方法, 表示重新初始化Navbar组件.
  93.  *
  94.  * @see component:Toolbar
  95.  * @see History
  96.  * @DEMO #/cross-platform
  97.  *
  98.  * @props {String} [color] - 颜色
  99.  * @props {Boolean} [hideBackButton=false] - 是否显示后退按钮
  100.  *
  101.  * @slot [空] 作为内容, 比如Title/Searchbar/Segment放置的位置
  102.  * @slot [buttons] 按钮组, 别忘记加[left]/[right]/[end]属性标记位置
  103.  *
  104.  * @usage
  105.  * ```
  106.  * <template>
  107.  *  <Page>
  108.  *    <Header>
  109.  *      <Navbar :hideBackButton="false" color="danger">
  110.  *        <Title>Demo</Title>
  111.  *        <Button right icon-only role="bar-button" menutoggle slot="buttons">
  112.  *            <Icon class="icon" name="menu"></Icon>
  113.  *        </Button>
  114.  *      <Navbar>
  115.  *    </Header>
  116.  *    <Content>
  117.  *      <h1>这里是内容</h1>
  118.  *    </Content>
  119.  *  </Page>
  120.  * </template>
  121.  * ```
  122.  */
  124. export { default } from './navbar.vue'