1.下载及安装组件

如果直接复制官网代码到项目中，不可用，需要通过插件市场自动导入到项目中。导入后会有以下包自动导入

2.需要在App.vue中引入以下css文件

	// 每个页面公共页面样式
	@import '@/uni_modules/uni-scss/index.scss';
	/* #ifndef APP-NVUE */
	// nvue 页面暂时不支持自定义图标
	@import '@/static/icon-css/customicons.css';
	/* #endif */

3.基本使用

基本使用：组件上方法js中都必须存在

<uni-search-bar @confirm="search" :focus="true" v-model="searchVal" @blur="blur" @focus="focus" @input="input"
				@cancel="cancel" @clear="clear">
			</uni-search-bar>

...
<script>
export default {
		data() {
			return {
				searchVal:'',
			};
		},
		onLoad() {},
		methods: {
			search() {
				this.updateHistory(this.searchVal);
			},
			input(e) {
				// 输入结束后，将值存入historyList
				this.searchVal = e;
			}
		}
	}
<script>

4.uni-search-bar使用自定义图标（库中已存在）

<uni-search-bar placeholder="" class="search-bar-content" 
		@confirm="search" v-model="searchVal" @input="input" bgColor="#EEEEEE" radius="50"
				cancelButton="always">
    <uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
</uni-search-bar>

5.使用自己下载的自定义图标（阿里巴巴库）

自定义图标使用参考：uniapp 使用自定义icon图标__Jyann_的博客-CSDN博客

<uni-search-bar placeholder="" class="search-bar-content" 
		@confirm="search" v-model="searchVal" @input="input" bgColor="#EEEEEE" radius="50"
				cancelButton="always">
	<template v-slot:searchIcon>
		<uni-icons class="search-bar-icon" custom-prefix="bjsicons" type="bjs-search" size="30" @click="search"></uni-icons>
	</template>
</uni-search-bar>

如果要改变图标样式直接改变uni-searchbar__box即可：如将图标靠左显示

.uni-searchbar__box{
	// icon图标靠左
	justify-content: flex-start;
}