105 lines
2.0 KiB
Plaintext
105 lines
2.0 KiB
Plaintext
|
<template>
|
||
|
|
<view class="segmentedWrapper" :style="{'width': contentWidth+'px'}">
|
||
|
|
<view class="segmented"
|
||
|
|
:style="{ fontSize: fontSize, borderBottomWidth: underLineHeight }">
|
||
|
|
<view class="segmentedThumb" :style="{
|
||
|
|
width: (1 / values.length) * contentWidth + 'px',
|
||
|
|
height: thumbHeight,
|
||
|
|
left: (1 / values.length) * contentWidth * current + 'px'
|
||
|
|
}"></view>
|
||
|
|
<text class="segmentedItem" :style="{
|
||
|
|
width: (values.length ? contentWidth/values.length : contentWidth)+'px',
|
||
|
|
color: current === index ? activeColor : inActiveColor,
|
||
|
|
fontWeight: current === index ? activeFontWeight : inActiveFontWeight
|
||
|
|
}" v-for="(item, index) in values" :key="index" @click="_onClick(index)">
|
||
|
|
{{ item }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'Segmented',
|
||
|
|
emits: ['clickItem'],
|
||
|
|
props: {
|
||
|
|
current: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
values: {
|
||
|
|
type: Array,
|
||
|
|
default () {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fontSize: {
|
||
|
|
type: String,
|
||
|
|
default: '18px'
|
||
|
|
},
|
||
|
|
thumbHeight: {
|
||
|
|
type: String,
|
||
|
|
default: '2px'
|
||
|
|
},
|
||
|
|
underLineHeight: {
|
||
|
|
type: String,
|
||
|
|
default: '1px'
|
||
|
|
},
|
||
|
|
gap: {
|
||
|
|
type: String,
|
||
|
|
default: '10px'
|
||
|
|
},
|
||
|
|
activeColor: {
|
||
|
|
type: String,
|
||
|
|
default: '#333333'
|
||
|
|
},
|
||
|
|
inActiveColor: {
|
||
|
|
type: String,
|
||
|
|
default: '#999999'
|
||
|
|
},
|
||
|
|
activeFontWeight: {
|
||
|
|
type: Number,
|
||
|
|
default: 400
|
||
|
|
},
|
||
|
|
inActiveFontWeight: {
|
||
|
|
type: Number,
|
||
|
|
default: 400
|
||
|
|
},
|
||
|
|
styleType: {
|
||
|
|
type: String,
|
||
|
|
default: 'button'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
currentIndex: 0,
|
||
|
|
contentWidth: uni.getSystemInfoSync().windowWidth - 32
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
current(val) {
|
||
|
|
if (val !== this.currentIndex) {
|
||
|
|
this.currentIndex = val;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
created() {
|
||
|
|
this.currentIndex = this.current;
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
_onClick(index) {
|
||
|
|
if (this.currentIndex !== index) {
|
||
|
|
this.currentIndex = index;
|
||
|
|
this.$emit('clickItem', {
|
||
|
|
currentIndex: index
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
@import './index.css';
|
||
|
|
</style>
|