Tabs 标签面板

基础用法

源氏
桐壶更衣
若紫
葵姬
夕颜
明石姬
紫式部小说《源氏物语》中的角色。她是书中主角光源氏的母亲,也是桐壶帝的宠妃。她的父亲是按察大纳言,母亲则是拥有皇族血统的女子。
也叫做紫儿、若紫,日本国宝级古典名著《源氏物语》中的女主角,是一位美丽温顺的女子,兵部卿宫的私生女,藤壶中宫的侄女。光源氏第一任正妻葵之上过世后,在实质上是光源氏的正室,后来在六条院里是春之町的女主人。
其夫为源氏,其子夕雾。葵端庄温柔,款款大方,相貌出众,气质高贵。产后因遭阴物袭击,当场身亡。
夕颜的名字是源自于以她为主角的夕颜一帖,文中对此女以夕颜花来形容,因此得名。夕颜是源氏的情人之一,也是头中将的情人,是玉鬘的母亲。
日本古典名著《源氏物语》中的人物,是光源氏的侧室,明石中宫的生母。
展开代码

垂直标签

当前选中的标签是: 紫式部

紫式部
清少纳言
和泉式部

紫式部(约973年—?),日本平安时代女作家,中古三十六歌仙之一。本姓藤原,字不详,式部是她在宫廷服务期间的称呼,因其兄曾任式部丞,当时宫中女官多以父兄之官衔为名,故称为藤式部。后来她写成《源氏物语》,书中女主人公紫姬为世人传诵,遂又称作紫式部。一般认为其名不可考,亦有人认为其本名为藤原香子或藤原则子。 主要作品有长篇小说《源氏物语》,作品描写人物心理细腻,文字典雅,情节曲折,被认为是世界最早的长篇小说,对往后日本文学之影响极大。另著《紫式部日记》,成书于公元1010年秋。

她出身于贵族文人世家,幼时从父学习汉学,通晓音律和佛典。父兄都擅长汉诗、和歌。1004年4月,紫式部丧夫寡居,同年秋开始创作《源氏物语》。36岁那年冬天,紫式部受召入宫侍奉一条天皇的中宫藤原彰子。“

清少纳言(约966~约1025),清是姓,少纳言是她在宫中的官职。日本平安时期著名的女作家,中古三十六歌仙之一,与紫式部、和泉式部并称平安时期的三大才女,曾任一条天皇皇后藤原定子的女官。 她的随笔作品《枕草子》执笔于在宫中供职的时候,成书于离开宫廷之后。

作品记叙她在宫廷里的所见所闻,作者出身于中层贵族,这部作品虽然反映了社会等级之间的不平等和对时代的忧虑,但是着力渲染的还是对皇后定子的赞美,对日本贵族社会的肯定。 在《枕草子》之前,日本已经出现了物语文学和日记文学,清少纳言的《枕草子》开拓了一个新的领域,她的随笔为日本散文奠定了基础。

和泉式部,(987~1048年),日本平安时期的女诗人。她不仅是天才的诗人,而且是个热情奔放的绝代佳人。她的一生是颇多恋爱纠葛并为之所苦的一生。她的诗歌直抒胸怀,构思奇特,充满了新颖别致的魅力。她位列中古三十六歌仙。她与《枕草子》作者清少纳言、《源氏物语》作者紫式部并称平安时代的“王朝文学三才媛”。

展开代码

Tab Attributes

参数 说明 类型 可选值 默认值
v-model/value 绑定值 string - -
tabPosition 选项卡所在位置 string left, top top

TabItem Attributes

参数 说明 类型 可选值 默认值
name 选项卡名称 string - -
disabled 面板名称 boolean - false

TabPane Attributes

参数 说明 类型 可选值 默认值
name 面板名称 string - -

Steps 步骤条

基础用法

步骤 1
2
步骤 2
3
步骤 3
展开代码

自定义完成样式提示颜色

步骤 1
步骤 2
3
步骤 3
展开代码

带图标的步骤条

步骤 1
1992年我出生
步骤 2
1999年我上学前班
步骤 3
2005年我小学毕业
展开代码

垂直步骤条

步骤 1
2
步骤 2
3
步骤 3
展开代码

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 - -

导航组件,可无限嵌套子菜单,支持横向和纵向。导航菜单一般配合路由实现页面跳转功能,在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