更新记录
1.0.1(2023-11-17) 下载此版本
内容超长控制
1.0.0(2023-09-13) 下载此版本
搜索条
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
- | √ | √ | - | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
uwo-search-bar
自己项目使用,请谨慎引用。
<uwo-search-bar bgColor="#FFFFFF" :orderData="orderData" :filterData="filterData" @search="search"></uwo-search-bar>
/**
* 排序选项
*/
const orderData = ref([
{
label: '默认',
value: 'createdBy-DESC'
},
{
label: '实验室等级正序',
value: 'level-ASC'
},
{
label: '实验室等级倒序',
value: 'level-DESC'
}
]);
/**
* 筛选选项
*/
const filterData = ref([
{
key: 'level',
title: '实验室等级',
type: 'checkbox',
items: [
{ label: '一级', value: '1', checked: false },
{ label: '二级', value: '2', checked: false },
{ label: '三级', value: '3', checked: false },
{ label: '四级', value: '4', checked: false }
]
},
{
key: 'key1',
title: '实验室性质',
type: 'radio',
items: [
{ label: '科研用房', value: '1', checked: false },
{ label: '教学用房', value: '2', checked: false },
{ label: '科研用房', value: '3', checked: false },
{ label: '教学用房', value: '4', checked: false },
{ label: '科研用房', value: '5', checked: false },
{ label: '教学用房', value: '6', checked: false }
]
},
{
key: 'key2',
title: '实验室分类',
type: 'radio',
items: [
{ label: '化学类', value: '1', checked: false },
{ label: '生物类', value: '2', checked: false },
{ label: '机电类', value: '3', checked: false },
{ label: '辐射类', value: '4', checked: false },
{ label: '其他', value: '5', checked: false }
]
},
{
key: 'key3',
title: '实验室分类3',
type: 'radio',
items: [
{ label: '化学类', value: '1', checked: false },
{ label: '生物类', value: '2', checked: false },
{ label: '机电类', value: '3', checked: false },
{ label: '辐射类', value: '4', checked: false },
{ label: '其他', value: '5', checked: false },
{ label: '化学类1', value: '11', checked: false },
{ label: '生物类2', value: '21', checked: false },
{ label: '机电类3', value: '31', checked: false },
{ label: '辐射类4', value: '41', checked: false },
{ label: '其他5', value: '52', checked: false },
{ label: '化学类8', value: '12', checked: false },
{ label: '生物类9', value: '22', checked: false },
{ label: '机电类44', value: '32', checked: false },
{ label: '辐射类21', value: '43', checked: false },
{ label: '其他12', value: '54', checked: false },
{ label: '其他54', value: '52', checked: false },
{ label: '化学类84', value: '112', checked: false },
{ label: '生物类94', value: '212', checked: false },
{ label: '机电类444', value: '321', checked: false },
{ label: '辐射类241', value: '423', checked: false },
{ label: '其他124', value: '514', checked: false }
]
},
{
key: 'key4',
title: '实验室分类4',
type: 'radio',
items: [
{ label: '化学类', value: '1', checked: false },
{ label: '生物类', value: '2', checked: false },
{ label: '机电类', value: '3', checked: false },
{ label: '辐射类', value: '4', checked: false },
{ label: '其他', value: '5', checked: false },
{ label: '化学类1', value: '11', checked: false },
{ label: '生物类2', value: '21', checked: false },
{ label: '机电类3', value: '31', checked: false },
{ label: '辐射类4', value: '41', checked: false },
{ label: '其他5', value: '52', checked: false },
{ label: '化学类8', value: '12', checked: false },
{ label: '生物类9', value: '22', checked: false },
{ label: '机电类44', value: '32', checked: false },
{ label: '辐射类21', value: '43', checked: false },
{ label: '其他12', value: '54', checked: false },
{ label: '其他54', value: '52', checked: false },
{ label: '化学类84', value: '112', checked: false },
{ label: '生物类94', value: '212', checked: false },
{ label: '机电类444', value: '321', checked: false },
{ label: '辐射类241', value: '423', checked: false },
{ label: '其他124', value: '514', checked: false }
]
}
]);
const search = (params) => {
if (params.order) {
// name-order
const str = params.order.split('-');
params.sortName = str[0];
params.sortOrder = str[1];
delete params.order;
}
searchParams = params;
console.log(searchParams)
};