渲染器

PC 端

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

使用示例

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

  const json = {
    pages: [
      {
        key: 0,
        type: "dashboardDefault",
        name: "仪表盘容器",
        code: "",
        display: "",
        props: {
          backgroundColor: "white",
          events: {},
        },
        bindProps: {},
        coms: [],
        mode: "",
      },
    ],
    params: [],
    apis: [],
    funcs: [],
  };

  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
langList	国际化语言列表	LanguageItem[]
locale	当前语言编码	string
id	当前页面的唯一标识	string

注意事项

ajax 请求

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

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