# vue-leiy-ui

> This template should help get you started developing with Vue 3 in Vite.

Latest version **1.0.7** (published 2023-11-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-leiy-ui
pnpm add vue-leiy-ui
yarn add vue-leiy-ui
bun add vue-leiy-ui
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2023-11-28 |
| First published | 2023-11-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 382.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | leiy |
| Maintainers | sunshine_yuan1016 |

## Links

- npm: https://www.npmjs.com/package/vue-leiy-ui
- npm.io page: https://npm.io/package/vue-leiy-ui

## Dependencies (7)

- [vue](https://npm.io/package/vue.md) ^3.3.4
- [pinia](https://npm.io/package/pinia.md) ^2.1.7
- [vue-router](https://npm.io/package/vue-router.md) 4.0.14
- [vue-leiy-ui](https://npm.io/package/vue-leiy-ui.md) ^1.0.6
- [ant-design-vue](https://npm.io/package/ant-design-vue.md) ^3.2.20
- [@ant-design/icons-vue](https://npm.io/package/@ant-design/icons-vue.md) ^7.0.1
- [vite-plugin-svg-icons](https://npm.io/package/vite-plugin-svg-icons.md) 2.0.1

## Recent versions

- 1.0.7 (latest) — 2023-11-28
- 1.0.6 — 2023-11-28
- 1.0.5 — 2023-11-27
- 1.0.4 — 2023-11-27
- 1.0.3 — 2023-11-27
- 1.0.2 — 2023-11-27
- 1.0.1 — 2023-11-23
- 1.0.0 — 2023-11-23

## README

# vue-leiy-ui

This template should help get you started developing with Vue 3 in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

## Customize configuration

See [Vite Configuration Reference](https://vitejs.dev/config/).

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Type-Check, Compile and Minify for Production

```sh
npm run build
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```

# vue-leiy-ui

## Document & Online preview

[Vue Leiy UI](https://themusecatcher.github.io/vue-leiy-ui/)

## Install & Use

```bash
pnpm i vue-leiy-ui
# or
npm install vue-leiy-ui
# or
yarn add vue-leiy-ui
```

Import and register component

**Global**

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

import VueLeiyUI from 'vue-leiy-ui'
import 'vue-leiy-ui/css'

const app = createApp(App)
app.use(VueLeiyUI)
```

**Local**

```vue
<script setup lang="ts">
import { Button } from 'vue-leiy-ui'
import 'vue-leiy-ui/css'
</script>
```

## Project

- Get the project code

```sh
git clone https://github.com/themusecatcher/vue-leiy-ui.git
```

- Install dependencies

```sh
cd vue-leiy-ui

pnpm i
```

- Run project

```sh
pnpm dev
```

## Components

| Component name | Descriptions | Component name | Descriptions |
| :------------- | :----------- | :------------- | :----------- |
| Breadcrumb     | 面包屑       | Button         | 按钮         |
| Carousel       | 走马灯       | Cascader       | 级联选择     |
| Checkbox       | 多选框       | Collapse       | 折叠面板     |
| Countdown      | 倒计时       | DatePicker     | 日期选择     |
| Dialog         | 对话框       | Divider        | 分割线       |
| Empty          | 空状态       | Image          | 图片         |
| InputNumber    | 数字输入框   | Message        | 全局提示     |
| Modal          | 信息提示     | Notification   | 通知提醒框   |
| Pagination     | 分页器       | Progress       | 进度条       |
| QRCode         | 二维码       | Radio          | 单选框       |
| Rate           | 评分         | Select         | 选择器       |
| Slider         | 滑动输入条   | Spin           | 加载中       |
| Steps          | 步骤条       | Swiper         | 触摸滑动插件 |
| Switch         | 开关         | Table          | 表格         |
| Tabs           | 标签页       | TextScroll     | 文字滚动     |
| Timeline       | 时间轴       | Tooltip        | 文字提示     |
| Upload         | 上传         | Video          | 播放器       |
| Waterfall      | 瀑布流       |

## Details

[My CSDN Blogs](https://blog.csdn.net/Dandrose)

## Functions

| Function name         | Descriptions                                                                        | Arguments                                                                           |
| :-------------------- | :---------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------- |
| dateFormat            | 简单易用的日期格式化函数！                                                          | (timestamp: number&#124;string&#124;Date, format = 'YYYY-MM-DD HH:mm:ss') => string |
| requestAnimationFrame | 针对不同浏览器进行兼容处理！                                                        | 使用方式不变                                                                        |
| cancelAnimationFrame  | 针对不同浏览器进行兼容处理！                                                        | 使用方式不变                                                                        |
| rafTimeout            | 使用 requestAnimationFrame 实现的定时器函数，等效替代 (setTimeout 和 setInterval)！ | (func: Function, delay = 0, interval = false) => object                             |
| cancelRaf             | 用于取消 rafTimeout 函数！                                                          | (raf: { id: number }) => void                                                       |
| throttle              | 使用 rafTimeout 实现的节流函数！                                                    | (fn: Function, delay = 300) => any                                                  |
| debounce              | 使用 rafTimeout 实现的防抖函数！                                                    | (fn: Function, delay = 300) => any                                                  |
| add                   | 消除js加减精度问题的加法函数！                                                      | (num1: number, num2: number) => number                                              |
| downloadFile          | 下载文件并自定义文件名！                                                            | (url: string, name: string) => void                                                 |

---
_Source: https://npm.io/package/vue-leiy-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._