报名工具小程序初始代码

components/drop-item/drop-item.vue

@@ -0,0 +1,163 @@
+<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>