1. 下载安装uni_modules插件(已安装跳过)
官网地址与教程:uni_modules | uni-app官网 (dcloud.net.cn)
2. 基础使用用例
官网基础教程与案例:uni-app官网 (dcloud.net.cn)
3. 自定义使用uni_modules内部的uni-icons图标
<uni-search-bar placeholder="自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
</uni-search-bar>
4.使用阿里巴巴库下载的自定义图标
使用阿里巴巴库图标使用参考:uniapp 使用自定义icon图标__Jyann_的博客-优快云博客
5.使用自定义图片
<uni-search-bar placeholder="自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
<template v-slot:searchIcon>
<image src="自定义图片url" mode="widthFix" style="width: 36rpx;"></image>
</template>
</uni-search-bar>
效果: