- name: u-navbar title: 导航栏 icon: navbar labels: - Navigation description: 通常用于页面顶部的导航菜单，放置 Logo、导航链接、用户信息等。 attrs: - name: router title: 使用路由 type: boolean default: true description: 是否根据 vue-router 来控制选择项 - name: value title: 值 type: any sync: true model: true description: 当前选择的值 - name: field title: 字段 type: string default: text description: 显示文本字段 hidden: true - name: readonly title: 只读 type: boolean default: false description: 是否只读 - name: disabled title: 禁用 type: boolean default: false description: 是否禁用 slots: - concept: Slot name: default description: 链接区域 title: 链接区域 support: - name: u-navbar-item title: 导航项 snippet: 导航项 - name: u-navbar-divider title: 分隔线 snippet: - concept: Slot name: left title: 左部区域 description: 左部区域，一般放置 logo 等 - concept: Slot name: right title: 右部区域 description: 右部区域，一般放置用户个人信息等 events: - name: click title: 点击 advanced: true description: 点击此项时触发，与原生 click 事件不同的是，它只会在非只读和禁用的情况下触发。 params: - name: $event type: MouseEvent description: 鼠标事件对象 schema: $ref: "#/systemTypes/MouseEvent" - name: senderVM type: Vue description: 发送事件实例 - name: before-select advanced: true title: 输入前 description: 选择某一项前触发 params: - name: $event type: object description: 自定义事件对象 schema: $ref: "#/systemTypes/ChangeItemEvent" - name: $event.value type: any description: 选择项的值 - name: $event.oldValue type: any description: 旧的值 - name: $event.item type: object description: 选择项相关对象 - name: $event.itemVM type: NavbarItem description: 选择项子组件 - name: $event.preventDefault type: Function description: 阻止选择流程 - name: senderVM type: Vue description: 发送事件实例 - name: input advanced: true title: 输入时 description: 选择某一项时触发 params: - name: $event type: any description: 选择项的值 schema: $ref: "#/basicTypes/String" - name: senderVM type: Vue description: 发送事件实例 - name: select title: 选择后 description: 选择某一项时触发 params: - name: $event type: object description: 自定义事件对象 schema: $ref: "#/systemTypes/ChangeItemEvent" - name: $event.value type: any description: 改变后的值 - name: $event.oldValue type: any description: 旧的值 - name: $event.item type: object description: 选择项相关对象 - name: $event.oldItem type: object description: 旧的选择项相关对象 - name: $event.itemVM type: UNavbarItem description: 选择项子组件 - name: $event.oldVM type: UNavbarItem description: 旧的选择项子组件 - name: senderVM type: Vue description: 发送事件实例 - name: change title: 改变后 description: 选择值改变时触发 advanced: true params: - name: $event type: object description: 自定义事件对象 schema: $ref: "#/systemTypes/ChangeItemEvent" - name: $event.value type: any description: 选择项的值 - name: $event.oldValue type: any description: 旧的值 - name: $event.item type: object description: 选择项相关对象 - name: $event.oldItem type: object description: 旧的选择项相关对象 - name: $event.itemVM type: UNavbarItem description: 选择项子组件 - name: $event.oldVM type: UNavbarItem description: 旧的选择项子组件 - name: senderVM type: UNavbar description: 发送事件实例 - name: u-navbar-item title: 导航栏项 attrs: - name: text title: 文本 type: string description: 文本内容 - name: value title: 值 type: any description: 此项的值 - name: icon title: 图标 type: icon default: "" description: 图标 - name: disabled title: 禁用 type: boolean default: false description: 禁用此项 - name: item title: 相关对象 type: object description: 相关对象。当选择此项时，抛出的事件会传递该对象，便于开发 advanced: true - name: linkType title: 链接类型 type: string options: - value: destination title: 页面跳转 - value: download title: 下载链接 default: destination description: 链接类型 compType: linkTypeSelect bindHide: true - name: hrefAndTo title: 链接 type: string description: 链接地址 compType: linkHrefInput - name: target title: 打开方式 type: string options: - value: _blank title: 新窗口 - value: _self title: 当前窗口 - value: _parent title: 父级窗口 advanced: true - value: _top title: 顶级窗口 advanced: true default: _self description: 链接跳转方式 - name: to title: 路由链接 type: string, Location description: 需要 vue-router，与``的`to`属性相同。可以是一个字符串或者是描述目标位置的对象。 advanced: true - name: replace title: 替换地址 type: boolean default: false description: 需要 vue-router，与``的`replace`属性相同。如果为`true`，当点击时，会调用`router.replace()`而不是`router.push()`，于是导航后不会留下`history `记录。 advanced: true - name: exact title: 精确匹配 type: boolean default: false description: 需要 vue-router，与``的`exact`属性相同。是否与路由完全一致时才高亮显示。 advanced: true events: - name: before-select title: 选择前 description: 选择此项前触发 advanced: true params: - name: $event type: object description: 自定义事件对象 schema: $ref: "#/systemTypes/ChangeItemEvent" - name: $event.value type: any description: 此项的值 - name: $event.item type: object description: 此项的相关对象 - name: $event.itemVM type: UNavbarItem description: 此组件 - name: $event.preventDefault type: Function description: 阻止选择流程 - name: senderVM type: Vue description: 发送事件实例 - name: before-navigate title: 导航前 advanced: true description: 使用 router 相关属性切换路由前触发 params: - name: $event type: object description: 自定义事件对象 schema: $ref: "#/systemTypes/NavigateEvent" - name: $event.to type: string, Location description: "`to`属性的值" - name: $event.replace type: boolean description: "`replace`属性的值" - name: $event.exact type: boolean description: "`exact`属性的值" - name: $event.preventDefault type: Function description: 阻止切换流程 - name: senderVM type: Vue description: 发送事件实例 - name: navigate title: 导航 advanced: true description: 使用router相关属性切换路由时触发 params: - name: $event type: object description: 自定义事件对象 schema: $ref: "#/systemTypes/NavigateEvent" - name: $event.to type: string, Location description: "`to`属性的值" - name: $event.replace type: boolean description: "`replace`属性的值" - name: $event.exact type: boolean description: "`exact`属性的值" - name: senderVM type: Vue description: 发送事件实例 description: 导航栏的子项目 - name: u-navbar-divider title: 导航栏分割线 description: 导航栏的分割线 - name: u-navbar-dropdown title: 导航栏下拉菜单 attrs: - name: trigger title: 触发方式 type: string options: - value: click title: 点击 - value: hover title: 悬浮 - value: right-click title: 右击 - value: double-click title: 双击 - value: manual title: 手动 default: hover description: 触发方式 - name: placement title: 弹出位置 type: string options: - value: top title: 上 - value: bottom title: 下 - value: left title: 左 - value: right title: 右 - value: top-start title: 上左 - value: top-end title: 上右 - value: bottom-start title: 下左 - value: bottom-end title: 下右 - value: left-start title: 左上 - value: left-end title: 左下 - value: right-start title: 右上 - value: right-end title: 右下 default: bottom description: 弹出方位 - name: disabled title: 禁用 type: boolean default: false description: 是否禁用 description: 导航栏下拉菜单 - name: u-navbar-menu title: 导航菜单 description: 导航菜单 - name: u-navbar-menu-group title: 导航菜单分组 description: 导航菜单分组 - name: u-navbar-menu-item title: 导航菜单项 description: 导航菜单项 - name: u-navbar-menu-divider title: 导航菜单分割线 description: 导航菜单分割线 - name: u-navbar-select title: 导航选择 description: 导航选择 - name: u-navbar-select-group title: 导航选择分组 description: 导航选择分组 - name: u-navbar-select-item title: 导航选择项 description: 导航选择项 - name: u-navbar-select-divider title: 导航选择分割线 description: 导航选择分割线