安装

• 使用 npm/yarn 安装

# npm
npm install formaui
# yarn
yarn add formaui

• 手动安装

前往Gitee 仓库将组件库下载到本地项目，手动引入组件库。

使用

// main.ts
import propsConfig from '@/libs/propsConfig'
import FormaUI from '@/components/formaui'

// @ts-ignore
uni.$formaui = propsConfig
export const createApp = () => {
  const app = createSSRApp(App)
  app.use(FormaUI)
  return {
    app
  }
}

/* App.vue */
page {
  --f-color-primary: #16479d;
  --f-color-success: #07c160;
  --f-color-warning: #ff7900;
  --f-color-danger: #be0909;
  --f-color-gray: #8f8d8e;
  --f-page-color: #ffffff;
}

微信小程序需开启 easycom 组件模式，如果不了解如何配置，可先查看 官网文档。

// pages.json
"easycom": {
    "autosca": true,
    "custom": {
      "f-(.*)": "@/components/formaui/f-$1/f-$1.vue"
    }
  }

propsConfig 文件说明

优先级： 单独设置组件 props > 全局配置文件 props。（组件属性介绍请查看文档）

温馨提示：未设置则使用组件内默认值，避免出错，请勿删减以下配置，切勿修改 key，仅可修改 key 对应值。

// propsConfig.ts

// 组件内主色配置
const colors = {
  primary: '#16479D',
  success: '#07C160',
  warning: '#FF7900',
  danger: '#BE0909'
}
export default {
  // 组件内主色配置
  colors,
  // 按钮组件 f-button
  fButton: {
    height: '80rpx',
    fontSize: '28rpx',
    borderRadius: '16rpx'
  }
}