signuptool-ui-xcx/components/drop-item/drop-item.vue

<template>

	<view :style="{'height':navHeightPx,'display':'flex','flex-direction':'row','align-items':'center'}"
		v-if="btnType!=0">

		<view class="uni-combox__input-box">

			<image v-if="btnType==2 && filterCandidatesLength > 0" :style="{'height':navHeightPx,'width':navHeightPx}"
				mode="aspectFit" :src="btnSource" @click.stop="toggleSelector">
			</image>
			<text v-if="btnType==1  && filterCandidatesLength > 0"
				:style="{'height':navHeightPx,'line-height':navHeightPx,'font-size':'28rpx','color':'#FFFFFF','padding-left':'20rpx','padding-right':'20rpx'}"
				@click.stop="toggleSelector">{{btnSource}}</text>

			<view>

				<view class="uni-combox__selector" v-if="showSelector" :style="{'margin-left': offsetPx}">
					<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
						<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
							<text>{{emptyTips}}</text>
						</view>
						<view class="uni-combox__selector-item" v-for="(item,index) in candidates" :key="index"
							@click="onSelectorClick(index)">
							<image :src="item.src" class="modal-img"></image>
							<text
								style="display:-webkit-box;-webkit-box-orient:vertical;  -webkit-line-clamp:1;  overflow:hidden;">{{item.name}}</text>
						</view>
					</scroll-view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'uni-combox',
		props: {
			btnType: {
				type: String,
				// 0不使用 1使用文字 2使用图片
				default: "0"
			},
			btnSource: {
				type: String,
				default: ""
			},
			emptyTips: {
				type: String,
				default: '无'
			},
			candidates: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				showSelector: false,
				navHeightPx: "",
				navWidth: "",
				windowWidth: "",
				offsetPx: ""
			}
		},
		computed: {
			filterCandidatesLength() {
				return this.candidates.length;
			}
		},
		methods: {
			toggleSelector() {
				this.showSelector = !this.showSelector
			},
			onSelectorClick(index) {
				this.showSelector = false
				this.$emit('onselect', index, this.candidates)
			},
			closeDropItem() {
				this.showSelector = false
			}
		},
		created() {
			this.navHeightPx = getApp().globalData.navHeightPx
			this.navWidth = getApp().globalData.navWidth
			this.windowWidth = getApp().globalData.windowWidth
			let offset = this.windowWidth - this.navWidth;
			this.offsetPx = "-160rpx"
			// 获取胶囊高度
			// #ifdef MP-WEIXIN||MP-BAID||MP-QQ||MP-TOUTIAO
			this.offsetPx = "-" + (this.windowWidth - this.navWidth - 20) + "px"
			// #endif

		}
	}
</script>

<style lang="scss" scoped>
	.uni-combox__input-box {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.uni-combox__selector {
		box-sizing: border-box;
		position: absolute;
		top: 42px;
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 6px;
		box-shadow: #DDDDDD 4px 4px 8px, #DDDDDD -4px -4px 8px;
		z-index: 2;
		width: 240rpx;
	}

	.uni-combox__selector-scroll {
		max-height: 200px;
		box-sizing: border-box;
	}

	.uni-combox__selector::before {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		border-bottom: solid 6px #FFFFFF;
		border-right: solid 6px transparent;
		border-left: solid 6px transparent;
		left: 85%;
		top: -6px;
		margin-left: -6px;
	}

	.uni-combox__selector-empty,
	.uni-combox__selector-item {
		display: flex;
		line-height: 80rpx;
		font-size: 14px;
		text-align: center;
		border-bottom: solid 1px #DDDDDD;
		margin: 0px 10px;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.uni-combox__selector-empty:last-child,
	.uni-combox__selector-item:last-child {
		border-bottom: none;
	}

	.modal-img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 5rpx;
	}
</style>