更新记录
1.1.0(2024-12-06) 下载此版本
效果优化
1.0.0(2023-06-06) 下载此版本
初始化
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | √ | √ | √ | √ |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
支持扫码体验-见右侧二维码
依赖插件:uni-search-bar tag-list
<template>
<view>
<customer-search :maxSearchListLength="maxSearchListLength" :recommendTabValueName="recommendTabValueName"
:recommendTabShowName="recommendTabShowName" :recommendList="recommendList" @search="handleSearch"
@cancel="handleCancel" @recommend="handleRecommend"></customer-search>
</view>
</template>
<script>
export default {
data() {
return {
maxSearchListLength: 10, // 历史搜索最大数量
recommendTabShowName: 'label',
recommendTabValueName: 'value',
recommendList: [{
value: 1,
label: '智能手表'
}]
}
},
created() {},
methods: {
/**
* 搜索
*/
handleSearch(searchValue, searchItem) {},
/**
* 点击取消
*/
handleCancel() {},
/**
* 点击更新推荐
*/
handleRecommend() {}
},
}
</script>
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
maxSearchListLength | Number | 10 | 历史搜索最大存储数量 |
recommendList | Array | [] | 搜索推荐列表 |
recommendTabShowName | String | 'label' | 搜索推荐展示字段名 |
recommendTabValueName | String | 'value' | 搜索推荐展示值字段名 |
@search | Function | null | 搜索触发 |
@cancel | Function | null | 搜索栏点击取消 |
@recommend | Function | null | 搜索栏点击更新搜索推荐 |