渲染器

PC 端

PC 端渲染器的安装及引用方式同设计器。

使用示例

<template>
  <hi-page-template
    :json="json"
    :open-intl="true"
    :show-alias="showAlias"
  ></hi-page-template>
</template>
<script lang="ts" setup>
  import { useI18n } from "vue-i18n";

  const json = {
    pages: [
      {
        type: "default",
        name: "默认页",
        key: 0,
        props: {
          backgroundColor: "#f0f2f5",
          padding: "",
        },
        coms: [],
      },
    ],
    params: [],
    apis: [],
  };

  const { t } = useI18n();
  // 将国际化key等渲染为显示数据
  function showAlias(val) {
    let aliasT = val;
    let alias = val;
    try {
      alias = JSON.parse(val);
    } catch (error) {}
    if (alias && typeof alias === "object") {
      // 对象
      if (alias.intlKey) {
        aliasT = t?.(alias.intlKey) || alias.intlKey;
      } else {
        aliasT = alias.val;
      }
    } else if (alias && typeof alias === "string") {
      // 字符串
      aliasT = alias.startsWith("intl_") ? t?.(alias) : alias;
    }
    return aliasT;
  }
</script>

API

Props

参数名	描述	类型	默认值
json	设计器配置数据	Object	[]
openIntl	是否开启国际化	boolean
showAlias	国际化渲染函数	function

注意事项

ajax 请求

为了让组件内部可以调用集成了渲染器组件脚手架的公共 ajax 请求函数，需要在主框架 main 中定义全局$request 函数，方式如下：

// main.ts
const app = createApp(App)
// config中的配置项与axios配置项一致
app.config.globalProperties.$request = (config) => {......}

移动端