vue-jwhuang-ui/README.md

<p align="center"> <img width="200" src="https://www.jwhuang.site/resource/icon/logo.svg"> </p>

<p align="center">
  <img width="200" src="https://www.jwhuang.site/resource/icon/logo.svg">
</p>

<h1 align="center">Vue Jwhuang UI</h1>

## 文档

[Vue Jwhuang UI](https://docs.jwhuang.site)

## 介绍

基于 Vue3 + ElementPlus + TypeScript + Vite 二次封装组件文档

## 安装

```sh
pnpm add vue-jwhuang-ui
# or
npm install vue-jwhuang-ui
# or
yarn add vue-jwhuang-ui
```

## 使用组件

#### 全局注册

```ts
import { createApp } from 'vue'
import App from './App.vue'

import VueJwhuangUI from 'vue-jwhuang-ui'
import 'vue-jwhuang-ui/dist/style.css'

const app = createApp(App)
app.use(VueJwhuangUI)

app.mount('#app')
```

#### 按需引入

```vue
<script setup lang="ts">
import { Input } from 'vue-jwhuang-ui'
import 'vue-jwhuang-ui/dist/style.css'
</script>

<template>
  <Input type="text" />
</template>
```

## 组件

| 组件名称     | 组件说明   |
| :----------- | :--------- |
| SvgIcon      | 图标组件   |
| Input        | 输入类组件 |
| Popup        | 弹窗组件   |
| RenderForm   | 动态表单   |
| RenderSearch | 查询表单   |
| RenderTable  | 配置表格   |

## 工具函数

| 函数名称          | 说明                                                                     | 类型                                                                                                           |
| :---------------- | :----------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
| formatNumber      | 数字格式化函数                                                           | (value: number &#124; string, precision: number = 2, separator: string = ',', decimal: string = '.') => string |
| add               | 处理 `js` 加减精度问题                                                   | (num1: number, num2: number) => number                                                                         |
| downloadFile      | 下载文件到本并自定义文件名，未传 `name` 时，从文件地址中自动提取文件名称 | (url: string, fileName?: string) => void                                                                       |
| objectToQueryStr  | object转url string拼接                                                   | (obj:object) => string                                                                                         |
| urlParamsToObject | url路径转object                                                          | (url:string) => object                                                                                         |