From aeac77b90fdb2cee6e1fae24e9ed5c07da6630e4 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: 星期四, 04 四月 2024 20:41:58 +0800
Subject: [PATCH] chore: 拖动元素时的背景图
---
src/components/BpmnDesign/index.vue | 17 +++++++++++++----
1 files changed, 13 insertions(+), 4 deletions(-)
diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue
index 1568a3e..366f642 100644
--- a/src/components/BpmnDesign/index.vue
+++ b/src/components/BpmnDesign/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="containers">
- <div class="app-containers">
+ <div v-loading="loading" class="app-containers">
<el-container class="h-full">
<el-container style="align-items: stretch">
<el-header>
@@ -112,6 +112,7 @@
const perviewSVGShow = ref(false);
const xmlStr = ref('');
const svgData = ref('');
+const loading = ref(false);
const panelBarClick = () => {
// 寤惰繜鎵ц锛屽惁鍒欎細瀵艰嚧闈㈡澘鏀惰捣鏃讹紝灞炴�ч潰鏉夸笉鏄剧ず
@@ -285,7 +286,8 @@
xml: xml,
svg: svg,
key: process.id,
- name: process.name
+ name: process.name,
+ loading: loading
};
emit('saveCallBack', data);
};
@@ -319,6 +321,13 @@
</script>
<style lang="scss" scoped>
+$bg-image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+';
+
+/** 浠庡乏渚ф嫋鍔ㄦ椂鐨勮儗鏅浘 */
+:deep(svg.new-parent) {
+ background: url($bg-image) !important;
+}
+
.containers {
height: 100%;
.app-containers {
@@ -327,7 +336,7 @@
.canvas {
width: 100%;
height: 100%;
- background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+');
+ background: url($bg-image);
}
.el-header {
height: 35px;
@@ -388,7 +397,7 @@
border-left: 1px solid #eeeeee;
box-shadow: #cccccc 0 0 8px;
max-height: 100%;
- width: 480px;
+ width: 25%;
height: calc(100vh - 80px);
:deep(.el-collapse) {
height: calc(100vh - 162px);
--
Gitblit v1.9.3