Files
jobslink-user-clent/components/v-tabs/readme.md

82 lines
1.9 KiB
Markdown
Raw Normal View History

2024-02-02 14:44:30 +08:00
## 调用方式
- 视图调用
```html
<v-tabs
:tabs="[1,2,3,4]"
height="45px"
v-model="activeTab"
color="#333"
activeColor="#1abc9c"
fontSize="14px"
activeFontSize="16px"
:lineHeight="4px"
:lineScale="0.8"
lineColor="#1abc9c"
/>
```
- js 调用
```js
import vTabs from '@/components/v-tabs'
export default {
components: {
vTabs,
},
data() {
activeTab: 0
},
}
```
- 参数说明
| 参数 | 类型 | 默认值 | 说明 |
| :-------------: | :--------------: | :-----: | :----------: |
| value | String 或 Number | 0 | 必传 |
| tabs | Array | [] | tabs 数量 |
| height | String | '45px' | tab 高度 |
| backgroundColor | String | '' | 选中背景 |
| borderRadius | String | 5px | 圆角 |
| color | String | #333333 | 默认文字颜色 |
| activeColor | String | #333333 | 选中文字颜色 |
| fontSize | String | 14px | 默认文字大小 |
| activeFontSize | String | 14px | 选中文字大小 |
| lineScale | Number | 0.6 | 下划线缩放 |
| lineHeight | [Number, String] | 3 | 下划线高度 |
| lineColor | Sring | #007AFF | 下划线颜色 |
## 事件
|事件名称|参数|
|:-----:|:-----:|
|@change|activeTab|
## 更新日志
### 2020-06-09
1. 修复小程序端选中的下划线不显示问题
2. 新增 tab 高度设置
3. `lineHeight` 修改为只支持 `String` 方式
### 2020-06-11
1. 添加 `change` 事件
2. 修复插件内容问题
3. 修复下划线不居中问题
### 2020-06-11
1. 添加注释
2. 修复 bug
### 2020-07-05
1. 新增 `padding` 的可配置
2. 修复 `v-model` 双向绑定问题
3. 修复初始化下划线没定位的为题