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

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++多线程编程中的锁详解

在现代软件开发中&#xff0c;多线程编程是提升应用程序性能和响应能力的重要手段。然而&#xff0c;多线程编程也带来了数据竞争和死锁等复杂问题。为了确保线程间的同步和共享数据的一致性&#xff0c;C标准库提供了多种锁机制。 1. std::mutex std::mutex是最基础的互斥锁…...

van-dialog 组件调用报错

报错截图 报错原因 这个警告表明 vue 在渲染页面时遇到了一个未知的自定义组件 <van-dialog>&#xff0c;并且提示可能是由于未正确注册该组件导致的。在 vue 中&#xff0c;当我们使用自定义组件时&#xff0c;需要先在 vue 实例中注册这些组件&#xff0c;以便 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复数计算器 主要包括复数的加减乘除操作&#xff0c;以及打印 编写复数类 -- ***** 元类 ***** 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函数

在数据库查询中&#xff0c;我们经常需要根据条件来决定数据的显示方式。MySQL提供了多种内置函数来帮助我们实现这种条件逻辑&#xff0c;其中IF和IFNULL是两个非常有用的函数。在这篇博客中&#xff0c;我们将深入探讨这两个函数的用法和它们在实际查询中的应用。 IF函数 I…...

AI多模态实战教程:面壁智能MiniCPM-V多模态大模型问答交互、llama.cpp模型量化和推理

一、项目简介 MiniCPM-V 系列是专为视觉-语⾔理解设计的多模态⼤型语⾔模型&#xff08;MLLMs&#xff09;&#xff0c;提供⾼质量的⽂本输出&#xff0c;已发布4个版本。 1.1 主要模型及特性 &#xff08;1&#xff09;MiniCPM-Llama3-V 2.5&#xff1a; 参数规模: 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 是一个功能强大的关系型数据库管理系统&#xff0c;其中包含了丰富的内置函数&#xff0c;用于处理各种数据操作和查询。这些函数可以分为多种类型&#xff0c;包括字符串函数、数值函数、日期和时间函数…...

加速下载,揭秘Internet Download Manager2024下载器的威力!

1. Internet Download Manager&#xff08;IDM&#xff09;是一款广受欢迎的下载管理软件&#xff0c;以其强大的下载加速功能和用户友好的界面著称。 IDM马丁正版下载如下: https://wm.makeding.com/iclk/?zoneid34275 idm最新绿色版一键安装包链接&#xff1a;抓紧保存以…...

oracle 宽表设计

Oracle宽表设计主要涉及到数据库表或视图中字段&#xff08;列&#xff09;数量较多的情况。在Oracle 23c及以后的版本中&#xff0c;数据库表或视图中允许的最大列数已增加到4096&#xff0c;这为宽表设计提供了更大的灵活性。以下是对Oracle宽表设计的详细分析&#xff1a; …...

winrar安装好后,鼠标右键没有弹出解压的选项

本来安装挺好的&#xff0c;可以正常使用&#xff0c;有天我把winrar相关的文件挪了个位置&#xff0c;就不能正常使用了。 然后我去应用里面找&#xff0c;找到应用标识了&#xff0c;但是找不到对应的文件夹&#xff08;因为我挪到另外一个文件夹里了&#xff09;。 于是我找…...

数字图像处理笔记(一)---- 图像数字化与显示

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

Unity UGUI 之 事件接口

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

Hadoop、HDFS、MapReduce 大数据解决方案

本心、输入输出、结果 文章目录 Hadoop、HDFS、MapReduce 大数据解决方案前言HadoopHadoop 主要组件的Web UI端口和一些基本信息MapReduceMapReduce的核心思想MapReduce的工作流程MapReduce的优缺点Hadoop、HDFS、MapReduce 大数据解决方案 编辑 | 简简单单 Online zuozuo 地址…...

Dubbo SPI 之负载均衡

1. 背景介绍 在分布式系统中&#xff0c;负载均衡是一项核心技术&#xff0c;旨在将请求合理地分配到多个服务实例上&#xff0c;以提高系统的性能和可靠性。Dubbo 作为一个高性能的 Java RPC 框架&#xff0c;提供了多种负载均衡策略来满足不同的业务需求。本文将深入探讨 Du…...

规范:前后端接口规范

1、前言 随着互联网的高速发展&#xff0c;前端页面的展示、交互体验越来越灵活、炫丽&#xff0c;响应体验也要求越来越高&#xff0c;后端服务的高并发、高可用、高性能、高扩展等特性的要求也愈加苛刻&#xff0c;从而导致前后端研发各自专注于自己擅长的领域深耕细作。 然…...

Python --NumPy库基础方法(2)

NumPy Numpy(Numerical Python) 是科学计算基础库&#xff0c;提供大量科学计算相关功能&#xff0c;比如数据统计&#xff0c;随机数生成等。其提供最核心类型为多维数组类型&#xff08;ndarray&#xff09;&#xff0c;支持大量的维度数组与矩阵运算&#xff0c;Numpy支持向…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战:导出框架元素数据到Excel 在结构工程师的日常工作中,经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时,还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么? 一键点击,就能将ETABS中所有框架元素的基…...

书籍“之“字形打印矩阵(8)0609

题目 给定一个矩阵matrix&#xff0c;按照"之"字形的方式打印这个矩阵&#xff0c;例如&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为&#xff1a;1&#xff0c;…...