115 lines
1.9 KiB
Vue
115 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<view class="segmentedWrapper">
|
||
|
|
<view
|
||
|
|
class="segmented"
|
||
|
|
:style="{ gridTemplateColumns: `repeat(${values.length},minmax(0,1fr))`, paddingBottom: gap, fontSize: fontSize, borderBottomWidth: underLineHeight }"
|
||
|
|
>
|
||
|
|
<view
|
||
|
|
class="segmentedThumb"
|
||
|
|
:style="{
|
||
|
|
width: (1 / values.length) * 100 + '%',
|
||
|
|
height: thumbHeight,
|
||
|
|
left: (1 / values.length) * 100 * current + '%'
|
||
|
|
}"
|
||
|
|
></view>
|
||
|
|
<view
|
||
|
|
class="segmentedItem"
|
||
|
|
:style="{
|
||
|
|
color: current === index ? activeColor : inActiveColor,
|
||
|
|
fontWeight: current === index ? activeFontWeight : inActiveFontWeight
|
||
|
|
}"
|
||
|
|
v-for="(item, index) in values"
|
||
|
|
:key="index"
|
||
|
|
@click="_onClick(index)"
|
||
|
|
>
|
||
|
|
{{ item }}
|
||
|
|
</view>
|
||
|
|
</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
|
||
|
|
};
|
||
|
|
},
|
||
|
|
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 lang="scss" scoped>
|
||
|
|
@import './index.scss';
|
||
|
|
</style>
|