低代码开发之vue.draggable的使用（初阶：组件化拖拽生成简单页面）_vue组件拖拽自定义界面

效果展示

vue.draggable 安装 && 使用

//依赖下载
npm i -S vuedraggable 
或
 yarn add vuedraggable
1
2
3
4

//导入draggable组件
 import draggable from 'vuedraggable' 
1
2

 //注册draggable组件 
components: { draggable },
1
2

<!--使用draggable组件 v-model绑定数组-->
 <draggable v-model="myArray"  @start="onStart" @end="onEnd">
    <transition-group>
     <div class="item" v-for="item in myArray" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable>
1
2
3
4
5
6

• vue.draggable 相关属性
  

• 事件
  

Demo完整代码

<template>
	<div class="page-edit">
		<!-- 左侧业务组件区 -->
		<div class="left-components">
			<div class="title-bar">业务组件</div>
			<draggable
				v-model="componentsList"
				draggable=".li"
				v-bind="dragOptions"
				:options="{ sort: false, group: { name: 'field', pull: 'clone', put: false } }"
			>
				<div v-for="d in componentsList" :key="d.type" class="li">{{ d.name }}</div>
				<a-button class="save" @click="save">保存配置</a-button>
			</draggable>
		</div>

		<!-- 右侧内容生成区 -->
		<div class="right-content">
			<div class="title-bar">页面内容区</div>
			<draggable class="content" group="field" v-bind="dragOptions" :list="contentList" @change="toChange">
				<div v-for="(item, index) in contentList" :key="'r' + index">
					<div class="item">
						{{ item.name }}
						<div class="delbtn" @click="del(index)">✖</div>
					</div>
				</div>
			</draggable>
		</div>
	</div>
</template>

<script>
import draggable from "vuedraggable";

export default {
	name: "PageEdit",
	components: {
		draggable
	},

	data() {
		return {
			dragOptions: {
				animation: 500,
				filter: ".disabled" //class为disabled时不可拖拽
			},
			componentsList: [
				{ type: "top", name: "信息条组件" },
				{ type: "income", name: "收益指标" },
				{ type: "electricity", name: "电量指标" },
				{ type: "comprehensive", name: "系统效率" },
				{ type: "warning", name: "告警指标" }
			],
			contentList: [{ type: "top", name: "信息条组件" }]
		};
	},
	watch: {},
	created() {
		if (JSON.parse(localStorage.getItem("contentList"))) {
			this.contentList = JSON.parse(localStorage.getItem("contentList"));
		}
	},
	methods: {
		toChange(e) {
			console.log(e);
			if (e.added) {
				console.log(this.contentList);
			}
		},
		del(idx) {
			this.contentList.splice(idx, 1);
		},
		save() {
			localStorage.setItem("contentList", JSON.stringify(this.contentList));
			this.$message.success("保存成功");
		}
	}
};
</script>

<style lang="scss">
.page {
	&-edit {
		padding: 16px;
		display: flex;
		overflow: hidden;
		.title-bar {
			padding: 12px;
			font-size: 18px;
			font-weight: bold;
			background: #091d48;
			margin-bottom: 16px;
		}
		.left-components {
			width: 15%;
			height: calc(100vh - 100px);
			border: solid 1px #4d617f;
			overflow: auto;
			.li {
				background: #4d617f;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 10px 10px;
				padding: 12px 0;
			}
			.save {
				position: absolute;
				top: 25px;
				right: 30px;
				z-index: 999;
			}
		}
		.right-content {
			width: 85%;
			height: calc(100vh - 100px);
			border: solid 1px #4d617f;
			overflow: hidden;
		}
		.content {
			width: 100%;
			height: calc(100vh - 100px);
			overflow-y: auto;
			.item {
				height: 80px;
				background: #4d617f;
				margin: 0 12px 12px 12px;
				padding: 12px;
				position: relative;
			}
		}
		.delbtn {
			position: absolute;
			right: 4px;
			top: 0px;
			font-size: 12px;
			line-height: 24px;
			cursor: pointer;
		}
	}
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

更多详见draggable官网=>https://www.itxst.com/vue-draggable/tutorial.html