D2C PRO

Appearance

预览窗口 ​

预览窗口用于显示和运行你项目的前端代码。D2C PRO 本身并不知道你的项目是如何运行的。因此，你需要自行配置预览窗口，以确认生成的代码能够在你的项目中正确运行。

创建预览窗口 ​

创建预览窗口非常简单，只需要监听D2C PRO发送的事件，然后根据事件中的数据显示代码即可。

javascript
// 发送预览窗口缩放消息
{
  type: 'zoom',
  content: Number
}

// 发送预览窗口代码消息
{
  type: 'code',
  content: String,
  size: {
    width: Number,
    height: Number
  }
}

// 监听 D2C PRO 发送的事件
window.addEventListener('message', (event) => {
  // event.data
})

完整代码示例 ​

以下是一个基于 vue3 的预览窗口代码示例

vue
<template>
  <div class="zoom-area">
    <component :is="codeComponent" class="demo" :style="getSize" />
  </div>
</template>
<script setup lang="ts">
import { compile, computed, h, ref } from 'vue'

const size = ref({
  width: '100%',
  height: '100%'
})
const code = ref(
  '<p class="text-center" style="color: rgba(255,255,255,0.3)">Please selection canvas node <br>Use auto layout to generates better results</p>'
)

// Listener for Codify plugin events
window.addEventListener('message', (event) => {
  if (event.data.length < 0) return
  switch (event.data.type) {
    case 'zoom':
      document.body.style.setProperty('zoom', event.data.content)
      break
    case 'code':
      code.value = event.data.content
      try {
        size.value = JSON.parse(event.data.size)
      } catch (error) {
        console.error(error)
      }
  }
})

// Set preview size
const getSize = computed(() => {
  const styleObject: any = {}
  if (size.value.width) {
    styleObject.minWidth = size.value.width
  }
  if (size.value.height) {
    styleObject.minHeight = size.value.height
  }
  return styleObject
})

const codeComponent = {
  render() {
    try {
      return h(compile(code.value))
    } catch (error) {
      // When an error occurs, provide alternative code or handling logic.
      return h('span', { class: 'text-danger text-center' }, 'Error: Failed to render component')
    }
  }
}
</script>

<style scoped>
.zoom-area {
  position: absolute;
  align-items: safe center;
  justify-content: safe center;
  min-width: 100%;
  min-height: 100%;
  padding: 20px;
}
.demo {
  align-self: center !important;
}
</style>

在特征配置填写预览地址 ​

json
{
  "playground_url": "https://your.playground_url.com",
}

详情请参考 特征设置

TIP

预览地址是允许使用本地Url的。例如 http://localhost:3000 , 只要是你的网络可以访问即可。

同时要允许跨域请求。