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

<template>
	<fs-popover
		v-model="selectedAction"
		:placement="placement"
		:actions="actions"
		:width="width"
		:actionWidth="actionWidth"
		:valueKey="valueKey"
		@clickAction="handleClickAction"
		@visibleChange="handleChange"
	>
		<template #refer>
			<view class="fs-select" :class="[{ 'fs-select-border': border }]">
				<view class="fs-select-content line1">{{ selectedAction.text || placeholder }}</view>
				<view class="fs-select-icon"><fs-icon type="icon-d-down" :rotate="state.rotate" size="30rpx"></fs-icon></view>
			</view>
		</template>
		<!-- <slot></slot> -->
	</fs-popover>
</template>

<script>
/**
 * 选择器组件
 * @description 选择器组件
 * @property {Array} actions 选项列表
 * @property {String} valueKey 作为 value 唯一标识的键名
 * @property {String} placement = [top | top-start | top-end | bottom | bottom-start | bottom-end,left | left-start | left-end,right | right-start | right-end] 弹出位置
 * @property {String} placeholder 占位符
 * @property {String} width select宽度
 * @property {String} actionWidth 选项列表宽度
 * @property {Boolean} border 显示边框
 * @event {Function} change 选项变化事件
 */
export default {
	name: 'fs-select'
}
</script>

<script setup>
import { ref, reactive, computed } from 'vue'

const props = defineProps({
	modelValue: [Object],
	actions: Array,
	border: Boolean,
	placeholder: String,
	width: {
		type: String,
		default: '100%'
	},
	actionWidth: {
		type: String,
		default: 'auto'
	},
	placement: {
		type: String,
		default: 'bottom',
		validator(value) {
			return [
				'top',
				'top-start',
				'top-end',
				'bottom',
				'bottom-start',
				'bottom-end',
				'left',
				'left-start',
				'left-end',
				'right',
				'right-start',
				'right-end'
			].includes(value)
		}
	},
	valueKey: {
		type: String,
		default: 'id'
	}
})
const emits = defineEmits(['change', 'update:modelValue'])

const selectedAction = computed({
	get: () => props.modelValue,
	set: value => {
		emits('update:modelValue', value)
	}
})

const state = reactive({
	rotate: '0'
})

const handleClickAction = item => {
	emits('update:modelValue', item)
	emits('change', item)
}
const handleChange = () => {
	state.rotate = state.rotate === '0' ? '180' : '0'
}
</script>

<style lang="scss" scoped>
.fs-select {
	display: flex;
	height: 70rpx;
	align-items: center;
	justify-content: space-between;
	position: relative;
	background-color: inherit;
	position: relative;
	padding-right: 20rpx;
	max-width: 100%;

	&-border {
		border: 2rpx solid var(--border-color) !important;
		border-radius: 4rpx !important;
		padding-left: 20rpx;
		&.fs-select-content {
			padding: 20rpx;
		}
	}

	&-content {
		flex: 1;
		width: 400rpx;
	}
	&-icon {
		padding-left: 20rpx;
		flex-shrink: 0;
	}

	.visible {
		transform: rotate(180deg);
		transform-origin: center center;
	}
}
</style>