移动端 Drawflow 画布不可见问题剖析与解决指南

vue.js

2024-03-22 11:03:29

移动端 Drawflow 画布不可见问题剖析与解决方案

问题

当你使用 Drawflow 库在中大型屏幕上设计节点时，一切运行正常。但是，当你缩小到移动端或平板电脑视图时，画布 (canvas) 却消失了，让你抓耳挠腮。

可能的解决方案

1. 排查特定于小屏幕的样式

仔细检查你的代码，确保没有针对小屏幕的特定样式隐藏了画布元素。

2. 检查 Tailwind CSS

Tailwind CSS 是一个流行的 CSS 框架，如果你的应用中使用了它，请确认没有针对小屏幕的特定样式导致了画布隐藏。

3. 检查 Tailwind CSS 类

确认以下 Tailwind CSS 类没有应用于画布元素：

hidden
invisible
opacity-0

4. 检查 CSS 覆盖

确保没有其他 CSS 覆盖了 Tailwind CSS 样式，从而导致画布隐藏。

5. 检查 Drawflow 库版本

请确保你使用的是最新版本的 Drawflow 库，因为早期版本可能存在导致画布在小屏幕上不可见的错误。

示例代码

以下是使用 Drawflow 和 Tailwind CSS 在 Nuxt 3 应用中创建可见画布的示例代码：

<template>
  <div class="flex md:h-[90vh] flex-col md:flex-row">
    <div
      class="w-full md:w-2/12 space-y-5 pt-5 rounded-lg items-center border-muted-200 dark:border-slate-700 dark:bg-slate-800 relative border bg-slate-100 transition-all duration-300 shadow-lg p-5 truncate overflow-auto"
    >
      <div
        v-for="n in listNodes"
        :key="n.ID"
        draggable="true"
        :data-node="n.item"
        @dragstart="drag($event, n.name)"
        class="cursor-move text-center px-3 py-3 rounded-2xl bg-[var(--node-bg-color)] truncate"
        :style="`--node-bg-color: ${n.color}`"
      >
        <span>{{ n.name }}</span>
      </div>
    </div>

    <div class="w-3 bg-transparent"></div>

    <div
      class="w-full bg-slate-100 border-muted-200 rounded-lg items-center border-muted-200 dark:border-slate-700 dark:bg-slate-800 relative border transition-all duration-300 shadow-lg"
    >
      <div
        id="drawflow"
        ref="drawflowRef"
        class="w-full h-full border dark:border-slate-500"
        @drop="drop($event)"
        @dragover="allowDrop($event)"
      />
    </div>
  </div>
</template>

<script setup>
import Drawflow from "drawflow";
</script>

<style>
  #drawflow {
    /* 为画布设置最小高度 */
    min-height: 200px;
  }
</style>