Recientemente escribí un proyecto usando el complemento vuedraggable para generar componentes. Desde que lo usé por primera vez, busqué artículos relacionados en Internet. Como resultado, Internet básicamente está arrastrando hacia arriba y hacia abajo. encontrar el resultado que quería, y luego lo usé de acuerdo a mí mismo Requisitos combinados con documentos relevantes para el desarrollo
Tras el desarrollo, el resultado aproximado del vídeo es el siguiente:
vuedraggable arrastrar y soltar para generar componentes
El efecto estático es el siguiente:
Paso 1: Descargar dependencias:
npm i -S vuedraggablePaso 2: Introducir en el proyecto:
import draggable from "vuedraggable";
El tercer paso es ver las propiedades y los métodos relacionados:
Atributos:
evento:
Consulte el sitio web oficial para obtener detalles sobre cómo usar atributos y eventos:
Chino (traducción al chino, puede que no se actualice a tiempo): documentación en chino vue.draggable - itxst.com
Inglés: https://www.itxst.com/vue-draggable/tutorial.html
Paso 4: usa html en el código
<template>
<div>
<div class="">
<draggable
v-model="applyList"
:group="{ name: 'piece', pull: 'clone', put: true }"
animation="100"
:sort="false"
:clone="addComponent"//左边应用组数据
>
<div class="employ" v-for="item in applyList" :key="item.id">
<span class="nr">{
{ item.name }}</span>
</div>
</draggable>
</div>
<div class="">
<draggable
v-model="applyList"
:group="{ name: 'piece', pull: 'clone', put: true }"
animation="100"
:sort="false"
:clone="addComponent"//左边应用数据
>
<div class="employ" v-for="item in applyList" :key="item.id">
<span class="nr">{
{ item.name }}</span>
</div>
</draggable>
</div>
<div>
<draggable v-model="onList" group="piece" animation="100">//右边空数组
<transition-group :style="style">
<div class="myEmploy" v-for="item in onList" :key="item.id">
<span class="zjNr"
>{
{ item.name }}
<div class="ddd">
<draggable
v-model="item.myList"//父级空数组
:group="{
name: 'theChild',
pull: 'clone',
}"
animation="100"
:clone="cloneComponent"
:sort="true"
>
<transition-group :style="style">
<!-- 子应用 -->
<div class="caTion" :key="item.id">
<div
class="suBAppLicaTion"
v-for="(it, idx) in item.myList"//子级空数组
:key="idx"
>
<i
class="el-icon-circle-close myDelete"
@click="onDelete(idx)"
></i>
<img :src="it.url" alt="" />
<span class="ziNr">{
{ it.name }}</span>
</div>
</div>
</transition-group>
</draggable>
</div>
</span>
</div>
</transition-group>
</draggable>
从左侧拖入或点选组件进行应用组合
</div>
</div>
</template>js:
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable,
},
data() {
return {
applyList: [
{
name: "前端小脑虎",
id: 1,
},
{
name: "关注我，不迷路",
id: 2,
},
{
name: "vue问题大全",
id: 3,
},
{
name: "欢迎来到深圳",
id: 4,
},
],
useList: [
{
url: require("../../assets/images/profile.jpg"),
name: "学习呀",
id: 5,
},
{
url: require("../../assets/images/profile.jpg"),
name: "前端耐斯",
id: 6,
},
{
url: require("../../assets/images/profile.jpg"),
name: "前端小脑虎",
id: 7,
},
{
url: require("../../assets/images/profile.jpg"),
name: "深圳欢迎你",
id: 8,
},
],
list: [
{
url: require("../../assets/images/profile.jpg"),
name: "互连网+",
id: 1,
},
{
url: require("../../assets/images/profile.jpg"),
name: "直装直提",
id: 2,
},
],
onList: [],
myList: [],
style: "min-height:120px;display: block;",
utilize: false,
AppGroup: false,
};
},
methods: {
// 删除
onDelete(idx) {
this.onList.forEach((item) => {
const id = item.myList[idx].id;
item.myList.splice(idx, 1);
console.log("item", item.myList);
});
},
// 子应用添加
newSubAppLicaTion(item) {
const clone = this.cloneComponent(item);
this.onList.forEach((item) => {
if (item.myList) {
item.myList.push(clone);
} else {
item.myList = [clone];
}
});
},
// 应用组添加
addComponent(item) {
let exist = false;
this.onList.forEach((it) => {
//遍历onList，判断是否当前拖拽的应用组内容是否存在，存在就赋值exist为true并return
if (it.id == item.id) {
exist = true;
return;
}
});
if (exist) {
//根据exist来判断，为true就return，false就push进去
this.$message({
message: "组件里已经有相同的应用组啦，请拖拽其他应用组哦",
type: "warning",
});
return;
} else {
const clone = item;
this.onList.push({ ...clone, myList: [] });
}
},
// 应用复制
cloneComponent(origin) {
let exist = false;
this.onList.forEach((item) => {
item.myList.forEach((it) => {
//遍历myList，判断是否当前拖拽的应用内容是否存在，存在就赋值exist为true并return
if (it.id == origin.id) {
exist = true;
return;
}
});
});
if (exist) {
//根据exist来判断，为true就return，false就push进去
this.$message({
message: "组件里已经有相同的应用啦，请拖拽其他应用哦",
type: "warning",
});
return;
} else {
const clone = origin;
return clone;
}
},
onEnd() {
this.drag = false;
},
save() {},
// 编辑
},
};
</script>Lo anterior es el proceso de uso de este plugin en el proyecto, si no lo entiendes puedes enviarme un mensaje privado.