feat: 初始化

pages/components/segmented/index.vue

@@ -0,0 +1,114 @@
+<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>