vue3 vant4 仿京东分类功能实现

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

需求描述

基于vant 实现,仿京东分类功能实现样式交互等基本实现,细节可能需要优化

地址
https://gitee.com/wswhq/vue3-vant-temp/tree/master/src/view/ClassIfication

功能展示

PixPin_2024-06-13_15-53-35.png

PixPin_2024-06-13_16-12-06.png

Ⅱ - 贰 - 封装思路

不表述了自己看代码吧

Ⅲ - 叁 - 使用

参数

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/349004.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

梯度下降法、牛顿法、条件熵

梯度下降法、牛顿法&#xff08;可见南瓜书&#xff09; 梯度下降法 深度学习&#xff1a;梯度下降法数学表示式的详细推导 牛顿法 条件熵 在李航老师的书中&#xff0c;第六章最大熵模型这里有个条件熵的定义&#xff1a; 推导如下&#xff1a; 其他一些事实&#xff1a;…

Vue22-v-model收集表单数据

一、效果图 二、代码 2-1、HTML代码 2-2、vue代码 1、v-model单选框的收集信息 v-model&#xff1a;默认收集的就是元素中的value值。 单选框添加默认值&#xff1a; 2、v-model多选框的收集信息 ①、多个选择的多选 注意&#xff1a; 此处的hobby要是数组&#xff01;&…

springboot 整合redis问题,缓存击穿,穿透,雪崩,分布式锁

boot整合redis 压力测试出现失败 解决方案 排除lettuce 使用jedis <!-- 引入redis --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><exclusions><exclus…

【电子信息工程专业课】学习记录

数字信号处理 离散时间信号与系统 周期延拓 一个连续时间信号经过理想采样后&#xff0c;其频谱将沿着频率轴以采样频率Ωs 2π / T 为间隔而重复。 混频 各周期的延拓分量产生频谱交替的现象 奈奎斯特采样定理 fs > 2fh Z变换 收敛域&#xff1a;使任意给定序列x(n)的Z变…

Sqoop学习详细介绍!!

一、Sqoop介绍 Sqoop是一款开源的工具&#xff0c;主要用于在Hadoop(HDFS/Hive/HBase)与传统的数据库(mysql、postgresql...)间进行数据的传递&#xff0c;可以将一个关系型数据库&#xff08;例如 &#xff1a; MySQL ,Oracle ,Postgres等&#xff09;中的数据导进到Hadoop的H…

2024年金融、贸易与创意产业国际会议(ICFTCI 2024)

2024 International Conference on Financial Trade and Creative Industries 【1】大会信息 会议简称&#xff1a;ICFTCI 2024 大会地点&#xff1a;中国西安 投稿邮箱&#xff1a;icftcisub-paper.com 【2】会议简介 2024年金融贸易与创意产业国际会议即将召开&#xff…

【Python】已完美解决:executemany() takes exactly 2 positional arguments (3 given)

文章目录 一、问题背景二、可能出错的原因三、错误代码示例四、正确代码示例&#xff08;结合实战场景&#xff09;五、注意事项 已解决&#xff1a;Python中executemany()方法参数数量错误的问题 一、问题背景 在Python的数据库编程中&#xff0c;executemany()方法是一个常…

loading组件封装原理

以vue3为例&#xff0c;采用ts 的语言 首先可对所需数据定义在接口中 interface Prop{ //核心所需的就是 lading:boolean ,type: lading | skeleton} 进行调用 封装的话采用的是插槽 <div v-if"loading" ><slot name"template"><…

随手记:uniapp图片展示,剩余的堆叠

UI效果图&#xff1a; 实现思路&#xff1a; 循环图片数组&#xff0c;只展示几张宽度就为几张图片边距的宽度&#xff0c;剩下的图片直接堆叠展示 点击预览的时候传入当前的下标&#xff0c;如果是点击堆叠的话&#xff0c;下标从堆叠数量开始计算 <template><…

私有云和多云管理平台 | Cloudpods v3.11.4 正式发布

本次 3.11.4 更新亮点为&#xff1a;系统镜像引入社区镜像&#xff0c;用户可以一键导入各主流开源操作系统镜像&#xff0c;方便用户上手使用。持续迭代共享 LVM&#xff0c;支持快照&#xff0c;主备机等特性&#xff0c;修复迁移删除镜像缓存等 BUG。 功能优化 【费用】费…

