Vue进阶之Vue无代码可视化项目(五)

Vue无代码可视化项目

  • 编排引擎
    • smooth-dnd
      • LeftPanel.vue
      • LayoutView.vue
      • stores/debug.ts
      • stores/editor.ts
      • AppNavigator.vue
    • 添加-左侧栏添加到中间部分
      • LayoutView.vue
      • store/editor.ts
      • LeftPanel.vue
    • 移动-中间部分区域的位置更改
      • 新建文件夹utils、文件array.ts
        • array.ts
        • LayoutView.vue

编排引擎

smooth-dnd

LeftPanel.vue

 <SmoothDndContainer class="block-group" behaviour="copy"tag="div"  group-name="blocks" @drag-start="(e,v)=>console.log(e,v)" @drag-leave="(e,v)=>console.log(e,v)"@drop="(e)=>console.log('drop',e)":get-child-payload="(index:number)=>index"><SmoothDndDraggable v-for="i in 10" :key="i"><div class="block-item">{{i}}</div></SmoothDndDraggable></SmoothDndContainer>
.block-item{width: 40px;height: 40px;background-color: #fff;border: 1px solid #e8e8e8;margin-bottom: 8px;display: flex;justify-content: center;align-items: center;font-size: 14px;transition:background-color 0.3s;cursor: move;user-select: none;
}.block-group{padding: 8px;display: flex;flex-wrap: wrap;gap: 8px;
}
</style>

全部代码:

<script setup lang="ts">
import {Lightning, Share } from '@icon-park/vue-next'
import { ref } from 'vue';
import {SmoothDndContainer} from '@/components/SmoothDnd/SmoothDndContainer'
import {SmoothDndDraggable} from '@/components/SmoothDnd/SmoothDndDraggable'type Mode = 'outline'|'blocks'|null
const mode = ref<Mode>(null)const toggleMode = (newMode:Mode) => {if(newMode === mode.value){mode.value = null}else{mode.value = newMode}
}
</script><template><div class="left-panel-wrapper"><div class="left-panel-left"><div class="btn" :class="{active:mode==='outline'}" @click="()=>toggleMode('outline')"><Lightning /></div><div class="btn" :class="{active:mode==='blocks'}" @click="()=>toggleMode('blocks')"><Share /></div></div><!-- 接入动画 --><transition name="app-left-panel-drawer"><div class="left-panel-content" v-show="mode">{{mode}}<!-- 面板中使用SmoothDnd --><SmoothDndContainer class="block-group" behaviour="copy"tag="div"  group-name="blocks" @drag-start="(e,v)=>console.log(e,v)" @drag-leave="(e,v)=>console.log(e,v)"@drop="(e)=>console.log('drop',e)":get-child-payload="(index:number)=>index"><SmoothDndDraggable v-for="i in 10" :key="i"><div class="block-item">{{i}}</div></SmoothDndDraggable></SmoothDndContainer></div></transition></div>
</template><style scoped>
.left-panel-wrapper {display: flex;height: 100%;background-color: #f5f5f5;border: 1px solid #e8e8e8;
}
.left-panel-left{display: flex;padding:0 10px;flex-direction: column;align-items: center;width: 50px;height: 100%;background-color: #e8e8e8;
}
.btn{width: 32px;height: 32px;display: flex;justify-content: center;align-items: center;cursor: pointer;border-radius: 6px;margin-top:20px;/* &:hover{background-color: #f5f5f5;} */
}
.btn:hover{background-color: #f5f5f5;
}
/* 被激活时候的特定样式 */
.btn.active{background-color: rgb(0,196,83);color: #fff;
}
.left-panel-content{flex: 1;width: 280px;height: 100%;background-color: #f5f5f5;overflow: hidden;
}/* 下面我们会解释这些 class 是做什么的 */
.app-left-panel-drawer-enter-active,
.app-left-panel-drawer-leave-active {transition: width 0.1s cubic-bezier(0.3, 0.1, 0.3, 1);
}.app-left-panel-drawer-enter-from,
.app-left-panel-drawer-leave-to {width: 0;
}.app-left-panel-drawer-content {width: calc(var(--panel-width) - 60px);height: 100%;padding: 16px;
}.block-item{width: 40px;height: 40px;background-color: #fff;border: 1px solid #e8e8e8;margin-bottom: 8px;display: flex;justify-content: center;align-items: center;font-size: 14px;transition:background-color 0.3s;cursor: move;user-select: none;
}.block-group{padding: 8px;display: flex;flex-wrap: wrap;gap: 8px;
}
</style>

