fs-uni-template/components/fs-sidebar/fs-sidebar.vue

<template>
	<view class="fs-side-bar">
		<view class="fs-side-bar-left" :style="{width: width}">
			<view 
				class="fs-side-bar-item line1"
				:class="{'fs-side-bar-active': activeId ? (activeId === item[valueKey]) : (index === 0)}"
				v-for="(item, index) in list"
				:key="item[valueKey]"
				@click="handleClick(item, index)">
				{{item[titleKey]}}
			</view>
		</view>
		<view class="fs-side-bar-right">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
	list: {
		type: Array,
		default() {
			return []
		}
	},
	value: null,
	valueKey: {
		type: String,
		default: 'id'
	},
	titleKey: {
		type: String,
		default: 'title'
	},
	width: {
		type: String,
		default: '210rpx'
	}
})
const emits = defineEmits(['change'])

const activeId = ref(props.value)
const handleClick = (item, index) => {
	activeId.value = item[props.valueKey]
	emits('change', {
		item,
		index
	})
}
</script>

<style lang="scss" scoped>
.fs-side-bar{
	display: flex;
	height: 100%;
	
	&-left{
		flex-shrink: 0;
		background-color: #fafafa;
		overflow: auto;
	}
	
	&-item{
		padding: 30rpx var(--gutter);
		position: relative;
	}
	&-active{
		background-color: #fff;
		color: var(--primary);
		&::before{
			position: absolute;
			content: '';
			left: 0;
			top: 0;
			height: 100%;
			width: 6rpx;
			background-color: currentColor;
		}
	}
	
	&-right{
		flex: 1;
		background-color: #fff;
		overflow: auto;
	}
}
</style>