更新记录
1.0.1(2022-06-17) 下载此版本
v1.0.1:2022-06-17
解决搜索样式iphone6兼容问题
v1.0.0 :2022-06-01
顶部菜单选择,选择后显示取消按钮,支持一级菜单选择,时间选择,内容搜索。
2.0(2022-06-17) 下载此版本
v1.0.0 :2022-06-17 顶部菜单选择,选择后显示取消按钮,支持一级菜单选择,时间选择,内容搜索。
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.20 | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
√ | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | 9 | √ | √ | √ |
link-menu-top ---顶部菜单选择样式
作者:link 联系QQ:427720037
顶部菜单选择,选择后显示取消按钮,支持一级菜单选择,时间选择,内容搜索。 目前组件已经过PC、H5和微信小程序测试通过,其他端未经测试,或许都可以使用。
参数说明
-
必选参数:
:menulist="menulist" --- 整体菜单对象,请参考菜单示例
@callback="selectCallBack" ---菜单选择后的回调函数
-
可选参数:
:search="true" :value ---是否显示搜索图标,默认不显示
:value="params.searchValue" ---获取搜索关键字
使用说明
<link-menu-top :menulist="menulist" @callback="selectCallBack" :search="true" :value="params.searchValue" />
<script>
import LinkMenuTop from "@/uni_modules/link-menu-top/components/link-menu-top/link-menu-top.vue";
export default {
data() {
return {
msg: "",
params: {
pageNumber: 1, //当前页码
pageSize: 20, //分页大小
searchValue: ""
},
//菜单示例
menulist: [{
"name": "status",
"title": "状态",
"type": "string",
"show": false,
"selected": false,
"list": [{
"name": "未支付",
"value": "0",
"selected": false
}, {
"name": "已支付",
"value": "1",
"selected": false
}, {
"name": "已发货",
"value": "3",
"selected": false
}, {
"name": "已收货",
"value": "4",
"selected": false
}]
},
{
"name": "isFirst",
"title": "首次",
"type": "string",
"show": false,
"selected": false,
"list": [{
"name": "是",
"value": "true",
"selected": false
}, {
"name": "否",
"value": "false",
"selected": false
}]
},
{
"name": "source",
"title": "来源",
"type": "string",
"show": false,
"selected": false,
"list": [{
"name": "link",
"value": "0",
"selected": false
}, {
"name": "线上",
"value": "1",
"selected": false
}, {
"name": "线下",
"value": "2",
"selected": false
}]
},
{
"name": "createDate",
"title": "下单时间",
"type": "date",
"show": false,
"selected": false,
"list": []
},
{
"name": "search",
"title": "搜索",
"type": "search",
"show": false,
"selected": false,
"list": [{
"name": "姓名",
"value": "1",
"selected": false
}, {
"name": "地址",
"value": "2",
"selected": false
}, {
"name": "电话",
"value": "3",
"selected": false
}]
}
]
};
},
components: {
LinkMenuTop
},
onLoad() {},
methods: {
selectCallBack(menulistChild, searchValue) {
//获取返回的搜索值
this.params.searchValue = searchValue;
this.menulist = menulistChild;
this.getList();
},
//组装请求参数
getParams() {
this.menulist.forEach((item) => {
switch (item.name) {
case "status":
this.params["status"] = "";
item.list.forEach((item2) => {
if (item2.selected) {
this.params["status"] = item2.value;
}
});
break;
case "isFirst":
this.params["isFirst"] = "";
item.list.forEach((item2) => {
if (item2.selected) {
this.params["isFirst"] = item2.value;
}
});
break;
case "source":
this.params["source"] = "";
item.list.forEach((item2) => {
if (item2.selected) {
this.params["source"] = item2.value;
}
});
break;
case "createDate":
this.params["startDate"] = item.list[0] ?? "";
this.params["endDate"] = item.list[1] ?? "";
break;
case "search":
this.params["search"] = "";
item.list.forEach((item2) => {
if (item2.selected) {
this.params["search"] = item2.value;
}
});
break;
}
});
},
//获取列表
getList() {
this.getParams();
//this.msg=JSON.stringify(this.params)
//此处可以请求服务器接口获取数据,可以将组装过的参数this.params传给接口
//......
}
}
}
</script>
更新说明
v1.0.1:2022-06-17
解决搜索样式iphone6兼容问题
v1.0.0 :2022-06-01
顶部菜单选择,选择后显示取消按钮,支持一级菜单选择,时间选择,内容搜索。