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

Vue无代码可视化项目

  • 右侧栏配置——配置面板
    • components/RightPanel.vue
    • views/LayoutView.vue
    • 装import-sort插件
      • package.json
      • .eslintrc.cjs
      • pnpm i安装
      • 修复import问题
    • 进一步的:components/RightPanel.vue
      • 初始化
      • 其次
    • editor.ts
    • 进一步的:views/LayoutView.vue

右侧栏配置——配置面板

右侧栏配置主要是表单相关的内容,表单处理是开发中用的特别多的场景;今天从架构师的视角来看下这个表单怎么设计,动态表单、复杂表单、表单联动。

  • src
    • components
    • RightPanel.vue

components/RightPanel.vue

先将左侧栏复制一份粘到右侧栏上

<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+1"><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

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

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

相关文章

【Linux服务器Java环境搭建】011在linux中安装Nginx,以及停止或启动Nginx服务

系列文章目录 【Linux服务器Java环境搭建】 前言 又到了周五晚上了&#xff0c;最近工作上有些忙&#xff0c;忙于一个需求频繁变更的项目&#xff0c;都快吐血了&#xff0c;懂得都懂&#xff0c;哈哈&#xff0c;正好有时间了&#xff0c;继续写系列【Linux服务器Java环境搭…

linux远程主机和windows互传

一.winscp 最简单&#xff0c;但有时候会出现连不上 二 .MobaXterm 可以选择多种连接方式 二. 配置samba服务器 1. 新增samba用户 sudo pdbedit -L -v 查看当前samba用户 sudo smbpasswd -a guoziyi 添加samba用户 sudo smbpasswd -x guoziyi 删除samba用户 2. 编辑/etc…

SpringBoot如何限制请求访问次数

在Spring Boot应用中限制请求访问次数可以通过几种不同的方法实现&#xff0c;如使用Rate Limiting中间件或自定义拦截器。以下是一些常见的实现方法&#xff1a; 方法1&#xff1a;使用Spring Boot内置的Rate Limiting工具 1.1 使用Bucket4j Bucket4j是一个Java库&#xff…

matlab实现绘制矢量图

在MATLAB中绘制矢量图&#xff08;Vector Field&#xff09;主要涉及到使用箭头来表示向量的大小和方向。这可以通过quiver函数&#xff08;注意&#xff1a;MATLAB的官方函数是quiver&#xff0c;但请注意它可能是quiver3的误写&#xff0c;因为quiver3用于三维矢量场&#xf…

ArcGIS Pro SDK (九)几何 6 包络

ArcGIS Pro SDK &#xff08;九&#xff09;几何 6 包络 文章目录 ArcGIS Pro SDK &#xff08;九&#xff09;几何 6 包络1 构造包络2 构造包络 - 从 JSON 字符串3 合并两个包络4 与两个包络相交5 展开包络6 更新包络的坐标 环境&#xff1a;Visual Studio 2022 .NET6 ArcGI…

加油卡APP系统开发:在线优惠加油,拓展市场

目前&#xff0c;我国汽车行业发展迅速&#xff0c;用车群体逐年扩大&#xff0c;因此&#xff0c;汽车加油市场规模呈现出了快速增长趋势。不过近年来&#xff0c;油价不断上涨&#xff0c;增加了居民的生活成本&#xff0c;为了节省汽车加油的支出&#xff0c;很多人都开始选…

使用idea创建Javaweb项目(步骤)

第一步创建Javaweb项目 File>New>Project 第二步 勾选Web Application >Next 然后就是进行起名&#xff0c;完成。 完成创建项目&#xff0c;检查是否文件齐全 配置tomcat 配置好&#xff0c;就能启动tomcat&#xff0c;显示首页 导入jar包。导入进项目&#xf…

【力扣】最小栈

&#x1f525;博客主页&#xff1a; 我要成为C领域大神&#x1f3a5;系列专栏&#xff1a;【C核心编程】 【计算机网络】 【Linux编程】 【操作系统】 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 设计一个支持 push…

数仓工具—Hive语法之替换函数和示例

Hive 替换函数和示例 默认情况下,并没有可用的 Hive 替换函数。如果在处理字符串时需要替换特定值,例如垃圾值,字符串操作函数替换是非常需要的。在本文中,我们将检查 Hive 替换函数 的替代方法,以便在需要时使用。 如前所述,Apache Hive 不提供替换函数的支持。但是,…

