更新记录
1.0.1(2023-11-02) 下载此版本
添加示例
1.0.0(2023-07-04) 下载此版本
drop-down-meun
下拉式筛选菜单
商城,团购常用的下拉式筛选菜单
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
meunVisible | Boolean | true | 是否展示菜单 |
dataList | Array | [] | 菜单数据 |
使用示例
<drop-down-meun v-model='meunVisible' :dataList='meunList'></drop-down-meun>
import dropDownMeun from '@/components/drop-down-meun/drop-down-meun.vue'
export default {
components: {
dropDownMeun
},
data() {
return {
meunVisible:false,
meunList: [{
"id": 1,
"name": "食品饮料",
"cate_id": "20000,20003,20004",
"children": [{
"cate_id": 20000,
"name": "3C数码配件"
},
{
"cate_id": 20003,
"name": "打火机/瑞士军刀/眼镜"
},
{
"cate_id": 20004,
"name": "茶"
}
],
"recommends": []
},
{
"id": 2,
"name": "家庭清洁",
"cate_id": "20005,20006,20008",
"children": [{
"cate_id": 20005,
"name": "女装"
},
{
"cate_id": 20006,
"name": "女鞋"
},
{
"cate_id": 20008,
"name": "生鲜"
}
],
"recommends": []
},
{
"id": 3,
"name": "个护家清",
"cate_id": "20009,20010,20011",
"children": [{
"cate_id": 20009,
"name": "男装"
},
{
"cate_id": 20010,
"name": "男鞋"
},
{
"cate_id": 20011,
"name": "箱包"
}
],
"recommends": []
},
{
"id": 4,
"name": "美妆护肤",
"cate_id": "20013,20015",
"children": [{
"cate_id": 20013,
"name": "五金/工具"
},
{
"cate_id": 20015,
"name": "书籍/杂志/报纸"
}
],
"recommends": []
},
{
"id": 5,
"name": "服饰内衣",
"cate_id": "20017,20018",
"children": [{
"cate_id": 20017,
"name": "咖啡/麦片/冲饮"
},
{
"cate_id": 20018,
"name": "零食/坚果/特产"
}
],
"recommends": []
},
{
"id": 6,
"name": "个人护理",
"cate_id": "20025",
"children": [{
"cate_id": 20025,
"name": "玩具/童车/益智/积木/模型"
}],
"recommends": []
},
{
"id": 7,
"name": "家纺布艺",
"cate_id": "20026,20027,20028,20029",
"children": [{
"cate_id": 20026,
"name": "户外/登山/野营/旅行用品"
},
{
"cate_id": 20027,
"name": "运动/瑜伽/健身/球迷用品"
},
{
"cate_id": 20028,
"name": "奶粉/辅食/营养品/零食"
},
{
"cate_id": 20029,
"name": "彩妆/香水/美妆工具"
}
],
"recommends": []
},
{
"id": 8,
"name": "运动户外",
"cate_id": "20032,20033,20035",
"children": [{
"cate_id": 20032,
"name": "童装/婴儿装/亲子装"
},
{
"cate_id": 20033,
"name": "童鞋/婴儿鞋/亲子鞋"
},
{
"cate_id": 20035,
"name": "厨房/烹饪用具"
}
],
"recommends": []
},
{
"id": 9,
"name": "图书影像",
"cate_id": "20036",
"children": [{
"cate_id": 20036,
"name": "商业/办公家具"
}],
"recommends": []
},
{
"id": 10,
"name": "3C数码家电",
"cate_id": "20080,20083",
"children": [{
"cate_id": 20080,
"name": "时尚饰品"
},
{
"cate_id": 20083,
"name": "生活电器"
}
],
"recommends": []
}
]
}
}
}
效果图
暂无
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
× | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
drop-down-meun
下拉式筛选菜单
商城,团购常用的下拉式筛选菜单
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
meunVisible | Boolean | true | 是否展示菜单 |
dataList | Array | [] | 菜单数据 |
使用示例
<drop-down-meun v-model='meunVisible' :dataList='meunList'></drop-down-meun>
import dropDownMeun from '@/components/drop-down-meun/drop-down-meun.vue'
export default {
components: {
dropDownMeun
},
data() {
return {
meunVisible:false,
meunList: [{
"id": 1,
"name": "食品饮料",
"cate_id": "20000,20003,20004",
"children": [{
"cate_id": 20000,
"name": "3C数码配件"
},
{
"cate_id": 20003,
"name": "打火机/瑞士军刀/眼镜"
},
{
"cate_id": 20004,
"name": "茶"
}
],
"recommends": []
},
{
"id": 2,
"name": "家庭清洁",
"cate_id": "20005,20006,20008",
"children": [{
"cate_id": 20005,
"name": "女装"
},
{
"cate_id": 20006,
"name": "女鞋"
},
{
"cate_id": 20008,
"name": "生鲜"
}
],
"recommends": []
},
{
"id": 3,
"name": "个护家清",
"cate_id": "20009,20010,20011",
"children": [{
"cate_id": 20009,
"name": "男装"
},
{
"cate_id": 20010,
"name": "男鞋"
},
{
"cate_id": 20011,
"name": "箱包"
}
],
"recommends": []
},
{
"id": 4,
"name": "美妆护肤",
"cate_id": "20013,20015",
"children": [{
"cate_id": 20013,
"name": "五金/工具"
},
{
"cate_id": 20015,
"name": "书籍/杂志/报纸"
}
],
"recommends": []
},
{
"id": 5,
"name": "服饰内衣",
"cate_id": "20017,20018",
"children": [{
"cate_id": 20017,
"name": "咖啡/麦片/冲饮"
},
{
"cate_id": 20018,
"name": "零食/坚果/特产"
}
],
"recommends": []
},
{
"id": 6,
"name": "个人护理",
"cate_id": "20025",
"children": [{
"cate_id": 20025,
"name": "玩具/童车/益智/积木/模型"
}],
"recommends": []
},
{
"id": 7,
"name": "家纺布艺",
"cate_id": "20026,20027,20028,20029",
"children": [{
"cate_id": 20026,
"name": "户外/登山/野营/旅行用品"
},
{
"cate_id": 20027,
"name": "运动/瑜伽/健身/球迷用品"
},
{
"cate_id": 20028,
"name": "奶粉/辅食/营养品/零食"
},
{
"cate_id": 20029,
"name": "彩妆/香水/美妆工具"
}
],
"recommends": []
},
{
"id": 8,
"name": "运动户外",
"cate_id": "20032,20033,20035",
"children": [{
"cate_id": 20032,
"name": "童装/婴儿装/亲子装"
},
{
"cate_id": 20033,
"name": "童鞋/婴儿鞋/亲子鞋"
},
{
"cate_id": 20035,
"name": "厨房/烹饪用具"
}
],
"recommends": []
},
{
"id": 9,
"name": "图书影像",
"cate_id": "20036",
"children": [{
"cate_id": 20036,
"name": "商业/办公家具"
}],
"recommends": []
},
{
"id": 10,
"name": "3C数码家电",
"cate_id": "20080,20083",
"children": [{
"cate_id": 20080,
"name": "时尚饰品"
},
{
"cate_id": 20083,
"name": "生活电器"
}
],
"recommends": []
}
]
}
}
}
效果图
暂无