Ⅰ- 壹 - 功能展示和使用需求
需求描述
基于vant 实现,仿京东分类功能实现样式交互等基本实现,细节可能需要优化
地址
https://gitee.com/wswhq/vue3-vant-temp/tree/master/src/view/ClassIfication
功能展示
Ⅱ - 贰 - 封装思路
不表述了自己看代码吧
Ⅲ - 叁 - 使用
参数
-
leftDatas:左侧数据 ,格式为
[{id: "11",text: "数码",},......] -
rightDatas:右侧数据
[{id: "11",text: "数码",children: [{id: "111",text: "手机",children: [{id: "1111",text: "手机1",tableLogo: "https://img.yzcdn.cn/vant/apple-1.jpg",price: "1000",tableName: "手机1",},...]}...]...}
]
-
height:整体高度默认 80vh
-
on-click-item 事件 接受俩参数
使用
import ClassIfication from "@/components/ClassIfication/index.vue";// 接受 三个参数<ClassIfication @on-click-item="onClickItem"></ClassIfication>js
// 接受俩参数, 需要的别的自己控制
const onClickItem = (item,targetItem) => {console.log(item,targetItem,"===item,targetItem===");
};
