hlxb-app-ui

hlxb-app-ui 使用说明

在项目根目录执行如下命令即可：

// 如果您的根目录没有package.json文件的话，请先执行如下命令：
// npm init -y

npm install hlxb-app-ui

// 更新
// npm update hlxb-app-ui

NPM 安装方式配置

关于 SCSS

hlxb-app-ui 依赖 SCSS，您必须要安装此插件，否则无法正常运行。

• 如果您的项目是由 HBuilder X 创建的，相信已经安装 scss 插件，如果没有，请在 HX 菜单的 工具->插件安装中找到"scss/sass 编译"插件进行安装， 如不生效，重启 HX 即可。

• 如果您的项目是由 vue-cli 创建的，请通过以下命令安装对 sass(scss)的支持，如果已安装，请略过。

  // 安装sass
  npm i sass -D
  
  // 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
  npm i sass-loader@10 -D
  

准备工作

在进行配置之前，请确保您已经根据安装中的步骤对 hlxb-app-ui 进行了 npm 安装，如果没有，请先执行安装：

// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
// npm init -y

// 安装
pnpm install hlxb-app-ui
pnpm install dayjs
pnpm install query-string

如使用到模型需要调用平台接口的模块，请先在 uni 示例挂载全局参数

main.ts

uni.$hlxbInitRequest = { baseUrl:'http://192.168.1.82', tenantId: '1' };

使用方法

<template>
  <view v-if="data.schemas.length">
    <basic-form
      :schemas="data.schemas"
      :btns="data.btns"
      :buttonPlaceholder="false"
      onlyParams
      @validate-success="validateSuccess"
    />
  </view>
</template>

<script setup lang="ts">
    import { basicForm } from 'hlxb-app-ui';
    const data = {
      schemas: [
        {
          component: 'Input',
          updateType: 2,
          label: '文本框1',
          field: 'key_1__input_2',
        },
      ],
      btns: [
        {
          code: 'save',
          label: '测试按钮',
        },
      ],
    };
    const validateSuccess = params => {
      console.log('------->>>>>', params);
    };
</script>