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>
/**
 * 侧边栏组件
 * @description 侧边栏组件
 * @property {Array} list sidebar列表
 * @property {String} value 默认激活项的value(通常为id)
 * @property {String} valueKey 激活项value的key
 * @property {String} titleKey 显示内容的key
 * @property {String} width 侧边栏组宽度
 * @event {Function} change 激活项变化事件
 */
export default {
	name: 'fs-sidebar'
}
</script>

<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>