LayoutView.vue

  <SmoothDndContainer class="block-group" orientation="vertical"tag="div"  group-name="blocks" @drop="(payload)=>editorStore.addBlock(payload)"  ><SmoothDndDraggable v-for="block in blocks" :key="block"

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于rouyi框架的多租户改造

基于rouyi框架的多租户改造&#xff0c;重点是实现权限管理和数据隔离。权限管理相当于从原来的“顶级管理员admin-普通用户user”转变为“顶级管理员admin-租户管理员tanantAdmin-普通用户user”。数据隔离主要通过分库、分表、表内设置tenantId字段进行过滤三种方式。 本文主…

[word] word 如何在文档中进行分栏排版? #媒体#其他#媒体

word 如何在文档中进行分栏排版&#xff1f; 目标效果 将唐代诗人李白的组诗作品《清平调词》进行分栏排版&#xff0c;共分三栏&#xff0c;每一首诗作为一栏&#xff0c;参考效果如下图。

计算机图形学入门16:阴影映射

1.前言 前面几篇关于光栅化的文章中介绍了如何计算物体表面的光照&#xff0c;但是着色并不会进行阴影的计算&#xff0c;阴影需要单独进行处理&#xff0c;目前最常用的阴影计算技术之一就是Shadow Mapping技术&#xff0c;也就是俗称的阴影映射技术。 2.阴影映射 Shadow Map…

CSS中实现元素水平垂直居中的方式有哪些

在CSS中实现元素水平垂直居中的方法有很多&#xff0c;以下是一些常见的方法&#xff1a; 1. 使用Flexbox Flexbox是一个现代的布局模型&#xff0c;可以轻松实现元素的水平垂直居中。 .container {display: flex;justify-content: center; /* 水平居中 */align-items: cent…

C++在VS2022开发Windows窗口程序2:API式的Windows窗口程序设计模式

函数API式的Windows GUI程序设计模式是一种基于Windows API函数的方式来设计和开发Windows图形用户界面&#xff08;GUI&#xff09;应用程序的模式。在这种模式下&#xff0c;开发者通过调用Windows API函数来创建窗口、处理消息、绘制图形等&#xff0c;而不依赖于特定的GUI库…

mass storage:RAID Structure , Error Detection and Correction

RAID Structure RAID – redundant array of inexpensive disks multiple disk drives provides reliability via redundancyIncreases the mean time to failureMean time to repair – exposure time when another failure could cause data lossMean time to data loss bas…

【TB作品】stm32单片机,红外遥控器,温控风扇,模拟空调,PWM风扇

空调机 硬件&#xff1a;stm32、oled显示器、ds18b20温度传感器、风扇驱动和风扇、红外接收器、遥控器 软件功能&#xff1a; &#xff08;1&#xff09;显示室内温度 &#xff08;2&#xff09;显示当前模式&#xff1a;常态、除湿、通风 &#xff08;3&#xff09;显示当前风…

Ubuntu Apache2 搭建Gerrit 环境

一、前言 时隔多年&#xff0c;好久没有更新CSDN 博客了&#xff0c;主要原因有如下两点&#xff1a; 1、平时工作繁忙&#xff0c;无暇更新。 2、工作内容涉及信息安全&#xff0c;一些工作经验积累不便更新到互联网上。 最近一直在折腾搭建Gerrit 环境&#xff0c;最开始…

win11安装VMware虚拟机,启动系统后蓝屏,安装虚拟机卡在虚拟网卡界面的解决办法

机缘和遇到的问题 由于最近618换了台新笔记本电脑&#xff0c;然后系统自带的操作系统是windows 11 家庭版本&#xff0c;由于工作需要用到window10的环境&#xff0c;不得不安装一个虚拟机来解决问题&#xff0c;然后就把这次安装VMware虚拟机遇到的坑给大家分享一下&#xf…

研二自学嵌入式开发,就业导向,学习路线该如何规划?

