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

需求描述

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