添加确认直接搜索功能

ghs/src/components/module/app-search.vue

@@ -1,129 +1,153 @@
 <template>
-	<div class="app-search-module" :style="{height: height + 'rpx'}">
-		<div class="map-search" :style="{backgroundColor: backColor}">
+	<div class="app-search-module" :style="{ height: height + 'rpx' }">
+		<div class="map-search" :style="{ backgroundColor: backColor }">
 			<div class="icon-wrap" v-if="isIcon">
 				<i class="iconfont" :class="[icon]"></i>
 			</div>
 			<div class="input-wrap">
-				<input type="text" ref="searchInput" v-model="search" :focus="focus" @input="inputFn" :style="{fontSize: fontSize + 'rpx'}" :placeholder="placeholder" placeholder-class="placeholder" />
+				<input
+					type="text"
+					ref="searchInput"
+					v-model="search"
+					:focus="focus"
+					@input="inputFn"
+					:style="{ fontSize: fontSize + 'rpx' }"
+					:placeholder="placeholder"
+					placeholder-class="placeholder"
+					@confirm="searchFn"
+				/>
 			</div>
 		</div>
 		<block v-if="isBtn">
-			<button v-if="isTextBtn" class="search-btn" :style="{fontSize: fontSize + 'rpx'}" @click="searchFn">{{ btnText }}</button>
-			<button v-else class="search-btn admin-button-com middle blue" :style="{fontSize: fontSize + 'rpx'}" @click="searchFn">{{ btnText }}</button>
+			<button
+				v-if="isTextBtn"
+				class="search-btn"
+				:style="{ fontSize: fontSize + 'rpx' }"
+				@click="searchFn"
+			>
+				{{ btnText }}
+			</button>
+			<button
+				v-else
+				class="search-btn admin-button-com middle blue"
+				:style="{ fontSize: fontSize + 'rpx' }"
+				@click="searchFn"
+			>
+				{{ btnText }}
+			</button>
 		</block>
 	</div>
 </template>
 
 <script>
-	export default {
-		name: 'app-search-module',
-		props: {
-			// 搜索组件的高度
-			height: {
-				type: Number,
-				default: 66
-			},
-			placeholder: {
-				type: String,
-				default: '请输入'
-			},
-			// size字体大小
-			fontSize: {
-				type: Number,
-				default: 26
-			},
-			// 是否有icon
-			isIcon: {
-				type: Boolean,
-				default: true
-			},
-			// 显示的icon
-			icon: {
-				type: String,
-				default: 'iconsearch'
-			},
-			// 背景色
-			backColor: {
-				type: String,
-				default: '#F0F2F6'
-			},
-			// 是否需要按钮
-			isBtn: {
-				type: Boolean,
-				default: false
-			},
-			// 是否是文字按钮
-			isTextBtn: {
-				type: Boolean,
-				default: true
-			},
-			// 按钮文字
-			btnText: {
-				type: String,
-				default: '搜索'
-			},
-			// 是否自动聚焦
-			focus: {
-				type: Boolean,
-				default: false
-			}
+export default {
+	name: "app-search-module",
+	props: {
+		// 搜索组件的高度
+		height: {
+			type: Number,
+			default: 66
 		},
-		data() {
-			return {
-				search: ''
-			}
+		placeholder: {
+			type: String,
+			default: "请输入"
 		},
-		methods: {
-			searchFn() {
-				this.$emit('search', this.search)
-			},
-			inputFn(e) {
-				// console.log('sdfa', e)
-				setTimeout(() => {
-					this.$emit('input', this.search)
-				})
-			}
+		// size字体大小
+		fontSize: {
+			type: Number,
+			default: 26
+		},
+		// 是否有icon
+		isIcon: {
+			type: Boolean,
+			default: true
+		},
+		// 显示的icon
+		icon: {
+			type: String,
+			default: "iconsearch"
+		},
+		// 背景色
+		backColor: {
+			type: String,
+			default: "#F0F2F6"
+		},
+		// 是否需要按钮
+		isBtn: {
+			type: Boolean,
+			default: false
+		},
+		// 是否是文字按钮
+		isTextBtn: {
+			type: Boolean,
+			default: true
+		},
+		// 按钮文字
+		btnText: {
+			type: String,
+			default: "搜索"
+		},
+		// 是否自动聚焦
+		focus: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			search: ""
+		};
+	},
+	methods: {
+		searchFn() {
+			this.$emit("search", this.search);
+		},
+		inputFn(e) {
+			// console.log('sdfa', e)
+			setTimeout(() => {
+				this.$emit("input", this.search);
+			});
 		}
 	}
+};
 </script>
 
 <style lang="scss" scoped>
-	.app-search-module {
+.app-search-module {
+	width: 100%;
+	@include disFlex(center, space-between);
+	.map-search {
+		@include disFlex(center, flex-start);
 		width: 100%;
-		@include disFlex(center, space-between);
-		.map-search {
-			@include disFlex(center, flex-start);
-			width: 100%;
-			height: 100%;
-			border-radius: 10px;
-			.icon-wrap {
-				margin-left: 20px;
-				width: 40px;
-				.iconfont {
-					color: #ccc;
-					font-size: 32px;
-				}
-			}
-			.input-wrap {
-				width: calc(100% - 90px);
-				margin-left: 14px;
-				input {
-					font-size: 26px;
-					text-align: left;
-				}
-				.placeholder {
-					color: #ccc;
-				}
+		height: 100%;
+		border-radius: 10px;
+		.icon-wrap {
+			margin-left: 20px;
+			width: 40px;
+			.iconfont {
+				color: #ccc;
+				font-size: 32px;
 			}
 		}
-		// 按钮
-		.search-btn {
-			height: 100%;
-			padding: 0 20px;
-			flex-shrink: 0;
-			margin-left: 20px;
-			background-color: inherit;
+		.input-wrap {
+			width: calc(100% - 90px);
+			margin-left: 14px;
+			input {
+				font-size: 26px;
+				text-align: left;
+			}
+			.placeholder {
+				color: #ccc;
+			}
 		}
 	}
+	// 按钮
+	.search-btn {
+		height: 100%;
+		padding: 0 20px;
+		flex-shrink: 0;
+		margin-left: 20px;
+		background-color: inherit;
+	}
+}
 </style>