lh-mobile/components/lin-select/lin-select.vue

<template>
	<view class="yealuo-select">
		<view class="yealuo-background" @tap="isShow = false" v-show="isShow"></view>
		<view class="yealuo-con" :style="inputStyle" @tap='isShow = !isShow'>
			<slot name='left'></slot>
			<input class="uni-combox__input" :disabled="theDisabled" :placeholder="placeholder" v-model="theValue"
				@input="theInput" @focus="theFocus" @blur="theBlur" autocomplete="off" />
			<slot name='right' v-if="selectIco">
				<svg class="icon" v-if="!isShow"
					style="width: 1.5em; height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;"
					viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="530">
					<path
						d="M512 714.666667c-8.533333 0-17.066667-2.133333-23.466667-8.533334l-341.333333-341.333333c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l320 317.866667 317.866667-320c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L533.333333 704c-4.266667 8.533333-12.8 10.666667-21.333333 10.666667z"
						p-id="531"></path>
				</svg>
				<svg class="icon" v-else
					style="width: 1.5em; height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;"
					viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1927">
					<path
						d="M904.533333 674.133333l-362.666666-362.666666c-17.066667-17.066667-42.666667-17.066667-59.733334 0l-362.666666 362.666666c-17.066667 17.066667-17.066667 42.666667 0 59.733334 17.066667 17.066667 42.666667 17.066667 59.733333 0L512 401.066667l332.8 332.8c8.533333 8.533333 19.2 12.8 29.866667 12.8s21.333333-4.266667 29.866666-12.8c17.066667-17.066667 17.066667-42.666667 0-59.733334z"
						p-id="1928"></path>
				</svg>
			</slot>
		</view>
		<view class="uni-select__selector" v-show="show" :style="selectStyle">
			<view class="uni-popper__arrow"></view>
			<scroll-view scroll-y="true" class="uni-select__selector-scroll">
				<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
					<text>{{emptyTips}}</text>
				</view>
				<view class="data">
					<radio-group v-if="checkType=='radio'" @change="selectCheckbox">
						<view class="select-item" :class="'item-'+overflow" v-for="(item, index) in nowData"
							:key="index">
							<label class="item-text" :class="{active: theValue==item.value}">
								<radio name="name1" checked v-if="theValue==item.value" :value="item.id">
								</radio>
								<radio name="name1" v-else :value="item.id"></radio>
								<text class="select-text">{{item.value}}</text>
							</label>
						</view>
					</radio-group>
					<checkbox-group v-else-if="checkType=='checkbox'" @change="selectCheckbox">
						<view class="select-item" :class="'item-'+overflow" v-for="(item, index) in nowData"
							:key="index">
							<label class="item-text" :class="{active: theValue.indexOf(item.value)!=-1 }">
								<checkbox name="name1" checked v-if="theValue.indexOf(item.value)!=-1 "
									:value="item.id"></checkbox>
								<checkbox name="name1" v-else :value="item.id"></checkbox>
								<text class="select-text">{{item.value}}</text>
							</label>
						</view>
					</checkbox-group>
					<radio-group v-else @change="selectCheckbox">
						<view class="select-item" :class="'item-'+overflow" v-for="(item, index) in nowData"
							:key="index">
							<label class="item-text" :class="{active: theValue==item.value}">
								<radio name="name1" style="display: none;" checked v-if="theValue==item.value"
									:value="item.id"></radio>
								<radio name="name1" style="display: none;" v-else :value="item.id">
								</radio>
								<text class="select-text">{{item.value}}</text>
							</label>
						</view>
					</radio-group>
				</view>
			</scroll-view>
			<!-- <view class="item-close" @tap="isShow=false">收起</view> -->
		</view>
	</view>
</template>

