vue 实战 区域内小组件元素拖拽 示例
<template><div><el-button type="primary" @click="showDialog = true">快捷布局</el-button><el-dialog title="快捷布局配置" :visible.sync="showDialog"><el-row :gutter="20"><el-col><el-card class="box-card" header="开始面板引流区"><draggable tag="div" class="buttons-container" v-model="drainComponents" ><el-button v-for="component in drainComponents" :key="component.comId" class="button" :style="{ backgroundColor: component.color }"><div class="button-content"><div>{{ component.name }}</div><div class="component-id">{{ component.comId }}</div></div></el-button></draggable></el-card></el-col><el-col><el-card class="box-card" header="开始面板数据区"><draggable tag="div" class="buttons-container" v-model="dataComponents" ><el-button v-for="component in dataComponents" :key="component.comId" class="button" :style="{ backgroundColor: component.color }"><div class="button-content"><div>{{ component.name }}</div><div class="component-id">{{ component.comId }}</div></div></el-button></draggable></el-card></el-col><el-col><el-card class="box-card" header="生活中默认区域"><draggable tag="div" class="buttons-container" v-model="liveComponents" ><el-button v-for="component in liveComponents" :key="component.comId" class="button" :style="{ backgroundColor: component.color }"><div class="button-content"><div>{{ component.name }}</div><div class="component-id">{{ component.comId }}</div></div></el-button></draggable></el-card></el-col></el-row><span slot="footer" class="dialog-footer"><el-button @click="showDialog = false">取消</el-button><el-button type="primary" @click="saveLayout">确定</el-button></span></el-dialog></div></template><script>import draggable from 'vuedraggable';// 生成柔和颜色的函数const generateSoftColor = () => {const hue = Math.floor(Math.random() * 360);const saturation = 60 + Math.random() * 20; // 饱和度在60%-80%之间const lightness = 70 + Math.random() * 20; // 亮度在70%-90%之间return `hsl(${hue}, ${saturation}%, ${lightness}%)`;};// 通用的转换函数const convertDataList = (dataList) => {return dataList.map(item => ({comId: item.comId,name: item.name,weight: item.weight,color: generateSoftColor()}));};const sortedDataList = (dataList) => {return dataList.slice().sort((a, b) => b.weight - a.weight);}// 数据列表const dataList1 = [{ comId: '1000009', name: '对方如果', property: 0, type: 0, weight: 4 },{ comId: '1000004', name: '辅导费人', property: 0, type: 0, weight: 1 },{ comId: '1000010', name: '电电风扇', property: 0, type: 0, weight: 2 },{ comId: '1000006', name: '小组件', property: 0, type: 0, weight: 3 },{ comId: '1000007', name: '飒飒飒飒', property: 0, type: 0, weight: 5 },{ comId: '1000011', name: '你说的分手', property: 0, type: 0, weight: 6 },{ comId: '1000012', name: '大润发儿童', property: 0, type: 0, weight: 9 },{ comId: '1000013', name: '大方的发过的', property: 0, type: 0, weight: 8 }];const dataList2 = [{ comId: '1000001', name: '哈哈哈', property: 0, type: 1, weight: 2 },{ comId: '1000005', name: '测试组件名称', property: 0, type: 1, weight: 2 },{ comId: '1000002', name: '啦啦啦', property: 1, type: 0, weight: 0 }];const dataList3 = [{ comId: '1000017', name: 'GV地方大幅度', property: 0, type: 0, weight: 3 },{ comId: '1000016', name: '奋斗奋斗发的', property: 0, type: 0, weight: 2 },{ comId: '1000008', name: '大幅度发', property: 0, type: 0, weight: 1 },{ comId: '1000003', name: '似懂非懂发', property: 1, type: 1, weight: 0 },{ comId: '1000014', name: '个人发一个发帖人', property: 0, type: 0, weight: 0 },{ comId: '1000015', name: '会更好多说点', property: 0, type: 0, weight: 0 }];export default {components: { draggable },data() {return {showDialog: false,drainComponents: convertDataList(sortedDataList(dataList1)),dataComponents: convertDataList(sortedDataList(dataList2)),liveComponents: convertDataList(sortedDataList(dataList3))};},methods: {generateSoftColor,convertDataList,removeColorSet(data) {for(let i=0;i<data.length;i++){delete data[i].color;}return data},updateWeights(data) {for(let i=0;i<data.length;i++) {data[i].weight = data.length - i;}return data},saveLayout() {this.showDialog = false;this.drainComponents = this.updateWeights(this.drainComponents)this.dataComponents = this.updateWeights(this.dataComponents)this.liveComponents = this.updateWeights(this.liveComponents)this.printComponentVal();// Remove 'color' field from each dictionary// this.drainComponents = this.removeColorSet(this.drainComponents)// console.log("this.drainComponents", this.drainComponents)// this.dataComponents = this.removeColorSet(this.dataComponents)// console.log("this.dataComponents", this.dataComponents)// this.liveComponents = this.removeColorSet(this.liveComponents)// console.log("this.liveComponents", this.liveComponents)},printComponentVal() {console.log("this.drainComponents", this.drainComponents)console.log("this.dataComponents", this.dataComponents)console.log("this.liveComponents", this.liveComponents)},}};</script><style scoped>.box-card {margin-bottom: 20px;}.buttons-container {display: flex;flex-wrap: wrap;}.button {margin: 5px;flex: 0 1 auto;display: flex;flex-direction: column;align-items: center;justify-content: center;}.button-content {text-align: center;}.component-id {font-size: 0.8em;color: #666;}.buttons-container .button:first-child {margin-left: 10px;}</style>
相关文章:

