LayUI使用(一)点击树组件的右边空白区域也可响应事件

前提:

  • 如下,希望能够点击右边的空白区域也能够响应,而不仅仅是点击文本才响应
    在这里插入图片描述

分析流程

  • 一开始问了chatgpt,但它给的方案太麻烦了,而且还有错误,因此自己上手
  • F12进入调试模式,点击查看最终渲染的html,找到对应的元素如下
    在这里插入图片描述
  • 点击空白处无响应,点击文字才会响应,我意识到layui的点击绑定事件是绑定在layui-tree-txt这个类上的
  • 因此思路就是把这个区域放大,放大到和layui-tree-main的区域一样大
  • 因此最终方案很简单,只需要修改一下css,如下
    在这里插入图片描述
  • 大致意思就是修改最外层的entry的鼠标样式为手型,然后让内部的main和txt的宽度都和父节点一样,即100%
  • 这样点击事件的判定范围就是整个entry,即单个节点的整个范围,包括了右边的空白区域

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【MATLAB】基于EMD-PCA-LSTM的回归预测模型

有意向获取代码,请转文末观看代码获取方式~ 1 基本定义 基于EMD-PCA-LSTM的回归预测模型是一种结合了经验模态分解(Empirical Mode Decomposition, EMD)、主成分分析(Principal Component Analysis, PCA)和长短期记忆…

Qt快速入门到熟练(电子相册项目(二))

上一节我们成功实现了创建项目的向导界面的开发,这节我们继续去实现电子相册的其他功能。 新建DirTreeWidget类 还记得在Qt快速入门到熟练(电子相册项目(一))-CSDN博客里面,我们是在QDockWidget中添加了一个treeWidget作为以后显示目录树的空间…

App Inventor 2 TaifunBattery 电池管理器拓展,获取电量、电池容量

TaifunBattery 电池管理器拓展 电池管理器扩展。所需权限:无 demo效果图: 属性 返回当前健康常量。 可能的值有:冷(cold)、死(dead)、好(good)、过热(overheat)、过压(over voltage)、未知(unknown)、未指定故障(unspecified failure)。 返…

海山数据库(He3DB)数据仓库发展历史与架构演进:(一)传统数仓

从1990年代Bill Inmon提出数据仓库概念后经过四十多的发展,经历了早期的PC时代、互联网时代、移动互联网时代再到当前的云计算时代,但是数据仓库的构建目标基本没有变化,都是为了支持企业或者用户的决策分析,包括运营报表、企业营…

最近真的忙炸了。。

大家好,我是鱼皮,每隔一段时间,我都会写一段自己的工作复盘。最近这个月的主题就是 “忙炸了”!基本上只要睁眼的时间,基本都是在工作,以至于眼药水都怼上了。 简单分享一下我最近在做的一些事情吧。 1、…

docker 指定jdk11镜像执行jar

dockerfile :下载jdk11 并将上传的jar 放入jdk11容器/root,改名为app.jar vi dockerfile 。。。。内容见下图 # 构建jdk11镜像 docker build -t demo . # 也可以通过jdk11镜像(前提有jdk11镜像)外挂载目录方式运行jar docker run --name d…

简单介绍十款可以免费使用的API测试工具

API开发应该是后端开发最常见的工作,而调试和测试API是非常关键的,这篇文章简单介绍几款常用的工具以供大家参考。 SoapUI SoapUI是很老牌的工具的,在之前Webservice盛行的时候经常会用到。 现在官方推出了Pro版本的ReadyAPI,但要…

MacOS安装Docker-Compose

方法一 按照百度的方法进行安装,我大致复制一下百度的方法 1.确保您已经安装了Docker Desktop。 2.下载Docker Compose二进制文件。 3.将二进制文件移动到/usr/local/bin目录。 4.更改二进制文件的权限,使其可执行。 以下是具体的命令:…

使用TensorFlow Lite Micro流程记录(带源码)