信息系统是一个社会技术系统

一.管理信息系统定义 (1) 技术视角 信息系统是&#xff1a; ——由若干相互连接的部件组成的&#xff1b; ——对组织中的信息进行收集、处理、储存和传递的系统&#xff1b; ——用以支持组织制定决策和管理控制&#xff1b; ——还可以协助管理者与员工分析问题、可视…

PLC中的高低字节如何理解?

双字&#xff08;Double Word&#xff0c;通常是32位整数&#xff09;的高低字节定义可能会因具体的PLC型号和通信协议而有所不同。通常&#xff0c;双字可以被划分为两个16位字&#xff0c;每个16位字又分为高字节和低字节。 以下是一般定义&#xff1a; 双字&#xff08;32…

【异常解决】Unable to start embedded Tomcat Nacos 启动报错

Unable to start embedded Tomcat Nacos 启动报错解决方案 一、背景描述二、原因分析三、解决方案 一、背景描述 Windows 本地启动 Nacos&#xff08;2.2.0&#xff09; 服务&#xff0c;控制台报错 Unable to start embedded Tomcat。 报错信息&#xff1a;Unable to start …

《JavaScript语言精粹》学习笔记——数组

JavaScript中并没有像数组一样的数据结构。而是提供了一种拥有一些类数组特性的对象。 数组字面量 var numbers[one,two,three,four,izero,seven,eight]//对象字面量 var numbers object{1:"one",2:"two" };numbers继承自Array.prototype&#xff0c;而n…

HarmonyOS Next原生应用开发-从TS到ArkTS的适配规则(六)

一、仅支持一个静态块 规则&#xff1a;arkts-no-multiple-static-blocks 级别&#xff1a;错误 ArkTS不允许类中有多个静态块&#xff0c;如果存在多个静态块语句&#xff0c;请合并到一个静态块中。 TypeScript class C {static s: stringstatic {C.s aa}static {C.s C.s …

nginx负载均衡实例

实现效果 浏览器输入地址http://nginx服务器ip(:80)/edu/a.html&#xff0c;实现负债均衡效果&#xff0c;平均分配到 服务器ip:8080和 服务器ip:8081进程中。 准备工作 准备两个tomcat&#xff0c;一个监听在8080端口&#xff0c;一个监听在8081端口。也可以准备多个tomcat。…

数据结构小测试:排序算法

目录 1、请简述数据结构八大排序算法的思路。 2、常用排序算法手写 冒泡排序&#xff1a; 选择排序&#xff1a; 快速排序&#xff1a; 归并排序&#xff1a; 堆排序&#xff1a; 3、额外再加一个二分查找吧 1、请简述数据结构八大排序算法的思路。 冒泡排序&#xff…

c# DI构造函数注入

构造函数注入&#xff08;Constructor Injection&#xff09;是依赖注入&#xff08;DI&#xff09;的一种形式&#xff0c;是指通过类的构造函数将依赖项&#xff08;通常是其他类或接口的实例&#xff09;传递给类的实例。 这种方式可以让类在实例化时就具备所需的依赖项&am…

Linux——多路复用之select

目录 前言 一、select的认识 二、select的接口 三、select的使用 四、select的优缺点 前言 在前面&#xff0c;我们学习了五种IO模型&#xff0c;对IO有了基本的认识&#xff0c;知道了select效率很高&#xff0c;可以等待多个文件描述符&#xff0c;那他是如何等待的呢&a…

Dubbo 的泛化调用

在分布式系统中&#xff0c;有时我们需要调用一些未知的服务接口&#xff0c;这些接口可能在编译时并不存在&#xff0c;或者由于版本问题而发生变化。为了应对这种情况&#xff0c;Apache Dubbo 提供了泛化调用&#xff08;Generic Invocation&#xff09;功能&#xff0c;使得…

易保全参与起草的两项区块链全国团体标准正式发布

在数字化转型浪潮席卷全球的今天&#xff0c;区块链技术以其去中心化、透明性、不可篡改等独特优势&#xff0c;正逐步成为重塑各行各业信任机制与业务流程的关键力量。 近日&#xff0c;中国通信工业协会正式发布了《区块链服务 基于区块链的去中心化标识符技术要求》与《区块…