Vue项目实战之一----实现分类弹框效果
效果图
实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><style>.as {width: auto;margin-left: 20px;height: auto;}.ass {width: auto;margin-left: 20px;height: auto;margin-top: 20px;}.cass {width: auto;margin-left: 20px;height: auto;margin-top: 20px;}</style></head>
<body><div id="app"><el-button round @click="drawer = true" typer="primary" style="margin-left: 16px">点击选择需要的东西</el-button><el-drawertitle="请选择商品分类":visible.sync="drawer":direction="direction":before-close="handleClose"><div class="as"><el-button round v-for="(item,index) in tableDate" style="margin-bottom: 20px;margin-left: 10px"@click="xian(item)">{{item.name}}</el-button></div><div v-show="hiddens" class="ass"><hr/><el-button round v-for="(ss,index) in childrens" style="margin-bottom: 20px;margin-left: 10px"@click="san(ss)">{{ss.na}}</el-button></div><div v-show="hiddenes" class="ass"><hr/><el-button round v-for="(san,index) in sanChildrens" style="margin-bottom: 20px;margin-left: 10px">{{san.yu}}</el-button></div><div class="cass"><el-button type="warning" round>取消</el-button><el-button type="success" round style="width: 400px">确认</el-button></div></el-drawer></div></body>
<script>new Vue({el: '#app',data: {childrens: [],sanChildrens:[],hiddens: false,hiddenes: false,drawer: false,direction: 'rtl',tableDate: [{name: '活畜',children: [{na: "生猪"},{na: "羊"},{na: "鸡"},{na: "鸭"},{na: "格子"}]}, {name: "猪肉类",children: [{na: "猪瘦肉",children: [{yu: "猪背"},{yu: "猪脚"},{yu: "猪头"}]},{na: "新鲜猪大腿",children: [{yu: "猪脚"},{yu: "猪脚"},{yu: "猪脚"}]},{na: "新鲜猪尾巴",children: [{yu: "猪头"},{yu: "猪头肉"},{yu: "猪眼"}]}]}, {name: "牛肉类",children: [{na: "西藏黑山耗牛肉"},{na: "日本合牛肉"},{na: "俄罗斯黄牛肉"}]}, {name: "鸡鸭鹅类",children: [{na: "鸡胸肉"},{na: "整只鸡"},{na: "鸭腿"}]}, {name: "羊狗类",children: [{na: "狗头"},{na: "羊头"},{na: "羊大腿"}]}, {name: "水产海鲜类",children: [{na: "鲟鱼"},{na: "鱿鱼"},{na: "多宝鱼"}]}, {name: "蔬菜类",children: [{na: "白菜"},{na: "菠菜"},{na: "卷心菜"}]}, {name: "水果类",children: [{na: "苹果"},{na: "香蕉"},{na: "梨"}]}, {name: "米面粮油",children: [{na: "东北大米"},{na: "缅甸小米"},{na: "东北珍珠米"}]}, {name: "干货调味品",children: [{na: "耗油"},{na: "生抽"},{na: "胡椒盐"}]}, {name: "冷冻冻货",children: [{na: "冷冻猪大腿"},{na: "冷冻瘦肉"},{na: "冷冻猪尾巴"}]}, {name: "农副加工",children: [{na: "面粉"},{na: "面包"},{na: "小麦面包"}]}, {name: "日常用品",children: [{na: "毛巾"},{na: "钢丝球"},{na: "沐浴露"}]}, {name: "酒水饮料",children: [{na: "雪碧"},{na: "可乐"},{na: "啤酒"}]}]},methods: {handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});},xian(dd) {this.hiddens = true;this.childrens = dd.children;this.hiddenes=false;},san(item){this.hiddenes = true;this.sanChildrens = item.children;}}})
</script>
</html>相关文章：
Vue项目实战之一----实现分类弹框效果
效果图 实现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"js/vue.js"></script><!-- 引入样式 --><link rel"stylesheet&qu…...
Vue解析器
解析器本质上是一个状态机。但我们也曾提到，正则表达式其实也是一个状态机。因此在编写 parser 的时候，利用正则表达式能够让我们少写不少代码。本章我们将更多地利用正则表达式来实现 HTML 解析器。另外，一个完善的 HTML 解析器远比想象的要…...
Spring Cloud 版本升级遇坑记：OpenFeignClient与Gateway的恩怨情仇
Spring Cloud 版本升级遇坑记：OpenFeignClient与Gateway的恩怨情仇 近日，在对项目中的 Spring Boot、Spring Cloud 以及 Spring Cloud Alibaba 进行版本升级时，遭遇了一个令人头疼的问题：Spring Cloud Gateway 在运行时一直卡住&a…...
面试：Docker相关问题
文章目录 请解释一下什么是 Docker，以及它在云环境中的应用请简述Docker和LXC的区别什么是Docker Compose？请简述其作用和使用场景在使用Docker时，如何为容器创建一个可访问的网络当一个Docker容器运行异常时，如何通过Docker命令查…...
移动端浏览器 jquery 获取 pdf blob文件流 预览pdf
最近遇到一个需求，一个古早的移动端 juery 项目要求做一个页面，从接口获取 pdf 文件流，然后预览出来 这里使用第三方工具：pdf.js 代码如下： // 引入相关文件<script src"../js/pdf.js" type"text…...
Redis并发问题解决方案
目录 前言 1.分布式锁 1.基于单个节点 2.基于多个节点 3.watch(乐观锁) 2.原子操作 1.单命令操作 2.Lua 脚本(多命令操作) 3.事务 1.执行步骤 2.错误处理 3.崩溃处理 总结 前言 在多个客户端并发访问Redis的时候，虽然Redis是单线程执行指令ÿ…...
读取两个文件夹里不同名的文件，处理映射不对应的文件
解决方案：读取两个文件夹里不同名的文件，处理映射不对应的文件 # -*- coding: utf-8 -*- import ospath1 r/home/ubuntu/data/yoloData/images/train2017 path2 r/home/ubuntu/data/yoloData/labels/train2017def read_all_file_name():file_path ./t…...
SpringCloud原理-OpenFeign篇（四、请求原理）
文章目录 前言正文一、书接上回，从代理对象入手二、ReflectiveFeign.FeignInvocationHandler#invoke()三、SynchronousMethodHandler#invoke(...) 的实现原理3.1 invoke(...)源码3.2 executeAndDecode(...) 执行请求并解码 四、如何更换client 的实现 附录附1&#…...
什么是工业物联网（IOT）？这样的IOT平台你需要吗？——青创智通
物联网(IOT)是指在互联网上为传输和共享数据而嵌入传感器和软件的互联设备的广泛性网络。这允许将从物理对象收集的信息(数据)存储在专用服务器或云中。通过分析这些积累的信息，通过提供最优的设备控制和方法，可以实现一个更安全、更方便的社会。在智能家…...
MTK Pump Express 快速充电原理分析
1 MTK PE 1.1 原理 在讲正文之前，我们先看一个例子。 对于一块电池，我们假设它的容量是6000mAh，并且标称电压是3.7V，换算成Wh(瓦时)为单位的值是22.3Wh(6000mAh*3.7V)；普通的充电器输出电压电流是5V2A(10W)，…...
leetcode刷题记录——1991. 找到数组的中间位置
找到数组的中间位置 给你一个下标从 0 开始的整数数组 nums ，请你找到 最左边 的中间位置 middleIndex （也就是所有可能中间位置下标最小的一个）。 中间位置 middleIndex 是满足 nums[0] nums[1] … nums[middleIndex-1] nums[middleInd…...
跨域攻击分析和防御（上）
点击星标，即时接收最新推文 跨域攻击 在大型公司或大型跨国企业中都拥有自己的内网，跨国公司都有各个子公司一般以建立域林进行共享资源。根据不同职能区分的部门，从逻辑上以主域和子域进行划分以方便统一管理。在物理层使用防火墙将各个子公…...
GEE：梯度提升树（Gradient Boosting Tree）分类教程（样本制作、特征添加、训练、精度、参数优化、贡献度、统计面积）
作者：CSDN @ _养乐多_ 本文将介绍在Google Earth Engine （GEE）平台上进行梯度提升树（Gradient Boosting Tree）分类的方法和代码，其中包括制作样本点教程（本地、在线和本地在线混合制作样本点，合并样本点等），加入特征变量(各种指数、纹理特征、时间序列特征、物候特征…...
ubuntu22.04 arrch64版在线安装redis
脚本 apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 40976EAF437D05B5 apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 3B4FE6ACC0B21F32 echo "deb http://archive.ubuntu.com/ubuntu/ trusty main universe restricted multiverse" >…...
篮桥云课-摆玩具
思维好题 一开始掉进了二分的陷阱，发现看看逐个位置的差，我们要分成k段就是要取消k-1个最大的逐差 然后将剩余的加起来就可以了 因为本体保证是从小到大给出的 这一点保证了答案的正确性，自己没想出来 还是太菜了 #include<bits/stdc.h&…...
【python】python进阶知识点
eval函数用法 函数参数：字符串 # 计算表达式 print(eval("12*3")) # 把字符串当成python程序运行 print(eval("random.random()")) # 字符串转成列表 print(type(eval("[1,2,3,4]"))) # 字符串转成字典 print(type(eval("{name…...
LeetCode算法题解（动态规划）|LeetCode322. 零钱兑换、LeetCode279. 完全平方数
一、LeetCode322. 零钱兑换 题目链接：322. 零钱兑换 题目描述： 给你一个整数数组 coins ，表示不同面额的硬币；以及一个整数 amount ，表示总金额。 计算并返回可以凑成总金额所需的 最少的硬币个数 。如果没有任何一…...
Python Web开发基础知识篇
一，基础知识篇 本片文章会简单地说一些python开发web中所必须的一些基础知识。主要包括HTML和css基础、JavaScript基础、网络编程基础、MySQL数据库基础、Web框架基础等知识。 1,Web简介 Web，全称为World Wide Web，也就是WWW，万…...
企业计算机服务器中了360勒索病毒怎么办，360勒索病毒解密文件恢复
计算机技术的不断发展，为企业的生产运营提供了极大便利，不仅提升了办公效率，还促进了企业的发展。企业计算机在日常工作中一定加以防护，减少网络威胁事件的产生，确保企业的生产生产运营。最近，网络上的360后…...
LeetCode无重复字符的最长字符串的Java实现
题目 给定一个字符串 s ，请你找出其中不含有重复字符的 最长连续子字符串 的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子字符串是 "abc"，所以其长度为 3。示例 2: 输入: s "bbbbb" 输…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中，拉取视频流只要求udp方式，从2016开始要求新增支持tcp被动和tcp主动两种方式，udp理论上会丢包的，所以实际使用过程可能会出现画面花屏的情况，而tcp肯定不丢包，起码…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码，专为学校招生场景量身打造，功能实用且操作便捷。 从技术架构来看，ThinkPHP提供稳定可靠的后台服务，FastAdmin加速开发流程，UniApp则保障小程序在多端有良好的兼…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表，若其中包含环，则输出环的入口节点。 若其中不包含环，则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
零基础设计模式——行为型模式 - 责任链模式
第四部分：行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习！行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想：使多个对象都有机会处…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问（基础概念问题） 1. 请解释Spring框架的核心容器是什么？它在Spring中起到什么作用？ Spring框架的核心容器是IoC容器&#…...
VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式，然后找到相应的网卡（可以查看自己本机的网络连接） windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置，选择刚才配置的桥接模式 静态ip设置： 我用的ubuntu24桌…...
现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？
现有的 Redis 分布式锁库（如 Redisson）相比于开发者自己基于 Redis 命令（如 SETNX, EXPIRE, DEL）手动实现分布式锁，提供了巨大的便利性和健壮性。主要体现在以下几个方面： 原子性保证 (Atomicity)ÿ…...
虚拟电厂发展三大趋势：市场化、技术主导、车网互联
市场化：从政策驱动到多元盈利 政策全面赋能 2025年4月，国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》，首次明确虚拟电厂为“独立市场主体”，提出硬性目标：2027年全国调节能力≥2000万千瓦࿰…...