研二才来问这个问题&#xff0c;有点晚&#xff0c;离你开始找工作还有大概8&#xff5e;9个月&#xff0c;你应该用应试思维来应对找工作这个事&#xff0c;尤其当前这个经济形势下。 刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「嵌入式的资料从专业入…

基于Openmv的追小球的云台

介绍 在这篇文章&#xff0c;我会先介绍需要用到且需要注意的函数&#xff0c;之后再给出整体代码 在追小球的云台中&#xff0c;比较重要的部分就是云台&#xff08;实质上就是舵机&#xff09;的控制以及对识别的色块位置进行处理得到相应信息后控制云台进行运动 1、舵机模…

asp.net core反向代理

新建项目 新建空白的asp.net core web项目 安装Yarp.ReverseProxy包版本为2.2.0-preview.1.24266.1 编写代码 namespace YarpStu01;public class Program {public static void Main(string[] args){var builder WebApplication.CreateBuilder(args);builder.Services.AddRev…

JavaWeb——MySQL:DQL

3. DQL:查询 查询是使用最多、最频繁的操作&#xff0c;因为前面的修改以及删除&#xff0c;一般会交给数据库专业的人员&#xff0c;对于非数据库专业人员来说&#xff0c;老板一般会放心的让你对数据库只进行查询操作&#xff1b; 3.2 条件查询&#xff08;where&#xff09…

VBA 实现EXCEl的sheet转换成PDF

首先&#xff0c;打开Excel&#xff0c;然后按下 Alt F11 打开VBA编辑器。在VBA编辑器中&#xff0c;点击 插入 -> 模块&#xff0c;创建一个新的模块。在新模块中&#xff0c;复制并粘贴以下VBA代码&#xff1a; Sub ExportEachSheetToPDF()Dim ws As WorksheetDim pdfFo…

浏览器自带的IndexDB的简单使用示例--小型学生管理系统

浏览器自带的IndexDB的简单使用示例--小型学生管理系统 文章说明代码效果展示 文章说明 本文主要为了简单学习IndexDB数据库的使用&#xff0c;写了一个简单的增删改查功能 代码 App.vue&#xff08;界面的源码&#xff09; <template><div style"padding: 30px&…

基于深度学习的面片修复

基于深度学习的面片修复 面片修复&#xff08;Mesh Repair&#xff09;是计算机图形学和计算机视觉中的重要任务&#xff0c;旨在修复三维网格&#xff08;mesh&#xff09;中的缺陷&#xff0c;如孔洞、裂缝和噪声。基于深度学习的方法在面片修复中展现了强大的能力&#xff…

Flask初识

Flask初识 一、概念说明 1. flask介绍 Flask 是一个轻量级的 Web 应用框架&#xff0c;基于 Werkzeug WSGI 工具包和 Jinja2 模板引擎。 核心特点 微型框架&#xff1a;Flask 被称为“微”框架&#xff0c;因为它在设计上保持了核心的简洁和轻量。易于扩展&#xff1a;Flask…

2024年通信技术与计算机科学国际学术会议(ICCTCS 2024)

2024年通信技术与计算机科学国际学术会议&#xff08;ICCTCS 2024&#xff09; 2024 International Academic Conference on Communication Technology and Computer Science&#xff08;ICCTCS 2024&#xff09; 会议简介&#xff1a; 2024年通信技术与计算机科学国际学术会议…

PostgreSQL物理备份-pg_rman

1.简介 pg_rman 是类似于 oracle 的 rman 备份工具&#xff0c;它实现了全量、增量、归档等类型的备份&#xff0c; 可以很灵活的管理 PostgreSQL 数据库的备份。pg_rman 是一款开源的 PostgreSQL 的 备份恢复插件&#xff0c;支持在线备份和基于 PITR 的恢复方式。 2.pg_rma…

Leetcode.1735 生成乘积数组的方案数

题目链接 Leetcode.1735 生成乘积数组的方案数 rating : 2500 题目描述 给你一个二维整数数组 q u e r i e s queries queries &#xff0c;其中 q u e r i e s [ i ] [ n i , k i ] queries[i] [n_i, k_i] queries[i][ni​,ki​] 。第 i i i 个查询 q u e r i e s [ i …