Vue25-内置指令02:v-text指令

一、v-html对比v-text v-html支持结构的解析&#xff0c;v-text不支持结构的解析。 二、v-html的安全性问题 2-1、cookie的原理&#xff08;node.js&#xff09; 7天免登录&#xff0c;cookie实现。 cookie的本质就是类似于json的字符串&#xff0c;格式是&#xff1a;key-va…

数据安全:Web3时代的隐私保护新标准

随着数字化时代的到来&#xff0c;我们的生活已经完全依赖于互联网和数据交换。然而&#xff0c;随之而来的是对个人隐私和数据安全的日益关注。在这个信息爆炸的时代&#xff0c;数据泄露、个人隐私侵犯和网络攻击等问题日益突出&#xff0c;而Web3技术的崛起正带来了一种全新…

【AI】文心一言的使用分享

在数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;技术的飞速发展正在改变我们的生活。文心一言&#xff0c;作为这一浪潮中的佼佼者&#xff0c;以其卓越的自然语言处理能力和广泛的应用场景&#xff0c;给我带来了前所未有的使用体验。在这篇分享中&#xff0c;我…

Sui Bridge在测试网上线并推出10万SUI激励计划

是一种为Sui设计的原生桥接协议&#xff0c;专门用于在Sui与其他网络之间桥接资产和数据。今天&#xff0c;Sui Bridge宣布在测试网上线。作为一种原生协议&#xff0c;Sui Bridge能够在Ethereum和Sui之间轻松且安全地转移ETH、wBTC、USDC和USDT&#xff0c;使其成为Sui基础设施…

基于 Python 解析 XML 文件并将数据存储到 MongoDB 数据库

1. 问题背景 在软件开发中&#xff0c;我们经常需要处理各种格式的数据。XML 是一种常用的数据交换格式&#xff0c;它可以存储和传输结构化数据。很多网站会提供 XML 格式的数据接口&#xff0c;以便其他系统可以方便地获取数据。 我们有这样一个需求&#xff1a;我们需要从…

GIGE 协议摘录 —— 照相机的标准特征列表(五)

系列文章目录 GIGE 学习笔记 GIGE 协议摘录 —— 设备发现&#xff08;一&#xff09; GIGE 协议摘录 —— GVCP 协议&#xff08;二&#xff09; GIGE 协议摘录 —— GVSP 协议&#xff08;三&#xff09; GIGE 协议摘录 —— 引导寄存器&#xff08;四&#xff09; GIGE 协议…

D 25章 进程的终止

D 25章 进程的终止 440 25.1 进程的终止&#xff1a;_exit()和exit() 440 1. _exit(int status)&#xff0c; status 定义了终止状态&#xff0c;父进程可调用 wait 获取。仅低8位可用&#xff0c; 调用 _exit() 总是成功的。 2.程序一般不会调用 _exit()&#xff0c; 而是…

CobaltStrike权限传递MSF

一、测试环境 操作系统&#xff1a; 1.VMware17 2.kali 6.1.0-kali5-amd64 3.Win10x64 软件&#xff1a; 1.cs4.0 2.metasploit v6.3.4-dev 二、测试思路 1.cs是一款渗透测试工具&#xff0c;但没有漏洞利用的模块&#xff0c;我们可以在拿到目标主机的权限后&#xff0c;将…

函数式开发接口( Consumer、Function)在实际开发中的应用场景

之前有个扫码下载文件需求&#xff0c;由于要同时进行记录下载人的记录。一开始用的是异步进行日志记录。发现有的用户扫码下载了一次文件&#xff0c;日志记录了三条。这种很容易联想到是因为网络抖动造成的。 问题代码 由于日志记录是异步的&#xff0c;文件下载需要时间。同…

不想搭集群,直接用spark

为了完成布置的作业&#xff0c;需要用到spark的本地模式&#xff0c;根本用不到集群&#xff0c;就不想搭建虚拟机&#xff0c;hadoop集群啥的&#xff0c;很繁琐&#xff0c;最后写作业还用不到集群&#xff08;感觉搭建集群对于我完成作业来说没有什么意义&#xff09;&…