Vue EasyUI 选项卡
选项卡（ Tabs ）是显示面板的集合。
属性列表
| 名称 |
数据类型 |
作用描述 |
默认值 |
| border |
boolean |
是否显示边框。 |
true |
| justified |
boolean |
使制表符条与其父容器的宽度相等。 |
false |
| narrow |
boolean |
为True时,移除制表符条之间的空格。 |
false |
| plain |
boolean |
为True时，用于在没有背景容器图像的情况下呈现选项卡条带。 |
false |
| scrollable |
boolean |
为True时，启用选项卡标题上的可滚动特性。 |
false |
| scrollIncrement |
number |
每次按下制表符滚动按钮时要滚动的像素数。 |
100 |
| headerWidth |
number |
头部宽度。 |
150 |
| headerHeight |
number |
选项卡标题高度。 |
35 |
| tabWidth |
number |
选项卡宽度。 |
null |
| tabHeight |
number |
选项卡高度。 |
32 |
| tabPosition |
string |
标签的位置。可选值:'top'，'bottom'，'left'，'right'。 |
top |
| selectedIndex |
number |
已初始化的选中制表符索引。 |
0 |
事件列表
| 名称 |
参数 |
作用描述 |
| tabSelect |
panel |
选择选项卡面板时触发。 |
| tabUnselect |
panel |
未选择选项卡面板时触发。 |
| tabClose |
panel |
关闭选项卡面板时触发。 |
方法列表
| 名称 |
参数 |
返回值 |
作用描述 |
| select |
index |
void |
选择一个选项卡面板。 |
| unselect |
index |
void |
取消选择选项卡面板。 |
| getPanel |
index |
TabPanel |
获得一个选项卡面板。 |
| getPanelIndex |
tab |
number |
获取选项卡面板索引。 |
| getSelectedPanel |
none |
TabPanel |
获取第一个选中的选项卡面板。 |
| scrollBy |
distance |
void |
使用指定的距离滚动选项卡标题。 |
注：
- 继承： None 。
使用方法
通过 HTML 标记创建选项卡（ tabs ）。
<Tabs style="height:250px">
<TabPanel :title="'Tab1'">
<p>Hello user.</p>
</TabPanel>
<TabPanel :title="'Tab2'">
<p>Welcome to W3Cschool.</p>
</TabPanel>
<TabPanel :title="'Tab3'">
<p>You'll learn something.</p>
</TabPanel>
<TabPanel :title="'Help'" :closable="true" iconCls="icon-help">
<p>这是帮助内容。</p>
</TabPanel>
</Tabs>
选项卡面板（ TabsPanel ）
- 选项卡面板（ TabsPanel ）选项继承自面板（ Panel ），以下是附加属性：
| 名称 |
数据类型 |
作用描述 |
默认值 |
| selected |
boolean |
是否选择面板。 |
false |
| disabled |
boolean |
是否禁用选项卡面板。 |
false |
| closable |
boolean |
设置为true时，选项卡面板将显示一个可关闭按钮，可以单击该按钮关闭选项卡面板。 |
false |
| 名称 |
参数 |
返回值 |
作用描述 |
| select |
none |
void |
选择选项卡面板。 |
| unselect |
none |
void |
取消选择选项卡面板。 |
| close |
none |
void |
关闭选项卡面板。 |