当前位置: 首页 > news >正文

web vue 滑动选择 n宫格选中 九宫格选中

页面动态布局经常性要交给客户来操作,他们按时他们的习惯在同一个屏幕内显示若干个子视图,尤其是在医学影像领域对于影像的同屏显示目视对比显的更为重要。

来看看如下的用户体验:

 设计为最多支持5行6列页面展示后,右侧的布局则动态跟随来显示更多影像图像,在目视范围内则可以做出更多读片等判断操作。

下面来给出实现代码。

首先给出页面代码,因页面较为复杂,这里只给核心处的代码,你只需要重点关注el-popover组件位置的使用即可:

<div class="layout-view flex-row jc-center" v-for="layItem in layoutSeriTools":key="layItem.icon" :class="{ 'tool-item-hl': layItem.selected }"@click="seriesLayoutAction(layItem)"><el-image v-if="layItem.tag != 4" class="layout-item" :src="layItem.icon"></el-image><el-popover ref="boxPopover_0" v-else class="layout-item" popper-class="pop-grid-view" placement="right-start"trigger="hover"><div class="v-box-view" @mouseleave="leaveBoxAction(0)"><div class="v-box-item-view" :class="{ 'hili-box': ibox.selected }"v-for="(ibox, ixIndex) in layItem.child" :key="ixIndex"@mouseenter="hoverBoxAction(0, ibox)" @click="boxClickAction(0)"></div></div><el-image slot="reference" class="layout-item" :src="layItem.icon"></el-image></el-popover><el-image v-if="layItem.tag == 4" class="down-view":src="require('@/assets/images/downArrow.png')"></el-image>
</div>

我使用的elmentUI,其主题默认是白色,我根据页面修改了组件的样式:你想改就改,不改就忽略。

<style lang="scss" scoped>
.dropdown-menu-view {background: #222;background-color: #222;border: 2px solid #343434;
}.dropdown-menu-item-view {color: white;&:hover {background-color: rgba(2, 134, 240, 0.2);color: white;}
}
</style><style>
.popperView.el-select-dropdown {border: 2px solid #343434;
}.popperView .el-select-dropdown__list {background-color: #222;
}/* 自定义选中的选项背景色 */
.popperView .el-select-dropdown__item.selected {background-color: rgba(2, 134, 240, 0.2);color: white;
}/* 自定义鼠标悬停的选项背景色 */
.popperView .el-select-dropdown__item:hover {background-color: #ecf5ff;
}.popperView .el-select-dropdown__item {background-color: transparent;&:hover {background-color: rgba(2, 134, 240, 0.2);color: white;}
}.el-popper[x-placement^=top] .popper__arrow::after {border-top-color: #343434;
}.el-popper[x-placement^=top] .popper__arrow {border-top-color: #343434;
}.el-popper[x-placement^=bottom] .popper__arrow::after {border-bottom-color: #343434;
}.el-popper[x-placement^=bottom] .popper__arrow {border-bottom-color: #343434;
}.el-popper[x-placement^=right] .popper__arrow {border-right-color: #343434;
}.el-popper[x-placement^=right] .popper__arrow::after {border-right-color: #343434 !important;
}.pop-grid-view.el-popper {background: #1a1a1a;background-color: #1a1a1a;border: 3px solid #343434;padding: 0px;border-radius: 0px;
}
</style>

 

数据定义,元素从左到右均在数组中定义,只有最后一个元素时,才会显示自定义宫格功能,所以,数据仍然定义在其child中,注意其他元素并没有child。

layoutSeriTools: [{tag: 0,icon: require("@/assets/images/layout-1.png"),title: '',selected: true,toolsId: ''
}, {tag: 1,icon: require("@/assets/images/layout-2.png"),title: '',selected: false,toolsId: ''
}, {tag: 2,icon: require("@/assets/images/layout-3.png"),title: '',selected: false,toolsId: ''
}, {tag: 3,icon: require("@/assets/images/layout-4.png"),title: '',selected: false,toolsId: ''
}, {tag: 4,icon: require("@/assets/images/layout-5.png"),title: '',selected: false,toolsId: '',child: []
}],

 给最后一个元素塞入5行6列的数据,因为VUE本身就是MVVM,即我们好数据,对数据进行直接操作时,页面则会动态渲染。我们不可能愚蠢的去手动一个一个塞!所以这里使用for循环来塞。cols代表第几列,rows代码第几行,通过求商、求余来控制方格的元数据。

let boxItem = aForm.layoutSeriTools.filter(p => p.tag == 4)[0]
for (let i = 0; i < 30; i++) {let e = {selected: false,cols: i % 6,rows: parseInt(i / 6)}boxItem.child.push(e)
}

