0.0.2 • Published 5 months ago

vue-super-ui v0.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

vue-super-ui

该组件库采用 Vue@3.3.4+ TypeScript@5.2.2 + Vite@4.4.11 + Less@4.2.0 实现! 所有组件样式 CSS 均使用 box-sizing: border-box; 模式! 目前共有 52 个常用基础 UI 组件,以及 11 个常用工具函数,并且持续探索更新中...! 开箱即用!

Document & Online preview

Vue Super UI

Install & Use

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

Import and register component

Global

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

import VueSuperUI from 'vue-super-ui'
import 'vue-super-ui/css'

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

Local

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

Use CDN in Project

<script src="https://unpkg.com/vue-super-ui@latest"></script>

Project

  • Get the project code
git clone https://github.com/clearself/vue-super-ui.git
  • Install dependencies
cd vue-super-ui

pnpm i
  • Run project
pnpm dev

Components

Component nameDescriptionsComponent nameDescriptions
Alert警告提示Avatar头像
BackTop回到顶部Badge徽标数
Breadcrumb面包屑Button按钮
Card卡片Carousel走马灯
Cascader级联选择Checkbox多选框
Collapse折叠面板Countdown倒计时
DatePicker日期选择Descriptions描述列表
Dialog对话框Divider分割线
Drawer抽屉Ellipsis文本省略
Empty空状态Grid栅格
Image图片Input输入框
InputNumber数字输入框Message全局提示
Modal信息提示Notification通知提醒
NumberAnimation数值动画Pagination分页
Popconfirm气泡确认框Progress进度条
QRCode二维码Radio单选框
Rate评分Result结果
Select选择器Slider滑动输入条
Space间距Spin加载中
Statistic统计数值Steps步骤条
Swiper触摸滑动插件Switch开关
Table表格Tabs标签页
Tag标签Textarea文本域
TextScroll文字滚动Timeline时间轴
Tooltip文字提示Upload上传
Video播放器Waterfall瀑布流

Details

My CSDN Blogs

Functions

Function nameDescriptionsArguments
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
formatNumber数字格式化函数!(value: number | string, precision = 2, separator = ',', decimal = '.', prefix = '', suffix = '') => string
toggleDark一键切换暗黑模式函数!() => void