vue 实战 区域内小组件元素拖拽 示例
<template><div><el-button type"primary" click"showDialog true">快捷布局</el-button><el-dialog title"快捷布局配置" :visible.sync"showDialog"><el-row :gutter"20"><el-co…...
C++多线程编程中的锁详解
在现代软件开发中,多线程编程是提升应用程序性能和响应能力的重要手段。然而,多线程编程也带来了数据竞争和死锁等复杂问题。为了确保线程间的同步和共享数据的一致性,C标准库提供了多种锁机制。 1. std::mutex std::mutex是最基础的互斥锁…...

van-dialog 组件调用报错
报错截图 报错原因 这个警告表明 vue 在渲染页面时遇到了一个未知的自定义组件 <van-dialog>,并且提示可能是由于未正确注册该组件导致的。在 vue 中,当我们使用自定义组件时,需要先在 vue 实例中注册这些组件,以便 vue 能…...

【Django】在vscode中运行调试Django项目(命令及图形方式)
文章目录 命令方式图形方式默认8000端口设置自定义端口 命令方式 python manage.py runserver图形方式 默认8000端口 设置自定义端口...
麦田物语第十三天
系列文章目录 麦田物语第十三天 文章目录 系列文章目录一、实现根据物品详情显示 ItemTooltip1.ItemTooltips脚本编写二、制作 Player 的动画一、实现根据物品详情显示 ItemTooltip 1.ItemTooltips脚本编写 首先创建Scripts->Inventory->UI->ItemTooltip脚本,然后…...

【Git多人协作开发】不同的分支下的多人协作开发模式
目录 0.前言背景 1.开发者1☞完成准备工作&协作开发 1.1查看分支情况 1.2创建本地分支feature-1 1.3三板斧 1.4push推本地分支feature-1到远程仓库 2.开发者2☞完成准备工作&协作开发 2.1创建本地分支feature-2 2.2三板斧 2.2push推送本地feature-2到远程仓库…...
Lua 复数计算器
Lua复数计算器 主要包括复数的加减乘除操作,以及打印 编写复数类 -- ***** 元类 ***** Complex {real 0, imag 0}-- 构造函数 function Complex:new(real, imag)local o o or {}o.real real or 0o.imag imag or 0setmetatable(o, self)self.__index selfr…...
深入MySQL中的IF和IFNULL函数
在数据库查询中,我们经常需要根据条件来决定数据的显示方式。MySQL提供了多种内置函数来帮助我们实现这种条件逻辑,其中IF和IFNULL是两个非常有用的函数。在这篇博客中,我们将深入探讨这两个函数的用法和它们在实际查询中的应用。 IF函数 I…...

AI多模态实战教程:面壁智能MiniCPM-V多模态大模型问答交互、llama.cpp模型量化和推理
一、项目简介 MiniCPM-V 系列是专为视觉-语⾔理解设计的多模态⼤型语⾔模型(MLLMs),提供⾼质量的⽂本输出,已发布4个版本。 1.1 主要模型及特性 (1)MiniCPM-Llama3-V 2.5: 参数规模: 8B性能…...

