chore: 拖动元素时的背景图

dap

2024-04-04 aeac77b90fdb2cee6e1fae24e9ed5c07da6630e4

 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);