通过上面的代码就已经可以正常的弹出定义的行列显示,现在添加业务数据的控制逻辑:

 鼠标滑动到哪格中,小于这个格元数据的行、列则选中,否则不选中!这个方法则是核心!

hoverBoxAction(tag, item) {let list = tag == 0 ? this.layoutSeriTools.filter(p => p.tag == 4)[0].child : this.layoutPicTools.filter(p => p.tag == 4)[0].childlet row = item.rowslet col = item.colslist.forEach(m => {m.notClearn = falsem.selected = m.cols <= col && m.rows <= row});
},
boxClickAction(tag) {let tList = tag == 0 ? this.layoutSeriTools:this.layoutPicToolslet list = tList.filter(p => p.tag == 4)[0].childlet nList = list.filter(p => p.selected == true)nList.forEach(m => {m.notClearn = true});tList.filter(p=>p.selected == true).firstObject().selected = falsetList.filter(p=>p.tag == 4).firstObject().selected = truethis.$refs[`boxPopover_${tag}`][0].doClose()
},
leaveBoxAction(tag) {//别有用意,不要随便改时间,只是为了动画同步setTimeout(() => {let list = tag == 0 ? this.layoutSeriTools.filter(p => p.tag == 4)[0].child : this.layoutPicTools.filter(p => p.tag == 4)[0].childlist.forEach(m => {if (!m.notClearn) {m.selected = false}});}, 300);
}

祝你使用丝滑!若有疑问,请发表评论或者私信沟通。 

相关文章:

web vue 滑动选择 n宫格选中 九宫格选中

页面动态布局经常性要交给客户来操作&#xff0c;他们按时他们的习惯在同一个屏幕内显示若干个子视图&#xff0c;尤其是在医学影像领域对于影像的同屏显示目视对比显的更为重要。 来看看如下的用户体验&#xff1a; 设计为最多支持5行6列页面展示后&#xff0c;右侧的布局则动…...

Spring Boot整合EasyExcel

Spring Boot整合EasyExcel主要涉及到以下几个步骤&#xff1a; 1.添加EasyExcel依赖到Spring Boot项目的pom.xml文件中。 2.创建数据模型类&#xff0c;用于映射Excel文件中的数据。 3.编写读取和写入Excel的服务。 以下是一个简单的例子&#xff1a; 1.添加EasyExcel依赖 …...

微软表示不会使用你的 Word、Excel 数据进行 AI 训练

​微软否认使用 Microsoft 365 应用程序&#xff08;包括 Word、Excel 和 PowerPoint&#xff09;收集数据来训练公司人工智能 (AI) 模型的说法。 此前&#xff0c;Tumblr 的一篇博文声称&#xff0c;雷德蒙德使用“互联体验”功能抓取客户的 Word 和 Excel 数据&#xff0c;用…...

JavaScript(一)

1.JavaScript 基本使用 2.JavaScript简单事件 3.JavaScript修改样式 4.JavaScript数据类型 JavaScript和Java有什么关系 知识点一 JavaScript基本使用 JS写在哪 还有一种写在中间的&#xff0c;也就是<head>里面 JS一些注意事项 JS修改元素内容 #JS获取对象<…...

Day 32 动态规划part01

今天正式开始动态规划! 理论基础 无论大家之前对动态规划学到什么程度,一定要先看 我讲的 动态规划理论基础。 如果没做过动态规划的题目,看我讲的理论基础,会有感觉 是不是简单题想复杂了? 其实并没有,我讲的理论基础内容,在动规章节所有题目都有运用,所以很重要!…...

winform跨线程更新界面

前言&#xff1a; 大家好&#xff0c;我是上位机马工&#xff0c;硕士毕业4年年入40万&#xff0c;目前在一家自动化公司担任软件经理&#xff0c;从事C#上位机软件开发8年以上&#xff01;我们在开发C#程序的时候&#xff0c;有时候需要在非Ui主线程更新界面&#xff0c;为了…...

【合作原创】使用Termux搭建可以使用的生产力环境(二)

前言 上期文章没看的可以先从上期文章开始看起 【合作原创】使用Termux搭建可以使用的生产力环境&#xff08;一&#xff09;-CSDN博客 目前我们已经完成了FinalShell ssh连接手机Termux的功能了&#xff0c;这期我们继续朝我们的目标前进。今天早上有读者进群以为生成环境指…...

微积分复习笔记 Calculus Volume 2 - 3.3 Trigonometric Substitution

3.3 Trigonometric Substitution - Calculus Volume 2 | OpenStax...

vue2+svg+elementui实现花瓣图自定义el-select回显色卡图片

