businessCard/pages/cardHolder/cardHolder.vue

<template>
	<view class="content">
		<uni-row class="row1">
			<uni-col :span="2" class="col">
				<uni-icons type="scan" size="30"></uni-icons>
			</uni-col>
			<uni-col :span="22">
				<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus"
					@input="input" @cancel="cancel" @clear="clear" placeholder="搜索名片" cancelButton="none">
				</uni-search-bar>
			</uni-col>

		</uni-row>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: ''
			};
		},
		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 0 20rpx;
	}
.row1{
	display: flex;
	align-items: center;
	.col{
	display: flex;
	align-items: center;
	}
}
</style>