75 lines
1.4 KiB
Vue
75 lines
1.4 KiB
Vue
<template>
|
|
<view class="tabs_box">
|
|
<view
|
|
v-for="(item, index) in tabslist"
|
|
:key="index"
|
|
@tap="handleTabs(item)"
|
|
class="tabs_items"
|
|
:class="{
|
|
active: item.value === activeValue
|
|
}"
|
|
>
|
|
{{ item[props.options.label] }}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
type tabslistType = { name: string; value: number }
|
|
const props = defineProps<{
|
|
tabslist: tabslistType[]
|
|
options: {
|
|
label: 'name'
|
|
value: 'value'
|
|
}
|
|
}>()
|
|
const emit = defineEmits<{
|
|
update: [value: number]
|
|
}>()
|
|
|
|
const activeValue = ref(props.tabslist[0].value)
|
|
const handleTabs = (row: tabslistType) => {
|
|
activeValue.value = row[props.options.value]
|
|
emit('update', row[props.options.value])
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// tabs
|
|
.tabs_box {
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
|
|
.tabs_items {
|
|
/* 关键：不压缩宽度 */
|
|
flex-shrink: 0;
|
|
margin-right: 60rpx;
|
|
color: #4d5dfa;
|
|
|
|
&.active {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
height: 8rpx;
|
|
background-color: #6371fa;
|
|
background: linear-gradient(180deg, #4d5dfa 0%, #bac0fa 100%);
|
|
border-radius: 4rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|