vue拖拽组件生成前端页面,vue如何实现动态组件
本文主要介绍vue如何实现拖拽动态生成组件的需求，帮助大家更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
目录
产品需求中的问题思考如何选择拖拽库如何生成组件生成组件生成组件生成效果数据驱动的动态组件源代码
产品需求
产品需求会后，我满足了一个要求。首先，页面分为两栏，数据组件显示在左侧，支持拖动和排序。单击按钮清除组件。右侧支持拖动组件缩略图到左侧生成新组件。
思路
对于动态生成组件，每次生成一个全新的组件，可以把组件放入函数中返回。在JSX调用一个函数，每次调用一个函数都会返回一个全新的组件。这对于React来说非常简单，但是对于Vue来说，直接返回组件是不可能的。虽然这个回归的写法不适合Vue，但是不可否认这个思路是非常正确的，应该考虑另一种写法。至于动态生成组件，我们必须用数据驱动组件的生成。拖拽组件排序，直接用拖拽库就行了！
面临的问题
拖放库的选择
如何生成组件
数据驱动的动态生成组件
拖拽库的选择
拖放库在这里。我选了一个拖拽库Vue。项目中存在的拖放库。点此链接查看Start 14.9K挺好的。如果你的Vue项目中不使用这个拖拽库，可以参考本文的设计思路。
如何生成组件
我这里用的是Vue.extend()。我不知道如何使用它。请在学习这篇文章vue.extend之前查阅一下官方文档，接下来我们创建一个js文件来编写创建组件的代码。
生成组件
/* generateComponents.js文件名*/
从“Vue”导入Vue；
//如果要动态生成组件，先介绍这个文件。
从“”导入组件1。/components/test com 1 . vue ；
从导入组件2。/components/test com 2 . vue ；
//在组件名称和组件之间建立对应的映射
const comMap={
组件1，
组件2，
};
//接收生成组件所需的组件名称，以及要传递给组件的名称
//道具和事件
const return new com=function({ props，on }) {
常数{
comItem: { name }，
}=道具；
const newComponent=Vue.extend({
渲染(createElement) {
//使用传入的组件名称来决定要呈现哪个组件。
返回createElement(comMap[name]，{
道具，
开着，
});
},
});
返回新的new component()；
};
导出默认ReturnNewCom
组件
这里我们写两个组件来演示这个演示，分别是components1.vue和components2.vue。
/*components1.vue*/
模板
div class=widget-wrapper
header class= header“{ com detail . name } }-{ { com detail . id } }/header
H1查询条件：{{ queryObj }}/h1
Button @click=handleDelete 清除/button
/div
/模板
脚本
导出默认值{
data() {
返回{
comDetail: this.comItem，
_queryObj: this.queryObj，
};
},
道具：{
委员会：{
类型：对象，
默认(){
返回{
id: 0，
名称： ，
};
},
},
queryObj: {
//可以接收父组件传递的太阳选择条件，并且必须是Object
类型：对象，
默认(){
//定义默认的查询条件。
返回{
数字：0，
};
},
},
},
观察：{
委员会(val)
this.comDetail=val
返回val
},
queryObj(val) {
这个。_ queryObj=val
返回val
},
},
已创建(){
console.log(data - this.comItem ，this . com item)；
},
方法：{
handleDelete() {
//删除组件方法
这个。$ El . remove()；
//调用父组件的函数。修改父组件中leftComList数组的数据。
这个. emit(handleDelete ，这个。com详情)；
},
},
};
/脚本
样式范围。小部件包装器{
背景：# ff 7 b 7 b
边框半径：12px
溢出：隐藏；
宽度：200像素
}。标题{
高度：50px
填充：0 15px
}
/风格
其实组件2.vue文件中的代码和组件1.vue文件的代码类似，唯一不同的地方就是背景颜色不一样。
以数据驱动动态组件的生成
接下来就得使用Vue .可拖动的这个拖拽库进行拖拽和数据的修改。我们可以直接在App.vue文件中直接书写。
/* App.vue */
模板
div class=dragCom
h1{{ leftComList }}/h1
button @click=queryObj.num 改变查询条件/按钮
div class=body
div class=left
draggable class= left :list= left com list :group= people
差异
ref=comBody
leftComList中的v-for=({名称，id }，索引)
:key=id
"通讯卡"
！-循环leftComList数组，利用数据来渲染组件，
将动态生成的数组添加到这个数字正射影像图元素当中。 -
{{
handleAddCom({
props: { comItem: { name，id }，queryObj }，
索引，
})
}}
/div
/可拖动
/div
div class=右
可拖动的
class=dragArea
:list=rightComList
:group={ name: people ，pull: clone ，put: false }
:clone=handleCloneDog
rightComList中的 element :key=元素。id
{{ element.name }}
/div
！-右侧的卡片数据，rightComList数组对象中的名字就对应了generateComponents.js
中的通信地图中的属性-
/可拖动
/div
/div
/div
/模板
脚本
从" vuedraggable "导入可拖动的
从导入创建Com ./生成组件；
导出默认值{
组件：{
可拖动，
},
data() {
返回{
rightComList: [
{
id: Math.random()，
名称："组件1",
},
{
id: Math.random()，
名称："组件2",
},
],
leftComList: []，//存储驱动动态生成组件的数据。
comMap: new Map()，//主要的作用就是用来记录
//组件有没有渲染到"通讯卡"这个数字正射影像图中，
//如果渲染了就不能再往进添加子元素了。
queryObj: {
//主要的作用就是向子组件传递查询条件
数字：0,
},
};
},
销毁前(){
//清除记录的数据
这个。com图。clear()；
},
方法：{
handleAddCom({ index，on={}，props={ comItem: { name: ，id:0 } }){
常数{
委员会：{ id }，
}=道具；
这个. nextTick(()={
//获取该节点的子节点的长度
const childNodesLength=this .$参考文献。combody[索引]。子节点。长度；
//获取组合体这个数字正射影像图数组的长度
const comLine=this .$参考文献。combody。长度；
如果(!this.comMap.get(id)) {
//如果没有渲染过组件
//1.调用CreateCom方法创建组件。并传递小道具和事件
const com=CreateCom({
道具，
开：{
处理删除：这个。handledeletecom，
.开着，
},
});
//2.生成组件
com .$ mount()；
if (childNodesLength===2) {
//如果要添加到两个组件中间。那么就将新生成的组件数字正射影像图位置进行修改放到中间。
//将最后的组件数字正射影像图添加到正确的位置
这个. refs.comBody.splice(
索引，
0,
这个comBody
);
}
//3.将生成的组件添加到改数字正射影像图中。
这个refs.comBody[index].appendChild(com .$ El)；
//4.记录该组件实现了渲染。
this.comMap.set(id，true)；
}否则{
//该位置的组件已经渲染，不需要再次渲染直接返回
返回；
}
});
},
handleDeleteCom({ id }) {
//传递给子组件删除的方法，根据组件的编号来删除数据
常量索引=this。左侧通讯列表。查找索引((项目)=项目。id===id)；
if (~index) {
//如果存在这个编号的组件，就删除
this.leftComList.splice(index，1)；
}
},
handleCloneDog(项目){
//给leftComList数组添加数据
返回{
.项目，
id: Math.random()，
};
},
},
};
/脚本
风格。dragCom {
字体系列：Avenir、Helvetica、阿里亚、无衬线；
-WebKit-字体-平滑：抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}。正文{
宽度：100%;
高度：800像素
显示器：flex
justify-content:space-between；
}。左侧{
flex:1；
高度：800像素
边框：1px纯粉色；
}。右{
宽度：20%;
高度：800像素
}。卡片{
高度：50px
背景色：# 40cec7
边距：12px 0；
字体大小：12px
行高：50px
光标：指针；
}。comCard
边距：12px
显示：内嵌-块；
}
/风格
这样就实现了动态的组件渲染和拖拽排序。
效果
源码
想要尝试的同学可以自行下载本文的代码源码开源代码库
以上就是某视频剪辑软件实现拖拽动态生成组件的需求的详细内容，更多关于某视频剪辑软件拖拽动态生成组件的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。