fs-uni-template/components/fs-search/fs-search.vue

<template>
	<view class="fs-search-box" :style="{ backgroundColor: bgColor }">
		<view class="fs-search-box-left"><slot name="left"></slot></view>
		<view class="fs-input-box" :class="[{ round }]" @click="handleLink" :style="{ backgroundColor: inputBgColor }">
			<view class="sub fs-input" v-if="link">{{ placeholder }}</view>
			<input
				v-else
				class="fs-input"
				:value="modelValue"
				:type="type"
				:placeholder="placeholder"
				@input="handleChange"
				@focus="handleFocus"
				@blur="handleBlur"
				:focus="autoFocus"
			/>
			<view class="fs-icon fs-icon-search">
				<slot name="icon"><fs-icon type="icon-search" color="#666666" size="28rpx"></fs-icon></slot>
			</view>
			<view class="fs-icon fs-icon-close" v-if="modelValue" @click="handleClear">
				<fs-icon type="icon-close-circle" color="#666666"></fs-icon>
			</view>
		</view>
		<view
			v-if="showAction"
			class="fs-cancel"
			:class="[actionColorType]"
			:style="{ color: actionColor }"
			@click="handleAction"
		>
			{{ actionText }}
		</view>
		<view class="fs-search-box-right"><slot name="right"></slot></view>
	</view>
</template>

<script>
/**
 * 搜索组件
 * @description 搜索组件
 * @property {String} placeholder 占位符
 * @property {String} type 输入框类型
 * @property {String} actionColor 操作文字颜色
 * @property {String} actionColorType = [primary | danger | warning | info | success] 操作文字颜色类型
 * @property {String} actionText 操作文字
 * @property {String} bgColor 背景颜色
 * @property {String} inputBgColor 输入框背景颜色
 * @property {String} showAction 是否显示操作
 * @property {String} round 是否圆角
 * @property {String} autoFocus 是否圆角
 * @property {String} link 跳转地址
 * @property {String} linkType 跳转类型
 * @event {Function} focus 输入框聚焦事件
 * @event {Function} blur 输入框失去焦点事件
 * @event {Function} change 输入框内容变化事件
 * @event {Function} action 点击操作事件
 */
export default {
	name: 'fs-search'
}
</script>

<script setup>
import { ref } from 'vue'

const props = defineProps({
	placeholder: {
		type: String,
		default: '搜索'
	},
	actionColor: String,
	actionColorType: {
		type: String,
		validator(value) {
			return ['primary', 'success', 'info', 'warning', 'danger'].includes(value)
		}
	},
	actionText: {
		type: String,
		default: '取消'
	},
	autoFocus: Boolean,
	showAction: Boolean,
	round: Boolean,
	type: {
		type: String,
		default: 'text'
	},
	bgColor: {
		type: String,
		default: '#fff'
	},
	inputBgColor: {
		type: String,
		default: '#f0f0f0'
	},
	link: String,
	linkType: {
		type: String,
		default: 'navigateTo'
	},
	modelValue: String
})

const emits = defineEmits(['action', 'focus', 'blur', 'update:modelValue', 'change'])

const handleChange = e => {
	emits('update:modelValue', e.detail.value)
	emits('change', e.detail.value)
}
const handleFocus = () => {
	emits('focus')
}
const handleBlur = () => {
	emits('blur')
}
const handleClear = () => {
	emits('update:modelValue', '')
	emits('change', '')
}
const handleAction = () => {
	emits('action', props.modelValue)
}
const handleLink = () => {
	if (props.link) {
		uni[props.linkType]({
			url: props.link
		})
	}
}
</script>

<style lang="scss" scoped>
.fs-search-box {
	width: 100%;
	height: 110rpx;
	padding: 20rpx var(--gutter);
	display: flex;
	background-color: #fff;
	box-sizing: border-box;
	align-items: center;
}
.fs-input-box {
	position: relative;
	height: 100%;
	width: 100%;
	flex: 1;
	background-color: #f0f0f0;

	.sub {
		line-height: 70rpx;
		color: var(--sub);
	}

	&.round {
		border-radius: 20px;
		.fs-input {
			border-radius: inherit;
		}
	}
}
.fs-input {
	height: 100%;
	width: 100%;
	padding-left: 68rpx;
	padding-right: 70rpx;
	border-radius: 6rpx;
	box-sizing: border-box;
	outline: none;

	/* #ifdef H5 */
	background-color: inherit;
	border: none;
	/* #endif */
}

.fs-cancel {
	margin-left: 20rpx;
}
.fs-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: var(--sub);
	z-index: 10;
}
.fs-icon-search {
	left: 20rpx;
	line-height: 1;
}
.fs-icon-close {
	right: 20rpx;
}
</style>