Tabs 标签面板
基础用法
垂直标签
当前选中的标签是: 紫式部
紫式部(约973年—?),日本平安时代女作家,中古三十六歌仙之一。本姓藤原,字不详,式部是她在宫廷服务期间的称呼,因其兄曾任式部丞,当时宫中女官多以父兄之官衔为名,故称为藤式部。后来她写成《源氏物语》,书中女主人公紫姬为世人传诵,遂又称作紫式部。一般认为其名不可考,亦有人认为其本名为藤原香子或藤原则子。 主要作品有长篇小说《源氏物语》,作品描写人物心理细腻,文字典雅,情节曲折,被认为是世界最早的长篇小说,对往后日本文学之影响极大。另著《紫式部日记》,成书于公元1010年秋。
她出身于贵族文人世家,幼时从父学习汉学,通晓音律和佛典。父兄都擅长汉诗、和歌。1004年4月,紫式部丧夫寡居,同年秋开始创作《源氏物语》。36岁那年冬天,紫式部受召入宫侍奉一条天皇的中宫藤原彰子。“
Tab Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
v-model/value | 绑定值 | string | - | - |
tabPosition | 选项卡所在位置 | string | left, top | top |
TabItem Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
name | 选项卡名称 | string | - | - |
disabled | 面板名称 | boolean | - | false |
TabPane Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
name | 面板名称 | string | - | - |
Steps 步骤条
基础用法
自定义完成样式提示颜色
带图标的步骤条
垂直步骤条
Steps Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
active | 设置当前激活步骤 | number | - | 0 |
direction | 步骤条显示方向 | string | horizontal, vertical | horizontal |
step-finish-color | 自定义完成步骤显示颜色 | string | - | 主题色,#d4b1b5 |
span | 每个step的间距, 单位:px | number | - | - |
Step Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
title | 标题 | string | - | - |
description | 描述 | string | - | - |
icon | 图标名称 | string | - | - |
Menu 导航菜单
导航组件,可无限嵌套子菜单,支持横向和纵向。导航菜单一般配合路由实现页面跳转功能,在selected属性上使用.sync修饰符可实现数据绑定,也可以监听selected-change事件,菜单被点击时将抛出对应条目的name值。
基础用法
水平菜单
垂直导航菜单,多级嵌套
s-menu Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
selected-index | 默认选中子菜单的 index ,可用 .sync 修饰符同步 | String | -- | -- |
vertical | 纵向菜单 | Boolean | -- | false |
width | 菜单宽度 | String | -- | 100% |
s-menu Methods
方法名 | 说明 | 参数 |
---|---|---|
updateMenu | 根据给定的 index 或 path 更新 menu 子菜单的展开和选中状态,需要在 $nextTick 中调用 | { index }、{ path } |
s-menu Events
事件名称 | 说明 | 回调参数 |
---|---|---|
index-change | 点击 s-menu-item 时触发 | 被点击 s-menu-item 的 index 值 |
name-change | 点击 s-menu-item 时触发 | 被点击 s-menu-item 的 name 值 |
path-change | 点击 x-menu-item 时触发 | 被点击 x-menu-item 对应的 path 路径,形如 name1/name2/name3 |
s-sub-menu Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
index | sub 子菜单的唯一标志,必填 | String | -- | -- |
name | sub 子菜单的名称,必填 | String | -- | -- |
open | sub 子菜单默认展开,当默认展开时,sub 子菜单只会在被点击时关闭 | Boolean | -- | false |
s-menu-item Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
index | item 子菜单的唯一标志,必填 | String | -- | -- |
name | item 子菜单的名称,必填 | String | -- | -- |
Pager 分页器
适用于在多个互斥的选项中选择的场景
基础用法
页数较少时完全显示
- 1
- 2
- 3
- 4
- 5
- 6
- 7
页数较多时非连续页之间显示分隔符
- 1
- 2
- 3
- 4
- 5
- 6
- 7
...
- 50
simple 属性开启简洁样式
- 1
- 2
- 3
- 4
- 5
- 6
- 7
...
- 50
s-pager Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
total | 总页数,必填 | Number | -- | -- |
current | 当前页数,必填,用 .sync 绑定 | Number | -- | -- |
single-hide | 当只有一页时隐藏分页器,默认隐藏(true) | Boolean | -- | true |
simple | 简洁样式,默认不开启(false) | Boolean | -- | false |
Progress 全局加载进度条
用于展示页面加载、异步请求的加载进度条。全局只会创建一个Loading,因此在任何位置调用的方法都会控制同一个组件。主要在路由切换和AJAX请求中使用,由于这两者都不能拿到精确的进度,Loading会模拟进度
基础用法
s-progress Methods
方法名 | 说明 | 参数 |
---|---|---|
start | 从 0 显示进度条,并自动加载进度 | -- |
finish | 结束进度条,补全剩余进度并自动消失 | -- |
error | 以错误的类型结束进度条,补全剩余进度并自动消失 | -- |
在 Vue 实例中通过直接调用以下方法来使用组件:
this.$progress.start();
this.$progress.finish();
this.$progress.error();
在 Router 中调用:
simple.progress.start();
simple.progress.finish();
simple.progress.error();
同时提供了全局配置和全局销毁方法:
this.$progress.config(options);
this.$progress.destroy();
simple.progress.config(options);
simple.progress.destroy();
Options 参数说明
参数 | 说明 | 类型 |
---|---|---|
background | 进度条背景颜色 | String |
color | 进度条颜色 | String |
failedColor | 错误类型进度条颜色 | String |
height | 进度条高度 | Number |