144 lines
2.6 KiB
Vue
144 lines
2.6 KiB
Vue
<template>
|
|
<view class="u-relative bg border-r-16">
|
|
|
|
<view class="u-flex tabs zhanwei u-relative">
|
|
<view class="active-block" :style="computedBlockStyle">
|
|
</view>
|
|
<view class="u-flex-1 u-text-center item" :class="[index===current?'':'active',size]" @tap="changeCurrent(index)"
|
|
v-for="(item,index) in props.list" :key="index">
|
|
{{textKey?item[textKey]:item}}
|
|
</view>
|
|
|
|
</view>
|
|
<view class="u-flex tabs u-absolute position-all">
|
|
|
|
<view class="u-flex-1 u-text-center item" :class="{active:index===current}" @tap="changeCurrent(index)"
|
|
v-for="(item,index) in props.list" :key="index">
|
|
{{textKey?item[textKey]:item}}
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
computed,
|
|
ref,
|
|
watch
|
|
} from 'vue';
|
|
const props = defineProps({
|
|
size:{
|
|
type: String,
|
|
default:''
|
|
},
|
|
padding: {
|
|
type: String
|
|
},
|
|
list: {
|
|
type: Array
|
|
},
|
|
textKey: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
defaultIndex: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
modelValue: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
})
|
|
const emit = defineEmits(['change', 'update:modelValue'])
|
|
let current = ref(props.modelValue || props.defaultIndex || 0)
|
|
|
|
function changeCurrent(index) {
|
|
current.value = index
|
|
}
|
|
const computedBlockStyle = computed(() => {
|
|
const oneWidth = 100 / props.list.length
|
|
const left = current.value * oneWidth
|
|
return {
|
|
width: oneWidth + '%',
|
|
left: left + '%'
|
|
}
|
|
})
|
|
watch(() => props.modelValue, (newval) => {
|
|
current.value = newval
|
|
})
|
|
watch(() => current.value, (newval) => {
|
|
emit('update:modelValue', newval)
|
|
emit('change', newval)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.zhanwei {
|
|
.item {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.bg {
|
|
background: #E6F0FF;
|
|
padding: 7rpx 10rpx;
|
|
}
|
|
|
|
.border-r-16 {
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.active-block {
|
|
background-color: $my-main-color;
|
|
color: #fff;
|
|
top: 4rpx;
|
|
bottom: 4rpx;
|
|
left: 10rpx;
|
|
position: absolute;
|
|
border-radius: 8rpx;
|
|
transition: all .2s ease-in-out;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tabs {
|
|
border-radius: 16rpx;
|
|
font-size: 28rpx;
|
|
color: #318AFE;
|
|
z-index: 2;
|
|
|
|
.active-block {
|
|
background-color: $my-main-color;
|
|
color: #fff;
|
|
top: 4rpx;
|
|
bottom: 4rpx;
|
|
left: 0;
|
|
position: absolute;
|
|
border-radius: 8rpx;
|
|
transition: all .2s ease-in-out;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
.item {
|
|
padding: 9rpx 0;
|
|
transition: all .2s ease-in-out;
|
|
position: relative;
|
|
background-color: transparent;
|
|
z-index: 2;
|
|
&.large{
|
|
padding: 16rpx 0;
|
|
}
|
|
}
|
|
|
|
.item.active {
|
|
border-radius: 8rpx;
|
|
// background-color: $my-main-color;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
</style> |