<component
:is="itemStyle.flex === 1 ? 'div' : 'scroller'"
:class="['am-tabs', `am-tabs-${tabDirection}`, `am-tabs-${tabBarPosition}`]"
:scroll-direction="tabDirection" show-scrollbar='false'>
<div
v-for="(title, index) in tabs"
:key="index"
:class="['am-tabs-item', `am-tabs-item-${tabDirection}`]"
:style="itemStyle"
>
<text
:class="['am-tabs-item-text', selected === index ? 'am-tabs-item-text-selected' : '']"
>{{title}}</text>
</div>
</component>
computed: {
itemStyle () {
const style = {}
if (this.tabWidth) {
style.width = this.tabWidth + 'px'
} else if (this.tabDirection === 'horizontal') {
style.flex = 1
}
return style
}
},
computed设置动态样式
最新推荐文章于 2024-04-26 22:28:28 发布