1.0.7 • Published 6 months ago
vue-leiy-ui v1.0.7
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:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensions
from VSCode's command palette - Find
TypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Run
- 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
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
Functions
Function name | Descriptions | Arguments |
---|---|---|
dateFormat | 简单易用的日期格式化函数! | (timestamp: number|string|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 |