持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第23天,点击查看活动详情
写在前面
上一篇 当数字孪生遇上低代码(一) 介绍了数字孪生与低代码这对“CP”的“千丝万缕”,也做了一小部分的相关技术分析,那么这一篇继续对相关技术进行探索
vuedraggable
在上一篇我们分析了如何利用 vue 原生的 draggable 实现拖拽放置组件的功能,而如果需要实现更加复杂的拖拽行为,例如拖拽变换顺序等,那么使用 vuedraggable 或许是更好的选择,那么接下来我们就一起来探索探索 vuedraggable
1、安装
npm i -S vuedraggable
2、引入组件
import draggable from 'vuedraggable'
3、使用组件
当我们将组件引入后,就可以在代码中直接使用组件 <vuedraggable>
了,接下来我们来看看几个应用场景
排序
这个功能应该是 vuedraggable 被用得最多的一个应用场景了,通过它的封装,我们直接绑定一个数组,就可以很轻松实现拖动排序的效果,接下来看看代码演示
<template>
<div class="VDraggable-container">
<div class="box">
<draggable
v-model="list"
v-bind="draggableProps"
>
<div class="inner-box" v-for="item in list" :key="item">{{item}}</div>
</draggable>
</div>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable
},
data() {
return {
list: [
'page1',
'page2',
'page3',
'page4',
'page5',
],
draggableProps: {
animation: 300,
}
}
},
}
</script>
通过演示动画我们可以看到,当拖动任何一个子组件时,其他组件都能自动排序,这是由于我们通过 v-model 给 <draggable>
绑定了数组 list ,当拖动子组件时,<draggable>
将会自动操作数组,以达到相应的效果。
当然,除了绑定了 v-model 实现排序,我们会可以给 <draggable>
添加动画执行的时间,animation
,用于控制排序动画,使得过程更加的自然
数组间移动
除了排序,其实vuedraggable
还有个更加强大的功能,数组间移动,这个功能主要实现的效果是,能够让我们在两组组件间相互拖拽,也就是说原来属于组A的子组件,能够被拖动到组B中,组B中的子组件也能够被拖动到组A中,接下来看代码演示
<template>
<div class="VDraggable-container">
<div class="drag-box">
<draggable
v-model="list1"
v-bind="draggableProps"
>
<div class="inner-box" v-for="item in list1" :key="item">{{item}}</div>
</draggable>
</div>
<div class="drag-box">
<draggable
v-model="list2"
v-bind="draggableProps"
>
<div class="inner-box" v-for="item in list2" :key="item">{{item}}</div>
</draggable>
</div>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable
},
data() {
return {
list1: [
'page1',
'page2',
'page3',
],
list2: [
'page3',
'page4',
'page5',
],
draggableProps: {
group: 'drag',
animation: 300,
}
}
},
}
</script>
这里需要注意的是,当我们需要在两个组间拖拽子组件时,我们需要将两个 draggable
绑定同一个 group 名称,这样我们就能够愉快地在俩组间拖动组件了
功能使用
当我们探索完 draggable 相关技术后,就可以将其引入到我们真正的低代码中来使用了,接下来看看成品中拖拽模块的 GIF 图展示
在第一张图我们可以看到,当我们从左边将组件拖拽到模板框中时,组件即可直接生成,完成了组件拖拽添加的功能,从第二张图可以看到当我们想要调整页面的顺序的时候,点击了编辑页面按钮,进入到编辑模块,通过拖动左边的页面栏就可以继续顺序调整,也可以通过拖动到右边的回收框,直接删除该页面,基本做到“所见即所得的”丝滑操作感受!!
总结
其实拖拽编辑功能的实现并不需要什么特别刁钻的的技术支撑,使用 Vue 原生的 draggable 属性或者基于vue 封装的库 vuedraggable 都能轻松完成,相比于其他的实现形式,拖拽编辑带来的操作体验很明显更加符合我们的操作意愿,所见即所得,能够让使用者感受到更高的把控感,随着相关技术的不断演进,越来越多的能人志士加入相关技术的研究,或许在不久的将来,拖拽编辑将会渗透到各个相关的应用平台,成为各个应用平台的标配操作。
拖拽编辑相关技术就探索到这里,接下来的将对低代码相关的其他技术进行探索,欢迎持续关注后续文章!!
往期好文推荐
面试官:说说从输入 URL 到页面显示到底经历了什么,体现一下你的知识广度
面试官:HTTPS 采用的是对称加密还是非对称加密?具体说说其加密过程
面试官:你就只会 npm run build 吗?(Webpack 配置 Vue+Ts)
面试官:连VuePress都没搭过还说开发过组件库?(VuePress 搭建)
面试官: 连 Vue 视图更新都不会写?(Vue视图更新原理【一】)
面试官: 能不能手写 Vue 响应式?(Vue2 响应式原理【完整版】)
面试官:能不能手写 Vue3 响应式(Vue3 原理解析之响应系统的实现)
面试官:说一下这个Loading动画实现思路 (CSS3 实现 Loading 动画)
面试官:你确定你说的防抖不是节流吗?( 面试题梳理系列 (二))
面试官:除了 HTTP,你还用过什么通信协议?(Websocket 在数字孪生中的应用)
面试官:你真的理解 Event Loop 吗?( JS 事件循环 )
面试官:v-for 中 key 为什么不能用 index,从原理层面聊聊?
面试官:vue-router 的 hash 与 history 哪个模式会刷新页面?
面试官:说说你平时用过的自适应方案(数字孪生可视化自适应方案)
写在最后
博主接下来将持续更新好文,欢迎关注博主哟!!
如果文章对您有帮助麻烦亲点赞、收藏 + 关注和博主一起成长哟!!❤️❤️❤️