SceneV

Appearance

动态 Vue3 组件指南 ​

动态 Vue3 组件是一类特殊控件。它不渲染成 canvas，而是在画布中挂载真实 DOM 和 Vue 应用，适合实现复杂 UI、地图、第三方 SDK 组件和自定义大屏卡片。

适用场景 ​

  • 地图组件。
  • 复杂指标卡。
  • 自定义列表。
  • 第三方 UI 库组件。
  • 需要 CDN 资源的组件。
  • 需要 DOM 交互的组件。

添加组件 ​

在左侧“控件”中找到动态 Vue3 组件或相关预设，拖入画布即可。

选中组件后，在右侧属性面板中可以点击“编辑”打开代码编辑器。

编辑器内容 ​

编辑器包含：

  • Template。
  • Script。
  • CSS。
  • 全局函数。
  • CDN。
  • 教程。

Template ​

Template 写普通 Vue 模板，不需要外层 <template> 标签。

示例：

html
<section class="card" @click="handleClick">
  <strong>{{ title }}</strong>
  <span>{{ value }}</span>
</section>

Script ​

Script 使用 Vue3 setup 写法，不需要 <script setup> 标签。

可直接使用常见 Vue API，例如 ref、computed、watch、onMounted、onUnmounted、nextTick。

示例：

js
const title = ref("设备状态");
const value = computed(() => Number(vars.value ?? 0));

function handleClick() {
  meta2d.emit("vue3-click", { id: pen.id, value: value.value });
}

CSS ​

CSS 只作用于当前组件。建议给组件根节点设置明确类名，并让根节点占满图元区域。

示例：

css
.card {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

数据绑定 ​

动态 Vue3 组件通过 vars 读取右侧“数据”页签中的动态变量。

示例：添加自定义动态数据：

  • 数据名：进度。
  • 属性名：percent。
  • 类型：float。
  • 组件中读取：
js
const percent = computed(() => Number(vars.percent ?? 0));

模板中使用：

html
<div class="bar">
  <i :style="{ width: percent + '%' }"></i>
</div>

CDN ​

CDN 用于加载第三方 JS 或 CSS。

示例：

text
css:https://unpkg.com/leaflet@1.9.4/dist/leaflet.css
js:https://unpkg.com/leaflet@1.9.4/dist/leaflet.js

CSS 会注入当前组件，JS 会加载到页面中。加载成功后通常可以通过 window.xxx 使用全局对象。

全局函数 ​

全局函数在 Vue app 创建后、挂载前执行，常用于注册插件。

示例：

js
if (window.ElementPlus) {
  app.use(window.ElementPlus);
}

输出事件 ​

组件中可以通过 meta2d.emit 向外输出事件。

js
function handleClick() {
  meta2d.emit("device-click", {
    id: pen.id,
    value: vars.value,
  });
}

事件可用于画布内部交互，也可被外部系统监听。

地图组件 ​

项目内置地图组件使用 Leaflet CDN。常用绑定变量：

  • markers：点位。
  • polylines：折线。
  • polygons：区域。
  • circles：圆形覆盖物。
  • centerLng / centerLat：中心点。
  • zoom：缩放级别。

点位通常绑定 JSON 字符串。示例见完整示例与常见问题。

常见问题 ​

组件不显示 ​

检查：

  • Template 是否有根节点。
  • CSS 是否设置了宽高。
  • Script 是否报错。
  • CDN 是否加载成功。

数据没有变化 ​

检查：

  • 右侧“数据”页签是否添加了对应属性。
  • 属性名是否和 vars.xxx 一致。
  • 是否已经绑定数据源变量。
  • 是否保存并进入预览。

需要拖动但组件挡住画布 ​

动态 DOM 组件可能接收鼠标事件。编辑时如果不好拖动，可以选中外框或通过图层定位后调整。

使用建议 ​

  • 组件根节点始终设置 width: 100%; height: 100%;。
  • 变量名保持稳定。
  • 第三方库优先通过 CDN 页签配置。
  • 输出事件时使用清晰事件名，例如 map-marker-click。
  • 复杂组件先用本地 mock 调试，再接真实数据。