vue3.x+elementPlus+swiper+vuedraggable实现页面装修
前言
该实现代码依赖框架:vue3.x+elementPlus+swiper+vuedraggable,做好前期工作,可直接在下面的附件处点击下载链接来下载相关文件;文件中包括搜索/图文广告/滚动消息三个模块代码示例,其他组件实现思路相同,可自行定义。
需求
在PC管理端可以自定义装修页面,例如顶部搜索,轮播广告,公告等模块;并在H5或Uniapp 移动端渲染展示
示例截图:
前端核心代码
1.自定义组件声明
在components下新建文件夹,将所有组件相关代码都放在此文件夹下,每个组件是一个文件夹,每个文件夹下包含index.vue、operatin.vue 文件一个是组件展示在中间区域,一个是设置配置文件,再在主文件夹下新建index.js 引入并注册所需的组件,并在main.js 文件中引入,使用。
截图示例:
main.js引入
2.自定义组件JS
定义组件集合文件-designData.js 其中定义的数据展示在左侧区域
引入相关文件
import {componentBaseData} from '@/views/design/components/designData'
并赋值对应参数(leftMenuList)
const leftMenuList = ref(deepClone(componentBaseData))
//deepClone 自定义方法,深复制该数据,防止数据污染以及多个相同组件数据联动
截图示例:
3.装修展示页面
左侧模块展示主要代码:vuedraggable使用可查看相关文档
<draggable :list="leftMenuList" item-key="component" :animation="100" :sort='false' :group="{name: 'componentsdragg',pull:'clone'}" class="draggable-component-wrap">
<template #item="{ element,index }" >
<div class="list-component-item" :class="element.component">
<p class="img-icon" :class="element.component+'-img-icon'"></p>
<p class="title">{{ element.name }}</p>
</div>
</template>
</draggable>
中间区域主要代码:自定义手机容器
asynDsignList:装修的模块数组
handleCompChange:当从左侧拖动模块或者改变模块顺序时方法
handleClickComp:点击对应模块时,高亮当前模块,并显示删除图标,以及右侧打开设置区域
<draggable :list="asynDsignList" item-key="component"
:group="{name: 'componentsdragg',pull:''}"
:disabled="false" class="draggable-component-phone-wrap"
@change="handleCompChange"
>
<template #item="{ element,index }" >
<div class="list-component-phone-item" :class="element.component ,{ 'c-active': activeOpIndex == index }">
<component
@click.native.stop="handleClickComp(element,index)"
:is="element.component" :compObj="element.props"
></component>
<div class="img-operation-wrap" :class="{'hide':activeOpIndex != index}">
<p class="operation-item" @click="deleteComponent(element,index)">
<el-icon title="删除" :size="26" color="#ff1818">
<!-- <CircleCloseFilled /> -->
<CircleClose />
</el-icon>
</p>
</div>
</div>
</template>
</draggable>
右侧设置区域 :
handleOperationChange:设置区域监听change方法
<component :is="`${asynDsignList[activeOpIndex].component}-operation`" :compObj="asynDsignList[activeOpIndex].props" @change="handleOperationChange"></component>
保存
将 asynDsignList 字段调用接口保存至库中,最好转义一下该字段:JSON.stringify(asynDsignList.value)
移动端展示
通过接口请求对应页面装修数据,在移动端也要定义跟pc端相对应的组件,文件命名,组件命名都要保持一致,使用component动态加载对应组件并渲染页面即可。
附件
页面装修下载链接
vue3.x+elementPlus+swiper+vuedraggable实现页面装修相关推荐
- vue3.2+element-plus+ts节假日管理界面
说明 由于element-plus原生的el-calendar 样式不太好看 所以在实际项目重新写了下节假日管理的页面;用到的有vue3.2+element-plus+ts 先看完整效果 调整el-c ...
- vue3+ts+element-plus(包含vuex、router) 随笔
#vue3与vue2区别以及vue3优点 默认进行懒观察(lazy observation)在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者.当数据很大时,这可能会在页面载入时造成明显的 ...
- Electron+Vue3+Vite+Element-Plus,保持软后台全速运行(解决循环过多导致的界面不刷新问题,保证窗口失去焦点后setTimeOut可用)
文章目录 Electron+Vue3+Vite+Element-Plus,保持软后台全速运行(解决循环过多导致的界面不刷新问题,保证窗口失去焦点后setTimeOut可用) 问题描述 问题一 大循环界 ...
- vue2、vue3中使用swiper
两个项目中需要使用轮播图,恰好一个是vue2的,一个是vue3的,使用swiper过程中踩了很多的坑,总结一下. 一.vue3中使用swiper vue3中使用swiper,对应版本为7-8,整个过程 ...
- 基于Vue3.0+ElementPlus后台精简模板
前言 欢迎使用VUE3.0 + ElementPlus 后台管理模板 UI库文档: https://element-plus.gitee.io/#/zh-CN 该项目基于Vuecli 使用Vue3 + ...
- vue3中使用swiper完整版教程
介绍 在 vue3 中使用 swiper, 实现轮播图的效果:如果组件样式等模块引入不当,很有可能导致,页面无效果:或者想要的箭头或者切换效果异常问题.具体使用方式如下所示: 使用方式 使用命令 np ...
- vue3.0 + element-plus + 上传图片到七牛云
时间: 2021.8.30 ,想在项目中,把上传的图片存储到 七牛云 上,但是发现,七牛云他只给了一个限时 30 天的 cdn,就是在30天后,这个就会取消掉,不知道上传后的图片还有没有在 .需要绑定 ...
- 《vue3+ts+element-plus 后台管理系统系列》之微前端版本
系列文章目录 <vue3+ts+element-plus 后台管理系统系列一>之简介 <vue3+ts+element-plus 后台管理系统系列二>之布局 <vue3+ ...
- vue3.0 + elementPlus 后台管理系统模板
gif示例 github地址: github 基于vue3.x + elementPlus 实现的后台管理系统模板 1. 登录逻辑. 2. 基本布局(基于elementPlus) 3. 动态路由逻辑 ...
- 【新项目开发】vue3+ts+elementPlus+ffmpegjs开发纯web端的视频编辑器
新项目开发的流程 当在项目中使用新技术时,我们应该首先进行调研,了解其特点和使用方法.在实现功能时,我们可以采用最简单的方式,而不必过于关注项目的设计和结构.一旦掌握了新技术,我们可以根据其API属性 ...
最新文章
- CODEFORCES 55D
- 《Core Data应用开发实践指南》一1.3 创建Grocery Dude项目
- mysql 启动错误-server PID file could not be found
- Windows7中快捷方式图标打开方式恢复
- 解决YUM下Loaded plugins: fastestmirror Determining fastest mirrors 的问题
- c 语言 可变参数前要加形参,C/C++中可变参数的用法详细解析
- ggplot2 theme相关设置—文本调整
- FTP协议、电子邮件系统、Telnet远程控制
- Linux学习之Ubuntu安装Java
- MFC基于多文档框架(对话框内嵌office控件(word文档))
- html表单实现ajax登陆,node.js+jQuery实现用户登录注册AJAX交互
- 大话计算机张冬pdf扫描分享,第一章 【PMC分享】《大话存储》作者张冬:OpenPower CAPI简析.pdfx.pdf...
- 2018 Multi-University Training Contest 10 hdu 6432 Problem G. Cyclic(oeis题)
- layui select 默认选中
- [Linux学习] 实战系列之网络管理
- 图像处理基础:特征金字塔
- 【每日最爱一句】2013.07.24
- 3d打印模型松松夸夸不符合切片软件设置
- 【python】argparse.add_argument中的action为‘store_true’使用说明
- 电子实验室仪器使用大全
热门文章
- 【每日蓝桥】54、一八年省赛Java组真题“复数幂”
- Android MTK平台在电量低于15%后,打开闪光灯,拍照时闪光灯不亮,提示无法打开闪光灯
- Speech框架API
- win10系统如何打开telnet服务器,Win10专业版如何开启telnet命令|开启telnet服务方法...
- 【EI核心、Scopus|南昌大学主办|】2023年算法、软件工程与网络安全国际学术会议(ASENS 2023)
- 知乎上那些简短而精辟的对话
- 从罗马到杭州 (当走进前端社区)
- 用计算机敲,我一用计算机,敲键盘,左肩膀(后背靠肩膀处)就痛,
- 用python练习1~99以内的日语
- 第六届“蓝帽杯”电子取证模块(初赛)解析+全资源一次性分享