项目需要实现花瓣图&#xff0c;但是改图表在echarts&#xff0c;highCharts等案例中均未出现&#xff0c;有类似的韦恩图&#xff0c;但是和需求有所差距&#xff1b; 为实现该效果&#xff0c;静态图表上采取svg来手动绘制花瓣&#xff1a; 确定中心点&#xff0c;以该点为中…...

记录一次网关异常

记一次网关异常 网关时不时就会出现下面的异常。关键是不知道什么时候就会报错&#xff0c;并且有时候就算什么都不操作&#xff0c;也会导致这个异常。 ERROR org.springframework.scheduling.support.TaskUtils$LoggingErrorHandler - Unexpected error occurred in schedul…...

计算机网络——不同版本的 HTTP 协议

介绍 HTTP&#xff0c;即超文本传输协议&#xff08;HyperText Transfer Protocol&#xff09;&#xff0c;是应用层的一个简单的请求-响应协议&#xff0c;它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。本文将介绍 HTTP 协议各个版本。 HTTP/1.0 HTTP/1…...

使用 LLaMA-Factory 微调

git clone https://github.com/hiyouga/LLaMA-Factory.git cd LLaMA-Factory pip install -e . pip install tf-keras[dataset_info.json](dataset_info.json) 包含了所有可用的数据集。如果您希望使用自定义数据集&#xff0c;请**务必**在 dataset_info.json 文件中添加*数据…...

vue2 虚拟DOM 和 真实DOM (概念、作用、Diff 算法)

虚拟 DOM 和 真实DOM&#xff08;概念、作用、Diff 算法&#xff09; 1.1 概念 真实 DOM&#xff08;Document Object Model&#xff09;&#xff1a;是浏览器中用于表示文档结构的树形结构。 <h2>你好</h2>虚拟DOM&#xff1a;用 JavaScript 对象来模拟真实 DOM…...

GEOBench-VLM:专为地理空间任务设计的视觉-语言模型基准测试数据集

2024-11-29 ,由穆罕默德本扎耶德人工智能大学等机构创建了GEOBench-VLM数据集&#xff0c;目的评估视觉-语言模型&#xff08;VLM&#xff09;在地理空间任务中的表现。该数据集的推出填补了现有基准测试在地理空间应用中的空白&#xff0c;提供了超过10,000个经过人工验证的指…...

说说Elasticsearch查询语句如何提升权重?

大家好&#xff0c;我是锋哥。今天分享关于【说说Elasticsearch查询语句如何提升权重&#xff1f;】面试题。希望对大家有帮助&#xff1b; 说说Elasticsearch查询语句如何提升权重&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 Elasticsearch 中&…...

2-2-18-9 QNX系统架构之文件系统(一)

阅读前言 本文以QNX系统官方的文档英文原版资料为参考&#xff0c;翻译和逐句校对后&#xff0c;对QNX操作系统的相关概念进行了深度整理&#xff0c;旨在帮助想要了解QNX的读者及开发者可以快速阅读&#xff0c;而不必查看晦涩难懂的英文原文&#xff0c;这些文章将会作为一个…...

Unity类银河战士恶魔城学习总结(P156 Audio Settings音频设置)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了音频的大小设置与保存加载 音频管理器 UI_VolumeSlider.cs 定义了 UI_VolumeSlider 类&#xff0c;用于处理与音频设置相关的…...

springboot vue 会员收银系统 (12)购物车关联服务人员 订单计算提成 开源

前言 完整版演示 http://120.26.95.195/ 开发版演示 http://120.26.95.195:8889/ 在之前的开发进程中&#xff0c;我们完成订单的挂单和取单功能&#xff0c;今天我们完成购物车关联服务人员&#xff0c;用户计算门店服务人员的提成。 1.商品关联服务人员 服务人员可以选择 一…...

P3916 图的遍历(Tarjan缩点和反向建边)

P3916 图的遍历 - 洛谷 | 计算机科学教育新生态 写法一&#xff1a;Tarjan 思路&#xff1a;先运用Tarjan算法得到每个连通块中最大的编号&#xff0c;然后对每个连通块进行缩点重新建图&#xff0c;进行dfs&#xff0c;得到缩点后的连通块能够达到的最大编号。 Code: conste…...

Android13 允许桌面自动旋转

一&#xff09;需求-场景 Android13 实现允许桌面自动旋转 Android13 版本开始后&#xff0c;支持屏幕自动旋转&#xff0c;优化体验和兼容性&#xff0c;适配不同屏幕 主界面可自动旋转 二&#xff09;参考资料 android framework13-launcher3【06手机旋转问题】 Launcher默…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...