czg_team/cashier_admin_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

my-tabs组件增加size属性

Browse Source
This commit is contained in:
YeMingfei666
2024-10-09 17:32:21 +08:00
parent 77b9ed369a
commit 2b9aacdf73
1 changed files with 72 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
components/my-components/my-tabs.vue
View File

@@ -1,80 +1,97 @@
<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="{active:index===current}"
@tap="changeCurrent(index)" v-for="(item,index) in props.list" :key="index">
{{item}}
<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">
{{item}}
<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({
padding:{type:String},
list:{type:Array},
defaultIndex:{
type:Number,
default:0
import {
computed,
ref,
watch
} from 'vue';
const props = defineProps({
size:{
type: String,
default:''
},
modelValue:{
type:Number,
default:0
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 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+'%'
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(() => props.modelValue, (newval) => {
current.value = newval
})
watch(()=>current.value,(newval)=>{
emit('update:modelValue',newval)
emit('change',newval)
watch(() => current.value, (newval) => {
emit('update:modelValue', newval)
emit('change', newval)
})
</script>
<style lang="scss" scoped>
.zhanwei{
.item{
.zhanwei {
.item {
opacity: 0;
}
}
.bg{
.bg {
background: #E6F0FF;
padding: 4rpx 10rpx;
}
.border-r-16{
.border-r-16 {
border-radius: 16rpx;
}
.active-block{
.active-block {
background-color: $my-main-color;
color: #fff;
top: 4rpx;
@@ -86,12 +103,14 @@ import { computed, ref, watch } from 'vue';
overflow: hidden;
z-index: 1;
}
.tabs{
.tabs {
border-radius: 16rpx;
font-size: 28rpx;
color: #318AFE;
z-index: 2;
.active-block{
.active-block {
background-color: $my-main-color;
color: #fff;
top: 4rpx;
@@ -103,14 +122,19 @@ import { computed, ref, watch } from 'vue';
overflow: hidden;
z-index: 1;
}
.item{
.item {
padding: 8rpx 0;
transition: all .2s ease-in-out;
position: relative;
background-color: transparent;
z-index: 2;
&.large{
padding: 16rpx 0;
}
}
.item.active{
.item.active {
border-radius: 8rpx;
// background-color: $my-main-color;
color: #fff;