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" 输…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接：A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串，只有在同时为 o 时输出 Yes 并结束程序，否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...
WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章？AI自动生成，效率提升10倍！ 支持多语言、自动配图、定时发布，让内容创作更轻松！ AI内容生成 → 不想每天写文章？AI一键生成高质量内容！多语言支持 → 跨境电商必备&am…...
数据库分批入库
今天在工作中，遇到一个问题，就是分批查询的时候，由于批次过大导致出现了一些问题，一下是问题描述和解决方案： 示例： // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象：mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时，可能是因为以下几个原因：1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作 传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性 本论文优点：（1）在ALOHA…...
Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程，代码下载：这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中，**知识蒸馏（Knowledge Distillation）**被广泛应用，作为提升模型…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币，另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额，返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...