vue3 vant4 仿京东分类功能实现

本文主要是介绍vue3 vant4 仿京东分类功能实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Ⅰ- 壹 - 功能展示和使用需求

需求描述

基于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===");
};

这篇关于vue3 vant4 仿京东分类功能实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---