0.1.1 • Published 5 years ago
lea-ui
Installing
Using npm:
npm install lea-ui -S
Quick Start
import Vue import Vue from 'vue'
import leaUI from 'lea-ui'
Vue.use(leaUI)
Components
tabs
支持结构上的独立
基础用法
<template>
<lea-tabs v-model="activeName">
<lea-tab-item label="测试选项1" name="first">
<span slot="label"><i class="el-icon-date"></i> 测试选项1</span>
</lea-tab-item>
<lea-tab-item label="测试选项2" name="second">测试选项2</lea-tab-item>
</lea-tabs>
<lea-tabs-panel v-model="activeName">
<lea-tab-panel-item name="first">
<div>测试选项1的内容</div>
</lea-tab-panel-item>
<lea-tab-panel-item name="second">
<div>测试选项2的内容</div>
</lea-tab-panel-item>
</lea-tabs-panel>
</template>
<script>
export default {
data() {
return {
activeName: 'first'
};
}
};
</script>
Tabs Attributes
| 参数 | 说明 | 类型 | 取值 | 默认值 |
|---|
| value / v-model | 绑定值，选中选项卡的 name | String | — | “” |
Tab-item Attributes
| 参数 | 说明 | 类型 | 取值 | 默认值 |
|---|
| label | 选项卡标题 | String | — | — |
| name | 与选项卡绑定值 value 对应的标识符，表示选项卡别名 | String | — | — |
Tabs-panel Attributes
| 参数 | 说明 | 类型 | 取值 | 默认值 |
|---|
| value / v-model | 绑定值，选中选项卡的 name | String | — | “” |
Tab-panel-item Attributes
| 参数 | 说明 | 类型 | 取值 | 默认值 |
|---|
| label | 选项卡标题 | String | — | — |
| name | 与选项卡绑定值 value 对应的标识符，表示选项卡别名 | String | — | — |
Tab-item Scoped Slot