abu/wzj-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 优化属性面板，增加展开动画

Browse Source
This commit is contained in:
LiuHao 2024-02-02 11:26:19 +08:00
parent 3dc99aad18
commit 2da3e85254
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/BpmnDesign/index.vue
View File

@ -63,17 +63,18 @@
<div ref="canvas" class="canvas" /> <div ref="canvas" class="canvas" />
</el-container> </el-container>
<div :class="{ 'process-panel': true, 'hide': panelFlag }"> <div :class="{ 'process-panel': true, 'hide': panelFlag }">
<div class="process-panel-bar" @click="panelFlag = !panelFlag"> <div class="process-panel-bar" @click="panelBarClick">
<div class="open-bar"> <div class="open-bar">
<el-link type="default" :underline="false"> <el-link type="default" :underline="false">
<svg-icon class-name="open-bar" :icon-class="panelFlag ? 'caret-back' : 'caret-forward'"></svg-icon> <svg-icon class-name="open-bar" :icon-class="panelFlag ? 'caret-back' : 'caret-forward'"></svg-icon>
</el-link> </el-link>
</div> </div>
</div> </div>
<transition enter-active-class="animate__animated animate__fadeIn">
<div v-show="!panelFlag" v-if="bpmnModeler" class="panel-content"> <div v-show="showPanel" v-if="bpmnModeler" class="panel-content">
<PropertyPanel :modeler="bpmnModeler" /> <PropertyPanel :modeler="bpmnModeler" />
</div> </div>
</transition>
</div> </div>
</el-container> </el-container>
</div> </div>
@ -104,6 +105,7 @@ const dialog = reactive({
}); });
const panelFlag = ref(false); const panelFlag = ref(false);
const showPanel = ref(true);
const xmlUploadRef = ref<ElUploadInstance>(); const xmlUploadRef = ref<ElUploadInstance>();
@ -126,6 +128,14 @@ onMounted(() => {
}); });
}); });
const panelBarClick = () => {
// 延迟执行，否则会导致面板收起时，属性面板不显示
panelFlag.value = !panelFlag.value;
setTimeout(() => {
showPanel.value = !panelFlag.value;
}, 100);
};
/** /**
* 从文件加载xml * 从文件加载xml
*/ */