frontend/examking-app/plugins/uview-ui/components/u-search/u-search.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
	<view class="u-search" @tap="clickHandler" :style="{
		margin: margin,
	}">
		<view
			class="u-content"
			:style="{
				backgroundColor: bgColor,
				borderRadius: shape == 'round' ? '100rpx' : '10rpx',
				border: borderStyle,
				height: height + 'rpx'
			}"
		>
			<view class="u-icon-wrap">
				<u-icon class="u-clear-icon" :size="30" :name="searchIcon" :color="searchIconColor ? searchIconColor : color"></u-icon>
			</view>
			<input
				confirm-type="search"
				@blur="blur"
				:value="value"
				@confirm="search"
				@input="inputChange"
				:disabled="disabled"
				@focus="getFocus"
				:focus="focus"
				:maxlength="maxlength"
				placeholder-class="u-placeholder-class"
				:placeholder="placeholder"
				:placeholder-style="`color: ${placeholderColor}`"
				class="u-input"
				type="text"
				:style="[{
					textAlign: inputAlign,
					color: color,
					backgroundColor: bgColor,
				}, inputStyle]"
			/>
			<view class="u-close-wrap" v-if="keyword && clearabled && focused" @tap="clear">
				<u-icon class="u-clear-icon" name="close-circle-fill" size="34" color="#c0c4cc"></u-icon>
			</view>
		</view>
		<view :style="[actionStyle]" class="u-action" 
			:class="[showActionBtn || show ? 'u-action-active' : '']" 
			@tap.stop.prevent="custom"
		>{{ actionText }}</view>
	</view>
</template>

<script>
/**
 * search 搜索框
 * @description 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。
 * @tutorial https://www.uviewui.com/components/search.html
 * @property {String} shape 搜索框形状，round-圆形，square-方形（默认round）
 * @property {String} bg-color 搜索框背景颜色（默认#f2f2f2）
 * @property {String} border-color 边框颜色，配置了颜色，才会有边框
 * @property {String} placeholder 占位文字内容（默认“请输入关键字”）
 * @property {Boolean} clearabled 是否启用清除控件（默认true）
 * @property {Boolean} focus 是否自动获得焦点（默认false）
 * @property {Boolean} show-action 是否显示右侧控件（默认true）