Storage-Android-master/components/my-select/my-select.vue

<template>
	<view 
		class="input" 
		:style="isActive? {...activeStyle}: ''"
		@click.stop="openList"
		>
		<!-- 文字显示区 -->
		<view 
			class="select-text"
			:style="{
				color: (placeholder? '#606266': '#bbb')
			}">
			{{ selectText || initValue || placeholder }}
		</view>
		<!-- 图标 -->
		<view 
			class="icon"
			:class="isActive? 'animate-open-rotate': 'animate-close-rotate'"
			>
			<uni-icons 
				:type="rightIcon" 
				:size="rightIconSize" 
				:color="rightIconColor">
			</uni-icons>
		</view>
		<!-- 展示列表 -->
		<view 
			v-if="isActive"
			class="list-wrap" 
			:class="isActive? 'fadeShow': 'fadeHidden'"
			>
			<!-- 特殊格式长*宽*高 -->
			<view class="list" v-if="itemFormat == '*'" :style="{height: `${list.length * itemHeight}rpx`}">
				<view
					class="item" 
					:style="{...(item.selected? itemActive: {}),height: `${itemHeight}rpx`,lineHeight: `${itemHeight}rpx`}"
					v-for="(item, index) in list"
					@click.stop="select(item)"
					>
					{{ `${item.width}*${item.height}*${item.length}` }}
				</view>
			</view>
			<!-- 按照绑定得字段来显示选中字段 :style="{height: `${list.length * itemHeight}rpx`}"-->
			<view v-else class="list" >
				<view
					class="item" 
					:style="{...(item.selected? itemActive: {}),height: `${itemHeight}rpx`,lineHeight: `${itemHeight}rpx`}"
					v-for="(item, index) in list"
					@click.stop="select(item)"
					>
					{{ `${item[itemFormat]}` }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectText: '',
				isActive: false
			};
		},
		methods: {
			// 下拉框选择
			select(item) {
				this.clearListStatus()
				item.selected = true
				this.itemFormat == '*'?this.selectText = `${item.width}*${item.height}*${item.length}`: this.selectText = item.text
				setTimeout(() => {
					this.toggleSelectStyle()
				}, 100)
				this.$emit('change', {
					newVal: item.value,
					orignItem: item
				})
			},
			openList() {
				this.toggleSelectStyle()
			},
			// 切换下拉框状态
			toggleSelectStyle() {
				this.isActive = !this.isActive
			},
			// 清空输入框
			clearInput() {
				this.selectText = ''
				this.isActive = false
				this.clearListStatus()
			},
			// 清空列表的选中样式
			clearListStatus() {
				for(let item of this.list) {
					item.selected = false
				}
			}
		},
		props: {
			// 下拉框点击显示的绑定字段
			itemFormat: {
				type: String,
				default: 'text'
			},
			//  数据列表
			list: {
				type: Array,
				default: () => {
					return [
						{text: '1楼', value: 1},
						{text: '4楼', value: 2}
					]
				}
			},
			// 输入框选中样式
			activeStyle: {
				type: Object,
				default: () => {
					return {
						borderColor: '#007aff'
					}
				}
			},
			itemActive: {
				type: Object,
				default: () => {
					return {
						backgroundColor: '#f5f7fa',
						color: '#007aff',
					}
				}
			},
			itemHeight: {
				type: Number,
				default: 72
			},
			// 右侧图标颜色
			rightIconColor: {
				type: String,
				default: '#bbb'
			},
			// 右侧图标
			rightIcon: {
				type: String,
				default: 'arrowdown'
			},
			// 右侧图标大小
			rightIconSize: {
				type: Number,
				default: 12
			},
			// 占位符
			placeholder: {
				type: String,
				default: '1楼'
			},
			initValue: {
				type: String,
				default: ''
			}
		},
		onLoad() {
			
		}
	}
</script>

<style lang="scss">
	.input {
		position: relative;
		padding: 0 5%;
		height: 72rpx;
		line-height: 72rpx;
		width: 100%;
		border-radius: 5rpx;
		border: 1px solid #6A6B6C;
		.select-text {
			padding-right: 50rpx;
			display: flex;
			align-items: center;
			width: 100%;
			height: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.icon {
			position: absolute;
			right: 20rpx;
			top: 0;
			height: 100%;
		}
		.list-wrap {
			position: absolute;
			top: calc(100% + 10px);
			left: 0;
			z-index: 999;
			width: 100%;
			border: 1px solid #eee;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			background-color: #FFFFFF;
			&::before {
				content: '';
				position: absolute;
				top: -14rpx;
				left: 50rpx;
				z-index: 999;
				width: 0;
				height: 0;
				border-left: 12rpx solid transparent;
				border-right: 12rpx solid transparent;
				border-bottom: 14rpx solid #eee;
			}
			&::after {
				content: '';
				position: absolute;
				top: -13rpx;
				left: 52rpx;
				z-index: 999;
				width: 0;
				height: 0;
				border-left: 11rpx solid transparent;
				border-right: 11rpx solid transparent;
				border-bottom: 13rpx solid #fff;
			}
			.list {
				padding: 10rpx 0;
				max-height: 300rpx;
				height: 300rpx;
				overflow: auto;
				border-radius: 5rpx;
				.item {
					padding: 0 5%;
				}
			}
		}
		.animate-open-rotate {
			transform: rotate(180deg);
			transition: all .5s ease;
		}
		.animate-close-rotate {
			transform: rotate(0);
			transition: all .5s ease;
		}
		.fadeShow {
			animation: fadeShow .2s linear;
		}
		.fadeHidden {
			animation: fadeHidden .2s linear;
		}
	}
	@keyframes fadeShow {
		0%{opacity: 0;}
		100%{opacity: 1}
	}
	@keyframes fadeHidden {
		0%{opacity: 1;}
		100%{opacity: 0}
	}
</style>