vue组件拖拽自定义界面,vue可视化拖拽流程框架
vue3正式版已经发布半年了，我们要跟上时代的潮流，跟上vue3带来的诸多变化。下面这篇文章主要介绍使用Vue3实现主页拖动和自定义功能的相关信息。有需要的朋友可以参考一下。
目录
前期准备启动方法1、方法2、方案3最终实现结果汇总
前期准备
Vue3TsVueDragable (4 version 4或更高版本)期望可以根据需要加载和导入拖动组件。
开始
首先，我们来看看VueDragable的文档效果。
文档的效果是基于列表的拖放排序，所以回到我们的预期，我们想通过动态引入组件来进行拖放排序，那么在完成拖放定制之前，首先要说的就是动态组件。使用Vue2时，相信大家都不陌生，可以按组件is动态介绍，比如：
模板
div class=组件框
组件：is=xxx/
/div
/模板
脚本
从“xxx.vue”导入xxx
导出默认值{
data(){
返回{
}
},
组件：{
xxx
}
}
/脚本
其中is的值是我们在components中注册的组件，这样就可以完成动态组件的注入。在Vue3呢？特别是当使用设置语法糖时，我们不能通过这样做来识别组件。这是因为我们可以直接将组件引入到设置语法sugar中并使用它们，而无需在组件中注册它们(默认情况下已经为我们完成了)。因此，实际上，在我们真实业务场景的背景中返回给我们的数据是这样的格式：
因此，我们的动态组件也需要调整：
“组件框”v-for=“XXX中的元素”
组件：is= element . name :key= element . name /
/div
此时，我们的is绑定不是一个组件的实例，实际上是一个字符串。因此，将会生成一个错误，页面将无法正常加载我们的组件。那么我们该怎么办呢？Silly在网上做了调查。有三种方式：
方法一
组件的动态加载由Vue3的defineAsyncComponent方法完成，成为实例对象。
从“vue”导入{ defineAsyncComponent，ref }
//需要加载的组件的集合
const components=ref(新映射字符串，any())
components.value.set(
测试1 ，
defineAsyncComponent(()=import(。/test1.vue ))
)
components.value.set(
测试2 ，
defineAsyncComponent(()=import(。/test2.vue ))
)
这样，当我们获取值时，就可以通过get方法传入特定的字符串来获取相应的组件。
方法二
这由shallowRef或markRaw表示。shallowRef是一个浅代理，只表示一个层，markRaw标记这个属性永远不会有响应。
从“vue”导入{ shallowRef，ref }
从导入test1。/test1.vue
从导入test2。/test2.vue
//这里用ref的话说，vue给出了一个警告，Vue收到了一个组件，这个组件被做成一个响应对象。这可能会导致不必要的性能开销，应该通过将组件标记为“markRaw”或使用“shallowRef”而不是“Ref”来避免。
//如果使用markRaw，那么currentComp就再也不是一个响应对象了。所以我们必须使用shallowRef。
设currentComp=shallowRef(test1)
currentComp.value
//开关组件
const changeComp=()={
if(currentComp.value==test1) {
currentComp.value=test2
}否则{
currentComp.value=test1
}
}
这个方法可行，但是不能传入字符串进行动态引入。
方案三
使用双脚本标签的完美解决方案
脚本语言
导入{
测试1，
测试2，
}来自。/组件/DragComponents
导出默认值{
组件：{
测试1，
测试2，
}
}
/脚本
脚本安装语言=ts
const componentList=reactive([
{
名称：“测试1”，
标题：“测试1”，
id:“1”
},
{
名称：“测试2”，
标题：“测试2”，
id:“2”
}
])
/脚本
所以我们可以直接获取后台数据进行处理。
最终实现结果
最终通过不断的爬坑达到了拖的效果。目前已经完成了水平和垂直两个方向的布局，需要扩展的是宽度和高度可以定制。有兴趣可以留言，我们可以一起交流。有兴趣的可以克隆一下试试。
总结
关于使用Vue3拖拽定制主页的这篇文章到此为止。更多相关Vue3拖拽定制主页内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。