Docker 搭建Elasticsearch详细步骤
本章教程使用Docker搭建Elasticsearch环境。 一、拉取镜像 docker pull docker.elastic.co/elasticsearch/elasticsearch:8.8.2二、运行容器 docker run -d --name elasticsearch -p 9200:9200 -p 9300:9300 -e "discovery.type=single-n...
mysql中提供的函数
文章目录 1.聚合函数2.字符串函数3.数值函数4.日期函数5.流程函数 MySQL 是一个功能强大的关系型数据库管理系统,其中包含了丰富的内置函数,用于处理各种数据操作和查询。这些函数可以分为多种类型,包括字符串函数、数值函数、日期和时间函数…...

加速下载,揭秘Internet Download Manager2024下载器的威力!
1. Internet Download Manager(IDM)是一款广受欢迎的下载管理软件,以其强大的下载加速功能和用户友好的界面著称。 IDM马丁正版下载如下: https://wm.makeding.com/iclk/?zoneid34275 idm最新绿色版一键安装包链接:抓紧保存以…...
oracle 宽表设计
Oracle宽表设计主要涉及到数据库表或视图中字段(列)数量较多的情况。在Oracle 23c及以后的版本中,数据库表或视图中允许的最大列数已增加到4096,这为宽表设计提供了更大的灵活性。以下是对Oracle宽表设计的详细分析: …...

winrar安装好后,鼠标右键没有弹出解压的选项
本来安装挺好的,可以正常使用,有天我把winrar相关的文件挪了个位置,就不能正常使用了。 然后我去应用里面找,找到应用标识了,但是找不到对应的文件夹(因为我挪到另外一个文件夹里了)。 于是我找…...

数字图像处理笔记(一)---- 图像数字化与显示
系列文章目录 数字图像处理学习笔记(一)---- 图像数字化与显示 数字图像处理笔记(二)---- 像素加图像统计特征 数字图像处理笔记(三) ---- 傅里叶变换的基本原理 文章目录 系列文章目录前言一、数字图像处理二、图像数…...

Unity UGUI 之 事件接口
本文仅作学习笔记与交流,不作任何商业用途 本文包括但不限于unity官方手册,唐老狮,麦扣教程知识,引用会标记,如有不足还请斧正 本文在发布时间选用unity 2022.3.8稳定版本,请注意分别 1.什么是事件接口&…...

Hadoop、HDFS、MapReduce 大数据解决方案
本心、输入输出、结果 文章目录 Hadoop、HDFS、MapReduce 大数据解决方案前言HadoopHadoop 主要组件的Web UI端口和一些基本信息MapReduceMapReduce的核心思想MapReduce的工作流程MapReduce的优缺点Hadoop、HDFS、MapReduce 大数据解决方案 编辑 | 简简单单 Online zuozuo 地址…...
Dubbo SPI 之负载均衡
1. 背景介绍 在分布式系统中,负载均衡是一项核心技术,旨在将请求合理地分配到多个服务实例上,以提高系统的性能和可靠性。Dubbo 作为一个高性能的 Java RPC 框架,提供了多种负载均衡策略来满足不同的业务需求。本文将深入探讨 Du…...

规范:前后端接口规范
1、前言 随着互联网的高速发展,前端页面的展示、交互体验越来越灵活、炫丽,响应体验也要求越来越高,后端服务的高并发、高可用、高性能、高扩展等特性的要求也愈加苛刻,从而导致前后端研发各自专注于自己擅长的领域深耕细作。 然…...
Python --NumPy库基础方法(2)
NumPy Numpy(Numerical Python) 是科学计算基础库,提供大量科学计算相关功能,比如数据统计,随机数生成等。其提供最核心类型为多维数组类型(ndarray),支持大量的维度数组与矩阵运算,Numpy支持向…...
条件运算符
C中的三目运算符(也称条件运算符,英文:ternary operator)是一种简洁的条件选择语句,语法如下: 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true,则整个表达式的结果为“表达式1”…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...
Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库,获取股票数据,并生成TabPFN这个模型 可以识别、处理的格式,写一个完整的预处理示例,并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务,进行预测并输…...

MMaDA: Multimodal Large Diffusion Language Models
CODE : https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA,它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马(服务器方面的)的原理,连接,以及各种木马及连接工具的分享 文件木马:https://w…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板,就像一个模具,里面可以将不同类型的材料做成一个形状,其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式:templa…...

Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程,代码下载:这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中,**知识蒸馏(Knowledge Distillation)**被广泛应用,作为提升模型…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)
引言 在人工智能飞速发展的今天,大语言模型(Large Language Models, LLMs)已成为技术领域的焦点。从智能写作到代码生成,LLM 的应用场景不断扩展,深刻改变了我们的工作和生活方式。然而,理解这些模型的内部…...