更新记录

0.1.17（2024-02-27）

调整文档地址

0.1.16（2023-10-23）

[0.1.16] (2023-10-23)

Bug Fixes

• 修复 DatePicker 组件对齐错误的问题

0.1.15（2023-09-26）

[0.1.15] (2023-09-26)

Features

• ✨ table 组件提供行点击事件 row-click

Bug Fixes

• 修复 Circle 组件在微信端不展示文字的问题

平台兼容性

介绍

FANT-MINI-PLUS

一个适用于 uni-app 平台的基于 vue3 的前端UI框架

FANT-MINI-PLUS 是基于vue3的 uni-app 平台的移动端组件库，目前正在有计划地持续迭代中。

官方文档：https://portal.hd123.com/fant-mini-plus/

预览

扫描下方小程序码，体验演示示例:

快速上手

介绍

通过本章节你可以了解到 fant-mini-plus 的安装方法和基本使用姿势。

uni_modules

安装

fant-mini-plus 支持 uni_modules 规范，已经上架到 uni-app 的插件市场，故我们推荐使用 uni_modules 的方式引入，方便更新。

在uni-app插件市场选择使用HBuildX导入，或者选择手动在src目录下创建uni_modules文件夹并将fant-mini-plus解压到uni_modules中，结构如下:

- uni_modules
- - - fant-mini-plus 

下载地址：fant-mini-plus

Tips: 如果需要使用Toast和Modal组件，则需要安装mp-html以支持富文本功能。

配置

1. 引入组件

import { createSSRApp } from 'vue'
import fantMini from '@/uni_modules/fant-mini-plus'
import App from './App.vue'
export function createApp() {
  const app = createSSRApp(App)
  app.config.warnHandler = () => null
  app.use(fantMini)
  return {
    app
  }
}

2. 引入fant-mini-plus的主题文件

在uni.scss中引入theme.scss。

/* uni.scss */
@import "@/uni_modules/fant-mini-plus/libs/css/theme.scss";

3. 安装sass（如果项目中已经安装sass或者node-sass则此步骤可以忽略）

fant-mini-plus使用scss作为css预编译器，故需在项目中引入，否则无法运行。

# 安装sass
yarn add sass -D  
# 安装sass-loader
yarn add sass-loader -D

4. 引入fant-mini-plus的iconfont

在App.vue中引入iconfont相关文件。

/* App.vue */
<style>
@import '@/uni_modules/fant-mini-plus/libs/iconfont/iconfont.css';
</style>

5. 使用

完成前四步之后就可以开始使用fant-mini-plus了。fant-mini-plus的组件支持easycom规范，故可以直接在.vue中使用，无需在页面内import，也不需要在components内声明，即可在任意页面使用。值得注意的是，uni-app平台不支持全局挂载组件，故Loading、Toast、Modal、DatePicker等组件仍需在SFC中显式使用，例如:

<hd-loading></hd-loading>