<script>
	/**
	 * v1.0.3
	 * 最后修改: 2023.03.24
	 * 创建: 2023.03.24
	 * Author: 林维增
	 * contact:2630208719.com
	 */
	let fontUnit = 'upx'
	// #ifdef MP-WEIXIN
	fontUnit = 'rpx'
	// #endif
	export default {
		name: 'yealuoInputs',
		props: {
			placeholder: {
				type: String,
				default: ''
			},
			//初始化
			value: {
				type: String,
				default: ''
			},
			checkType: {
				type: String,
				default: ''
			},
			itemKey: {
				type: String,
				default: ''
			},
			width: {
				type: String,
				default: '600'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			inputStyle: {
				type: String,
				default: ''
			},
			selectStyle: {
				type: String,
				default: ''
			},
			overflow: {
				type: String,
				default: 'auto'
			},
			tags: {
				type: String,
				default: ''
			},

			binData: {
				type: Array,
				default: ''
			},
			selectIco: {
				type: Boolean,
				default: true
			},
			emptyTips: {
				type: String,
				default: '无匹配项'
			}
		},
		data() {
			return {
				odData: this.binData,
				nowData: this.binData,
				isShow: false,
				theValue: this.value,
				theDisabled: this.disabled
			}
		},
		watch: {
			value(val) {
				this.theValue = val;
			},
			//监听数据变化
			nowData: {
				handler: function() {
					this.nowData = this.binData;
				},
				deep: true
			},
		},
		computed: {
			show() {
				return this.isShow
			},
			filterCandidatesLength() {
				return this.binData.length
			}
		},
		methods: {
			//获取焦点
			theFocus(e) {
				this.nowData = this.odData;
			},
			//失去焦点
			theBlur(e) {
				this.$emit('blur', e)
			},
			//获取输入值
			theInput(e) {
				var val = e.detail.value;
				let data = [];
				var odData = this.odData;
				for (var i = 0; i < odData.length; i++) {
					var isHas = false;
					if (odData[i].value.indexOf(val) != -1) {
						data.push(odData[i])
						if (odData[i].value == val) {
							isHas = true;
							var arr = [];
							arr.push(odData[i].value)
							this.$emit('getBackVal', arr);
						}
					}
					if (!isHas) {
						var arr = [];
						arr.push(val)
						this.$emit('getBackVal', arr);
					}
				}
				this.nowData = data;
			},
			//下拉选中
			selectCheckbox(e) {
				var val = e.detail.value
				var str = val;
				let list = []
				let list2 = []
				if (typeof(str) != "string") {
					str = ""
					val.forEach(item => {
						if (item) {
							let itenShow = this.binData.find(it => it.id == item)
							if (itenShow) {
								list2.push(itenShow.value)
							}
							list.push(item)
						}
					})
					str = list2.join("，")
				} else {
					let itenShow = this.binData.find(it => it.id == str)
					if (itenShow) {
						str = itenShow.value
					}
					this.isShow = false;
				}
				this.$emit('getBackVal', str)
				this.theValue = str;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.yealuo-select {
		// margin: 20rpx;
		max-width: 100%;
		position: relative;
		border: 1px solid #DCDFE6;
		border-radius: 4px;

		.yealuo-background {
			position: fixed;
			top: 0;
			left: 0;
			width: 750upx;
			height: 100%;
		}

		.yealuo-con {
			display: flex;
			align-items: center;
			justify-content: center;


		}
	}

	.uni-combox__input {
		padding: 15rpx;
		flex: 1;
		font-size: 28rpx;
		height: 65rpx;
		line-height: 65rpx;
	}

	.icon {
		color: #999;
		font-size: 26rpx;
		margin-right: 10rpx;
	}

	.item-close {
		padding: 20upx;
		text-align: center;
		font-size: 32upx;
		border-top: 1px solid #f3f3f4;
		color: #8F8F94;
	}

	.uni-select__selector {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		position: absolute;
		top: calc(100% + 12px);
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		border: 1px solid #EBEEF5;
		border-radius: 6px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		z-index: 2;
		padding: 4px 0;
		z-index: 999;
	}

	.uni-select__selector-scroll {
		/* #ifndef APP-NVUE */
		max-height: 200px;
		box-sizing: border-box;
		/* #endif */
		padding: 0 20rpx;

		.select-item {
			width: 100%;
			color: #666;
			margin: 10rpx 0;

			.item-text {
				width: 100%;
				display: block;

				.select-text {
					margin-left: 10rpx;
				}
			}

			.active {
				font-weight: bold;
			}
		}

		.item-auto {
			overflow: auto;

			.item-text {
				width: max-content;
			}
		}

		.item-hide .item-text {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}


	/* picker 弹出层通用的指示小三角 */
	.uni-popper__arrow,
	.uni-popper__arrow::after {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 6px;
	}

	.uni-popper__arrow {
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
		top: -6px;
		left: 10%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.uni-popper__arrow::after {
		content: " ";
		top: 1px;
		margin-left: -6px;
		border-top-width: 0;
		border-bottom-color: #fff;
	}

	.uni-combox__selector-empty {
		/* #ifndef APP-NVUE */
		display: flex;
		cursor: pointer;
		/* #endif */
		line-height: 36px;
		font-size: 14px;
		text-align: center;
		// border-bottom: solid 1px #DDDDDD;
		padding: 0px 10px;
	}
</style>