|
8 | 8 | <view class="u-scroll-box" :class="{'u-tabs-scorll-flex': !isScroll}"> |
9 | 9 | <view class="u-tab-item u-line-1" :id="'u-tab-item-' + index" v-for="(item, index) in list" :key="index" @tap="clickTab(index)" |
10 | 10 | :style="[tabItemStyle(index)]"> |
| 11 | + <u-badge :count="item[count] || item['count'] || 0" :offset="offset" size="mini"></u-badge> |
11 | 12 | {{ item[name] || item['name']}} |
12 | 13 | </view> |
13 | 14 | <view v-if="showBar" class="u-tab-bar" :style="[tabBarStyle]"></view> |
|
20 | 21 | <script> |
21 | 22 | /** |
22 | 23 | * tabs 标签 |
23 | | - * @description 该组件,是一个tabs标签组件,在标签多的时候,可以配置为左右滑动,标签少的时候,可以禁止滑动。 该组件的一个特点是配置为滚动模式时,激活的tab会自动移动到组件的中间位置。 |
| 24 | + * @description 该组件,是一个tabs标签组件,在标签多的时候,可以配置为左右滑动,标签少的时候,可以禁止滑动。 该组件的一个特点是配置为滚动模式时,激活的tab会自动移动到组件的中间位置。 |
24 | 25 | * @tutorial https://www.uviewui.com/components/tabs.html |
25 | 26 | * @property {Boolean} is-scroll tabs是否可以左右拖动(默认true) |
26 | 27 | * @property {Array} list 标签数组,元素为对象,如[{name: '推荐'}] |
|
38 | 39 | * @property {String Number} item-width 标签的宽度(默认auto) |
39 | 40 | * @property {String Number} gutter 单个tab标签的左右内边距之和,单位rpx(默认40) |
40 | 41 | * @property {String} bg-color tabs导航栏的背景颜色(默认#ffffff) |
41 | | - * @property {String} name 组件内部读取的list参数中的属性名,见官网说明(默认name) |
| 42 | + * @property {String} name 组件内部读取的list参数中的属性名(tab名称),见官网说明(默认name) |
| 43 | + * @property {String} count 组件内部读取的list参数中的属性名(badge徽标数),同name属性的使用,见官网说明(默认count) |
| 44 | + * @property {Array} offset 设置badge徽标数的位置偏移,格式为 [x, y],也即设置的为top和right的值,单位rpx(默认[5, 20]) |
42 | 45 | * @property {Boolean} bold 激活选项的字体是否加粗(默认true) |
43 | 46 | * @event {Function} change 点击标签时触发 |
44 | 47 | * @example <u-tabs ref="tabs" :list="list" :is-scroll="false"></u-tabs> |
|
108 | 111 | type: String, |
109 | 112 | default: '#ffffff' |
110 | 113 | }, |
111 | | - // 读取传入的数组对象的属性 |
| 114 | + // 读取传入的数组对象的属性(tab名称) |
112 | 115 | name: { |
113 | 116 | type: String, |
114 | 117 | default: 'name' |
115 | 118 | }, |
| 119 | + // 读取传入的数组对象的属性(徽标数) |
| 120 | + count: { |
| 121 | + type: String, |
| 122 | + default: 'count' |
| 123 | + }, |
| 124 | + // 徽标数位置偏移 |
| 125 | + offset: { |
| 126 | + type: Array, |
| 127 | + default: () => { |
| 128 | + return [5, 20] |
| 129 | + } |
| 130 | + }, |
116 | 131 | // 活动tab字体是否加粗 |
117 | 132 | bold: { |
118 | 133 | type: Boolean, |
|
290 | 305 |
|
291 | 306 | <style lang="scss" scoped> |
292 | 307 | @import "../../libs/css/style.components.scss"; |
293 | | - |
| 308 | +
|
294 | 309 | view, |
295 | 310 | scroll-view { |
296 | 311 | box-sizing: border-box; |
|
0 commit comments