vue-leiy-ui

vue-leiy-ui

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

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

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) 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 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.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint

vue-leiy-ui

Document & Online preview

Vue Leiy UI

Install & Use

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

Import and register component

Global

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

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

Project

• Get the project code

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

• Install dependencies

cd vue-leiy-ui

pnpm i

• Run project

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

Functions

Function name	Descriptions	Arguments
dateFormat	简单易用的日期格式化函数！	(timestamp: number|string|Date, format = 'YYYY-MM-DD HHss') => 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