feat: 初始化

components/nvue/segmented/index.css

@@ -0,0 +1,26 @@
+.segmentedWrapper {
+	height: 37px;
+}
+.segmentedWrapper .segmented {
+  position: relative;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ececec;
+  font-size: 18px;
+  flex: 1;
+}
+.segmentedWrapper .segmented .segmentedItem {
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  text-align: center;
+  padding: 0px 6px;
+}
+.segmentedWrapper .segmented .segmentedThumb {
+  position: absolute;
+  bottom: 0px;
+  height: 2px;
+  background-color: #333333;
+  transition: left 0.3s ease-out;
+}

components/nvue/segmented/index.nvue

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