cloud-ui.vusion
Version:
Vusion Cloud UI
405 lines (404 loc) • 11.6 kB
YAML
- 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: <u-navbar-item>导航项</u-navbar-item>
- name: u-navbar-divider
title: 分隔线
snippet: <u-navbar-divider></u-navbar-divider>
- 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,与`<router-link>`的`to`属性相同。可以是一个字符串或者是描述目标位置的对象。
advanced: true
- name: replace
title: 替换地址
type: boolean
default: false
description: 需要
vue-router,与`<router-link>`的`replace`属性相同。如果为`true`,当点击时,会调用`router.replace()`而不是`router.push()`,于是导航后不会留下`history
`记录。
advanced: true
- name: exact
title: 精确匹配
type: boolean
default: false
description: 需要 vue-router,与`<router-link>`的`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: 导航选择分割线