Vue3实现拖拽定制化首页

大家好,我是王大傻.最近呢，写了一个定制化拖拽首页的功能，借此来讲一下心得.

前期准备

• Vue3
• Ts
• VueDragable （4版本以上）
• 期望 拖拽组件 组件可以按需加载导入

开始

首先呢，我们先看下VueDragable的文档效果

文档的效果是这种基于列表的一个拖拽排序，那么回归到我们期望我们是想通过动态引入组件来进行拖拽排序，那么在完成拖拽定制化之前，首先要讲的是动态组件，在使用Vue2时候相信我们不陌生我们可以通过Component is来动态引入，如：

<template>
  <div class="component-box">
     <component :is="xxx""/>          
  </div>
</template>
<script> import xxx from 'xxx.vue'
export default{
    data(){
        return{

        }
    },
    components:{
        xxx
    }
} </script> 

其中is的值就是我们在components中注册的组件，这样就能完成动态组件的注入，那么在Vue3中呢？尤其是在setu