uni-zhihuikuangshan/components/p-personnel-orientation-section-4/p-personnel-orientation-section-4.vue

<template>
	<view>
		<view class="content">
			<view class="title">
				<picker mode="selector" :range="array" :value="index" @change="bindPickerChange">
					<view class="title_select">
						<view>{{array[index]}}</view>
						<view class="icon">
							<uni-icons type="arrowdown"></uni-icons>
						</view>
					</view>
				</picker>
			</view>
			<view class="inner">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['当前各科室下井人数', '今日各科室下井人数'],
				index: 0,
			};
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.$emit("changeDepart",e.target.value)
				this.index = e.target.value
			},
		}
	}
</script>

<style lang="scss">
	.content {
		margin-top: 16rpx;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 29rpx 0px rgba(59, 74, 116, 0.14);
		border-radius: 20rpx;

		.title {
			line-height: 96rpx;
			text-align: center;


			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #232627;
			

			
			.title_select{
				display: flex;
				justify-content: center;
				.icon{
					margin-left: 20rpx;
				}
			}
		}

		.inner {
			// height: 200rpx;
		}
	}
</style>