SxsnWechat/components/CusSearch/index.vue

<template>
	<view class="search adfac">
		<image class="icon" src="https://oss.familydaf.cn/sxsnfile/20251218/9093140778f4463489a7e83746b70ab2.png"></image>
		<view class="input">
			<up-input :placeholder="placeholder" v-model="keyword" border="none" style="font-size: 26rpx;" @confirm="handleSearch"></up-input>
		</view>
		<view class="btn" @click="handleSearch" v-if="!isCancel">搜索</view>
		<view class="btn" @click="handleCancel" v-else>取消</view>
	</view>
</template>

<script setup name="CusSearch">
	defineProps({
		placeholder:{
			typeof: String,
			default: '查找公益活动'
		},
		isCancel:{
			typeof: Boolean,
			default: false
		}
	})
	
	import { ref, onMounted } from 'vue'
	
	const keyword = ref('')
	const emits = defineEmits(['handleSearch','handleCancel'])
	
	const handleSearch = () => {
		emits('handleSearch',keyword.value);
	}
	const handleCancel = () => {
		emits('handleCancel');
	}
	
	defineExpose({
		keyword
	})
</script>

<style scoped lang="scss">
	::v-deep .u-input__content input{
		// 解决输入框在ios机型上获取不到闪烁的光标的问题(安卓机型上有)
		/* 1. (首选方案) 强制开启硬件加速，触发独立渲染层，修复iOS下的渲染bug */
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
		/* 2. (辅助方案) 明确指定文本可选，有时有助于唤醒光标 */
		-webkit-user-select: text;
		user-select: text;
		/* 3. (保持) 您已正确设置，确保光标颜色正确 */
		caret-color: #252525 !important;  
	}
	
	.search{
		width: 100%;
		background: #FFFFFF;
		border-radius: 34rpx;
		padding: 6rpx 6rpx 6rpx 26rpx;
		box-sizing: border-box;
		.icon{
			width: 36rpx;
			height: 36rpx;
		}
		.input{
			flex: 1;
			padding: 0 11rpx;
			box-sizing: border-box;
		}
		.btn{
			padding: 9rpx 27rpx;
			background: #B7F358;
			border-radius: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #252525;
			line-height: 37rpx;
		}
	}
</style>