文章目录 0 关于tflite micro1 克隆仓库2 编译静态库3 模型转换4 编写工程5 编写demo5.1 进行算子注册 5.2 推理过程6 debug记录6.1 缺少算子 6.2 注册表太小6.3 段错误6.4 进一步减小库体积 7 实际部署 0 关于tflite micro 关于tflite micro在这里接不做过多介绍了&#xff0c…

vue3结合element-plus之如何优雅的使用表单组件

背景 在日常开发中,我们会经常使用 element-ui 或者是 antdesign 或者是 element-plus 等组件库实现搜索功能 这里就需要用到相关表单组件 下面就以 element-plus 为例,我们实现一个搜索功能的组件,并且随着屏幕尺寸的变化,其布局也会跟随变化 最终大致效果如下: 这里…

MySql:多表设计-关联查询

目录 多表设计 代码 运行 数据库设计范式 设计三范式 1、第一范式: 2、第二范式: 3、第三范式: 多表设计_关联查询 外键 外键约束 代码 运行 注意: 应用 代码 运行 代码 运行 关联查询 含义: …

Android14之Binder调试(二百一十一)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

服务器数据恢复—服务器正常断电重启后raid信息丢失的数据恢复案例

服务器数据恢复环境: 一台某品牌DL380 G4服务器,服务器通过该服务器品牌smart array控制器挂载了一台国产的磁盘阵列,磁盘阵列中有一组由14块SCSI硬盘组建的RAID5。服务器安装LINUX操作系统,搭建了NFSFTP,作为内部文件…

【LeetCode】【1】两数之和(1141字)

文章目录 [toc]题目描述样例输入输出与解释样例1样例2样例3 提示进阶Python实现哈希表 个人主页:丷从心 系列专栏:LeetCode 刷题指南:LeetCode刷题指南 题目描述 给定一个整数数组nums和一个整数目标值target,请在该数组中找出…

传感器通过Profinet转Modbus网关与PLC通讯在生产线的应用

Profinet转Modbus(XD-MDPN100/300)网关可视作一座桥梁,能够实现Profinet协议与Modbus协议相互转换,支持Modbus RTU主站/从站,并且Profinet转Modbus网关设备自带网口和串口,既可以实现协议的转换&#xff0c…

【Java基础】IO流(4) —— 转换流、打印流

【Java基础】IO流(1) —— 简介 【Java基础】IO流(2) —— 字符流 【Java基础】IO流(3) —— 字节流 【Java基础】IO流(4) —— 转换流、打印流 【Java基础】IO流(5) —— 序列流、内存流 【Java基础】IO流(6) —— 随机访问文件流、数据流 转换流 InputStreamReader 是字节输…

VUE H5字体在安卓手机偏上解决

安卓手机展示样式,数字偏上,展示效果如图: 项目内添加新字体,引用新字体 vue 项目需要引入字体的话, 可以移步到这篇文章(无需下载依赖包)Vue3中引入外部自定义字体 项目文件assets内创建font文件夹, 粘贴你想用的字体, 创建对应的css文件; scss代码: font-face {/* 自定义的…

前端学习-day08

文章目录 01-相对定位02-绝对定位03-绝对定位居中04-固定定位05-堆叠顺序06-CSS精灵-基本使用07-案例-京东服务08-字体图标10.垂直对齐方式11-过度12-透明度13-光标类型14-轮播图 01-相对定位 <!DOCTYPE html> <html lang"en"> <head><meta ch…

k8s 声明式资源管理

一、资源配置清单的管理 1.1 查看资源配置清单 声明式管理方法&#xff1a; 1.适合于对资源的修改操作 2.声明式资源管理方法依赖于资源配置清单文件对资源进行管理 资源配置清单文件有两种格式&#xff1a;yaml&#xff08;人性化&#xff0c;易读&#xff09;&#xff0c;j…

高性能负载均衡的分类及架构分析

如何选择与部署适合的高性能负载均衡方案&#xff1f; 当单服务器性能无法满足需求&#xff0c;高性能集群便成为提升系统处理能力的关键。其核心在于通过增加服务器数量&#xff0c;强化整体计算能力。而集群设计的挑战在于任务分配&#xff0c;因为无论在哪台服务器上执行&am…