dekon-vue3-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

DeKon Vue3 UI

Install & Use

pnpm i dekon-vue3-ui
# or
npm install dekon-vue3-ui
# or
yarn add dekon-vue3-ui

Import and register component

Global

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

import DeKonVue3UI from 'dekon-vue3-ui'
import 'dekon-vue3-ui/css'

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

Local

<script setup lang="ts">
import { DKButton } from 'dekon-vue3-ui'
import 'dekon-vue3-ui/css'
</script>

Components

Component name	DKDescriptions	Component name	DKDescriptions
DKAlert	警告提示	DKAvatar	头像
DKBackTop	回到顶部	DKBadge	徽标数
DKBreadcrumb	面包屑	DKButton	按钮
DKCard	卡片	DKCarousel	走马灯
DKCascader	级联选择	DKCheckbox	多选框
DKCollapse	折叠面板	DKCountdown	倒计时
DKDatePicker	日期选择	DKDescriptions	描述列表
DKDialog	对话框	DKDivider	分割线
DKDrawer	抽屉	DKEllipsis	文本省略
DKEmpty	空状态	DKFlex	弹性布局
DKGrid	栅格	DKGrid	栅格
DKImage	图片	DKInput	输入框
DKInputNumber	数字输入框	DKMessage	全局提示
DKModal	信息提示	DKNotification	通知提醒
DKNumberAnimation	数值动画	DKPagination	分页
DKPopconfirm	气泡确认框	DKProgress	进度条
DKQRCode	二维码	DKRadio	单选框
DKRate	评分	DKResult	结果
DKSelect	选择器	DKSlider	滑动输入条
DKSpace	间距	DKSpin	加载中
DKStatistic	统计数值	DKSteps	步骤条
DKSwiper	触摸滑动插件	DKSwitch	开关
DKTable	表格	DKTabs	标签页
DKTag	标签	DKTextarea	文本域
DKTextScroll	文字滚动	DKTimeline	时间轴
DKTooltip	文字提示	DKUpload	上传
DKVideo	播放器	DKWaterfall	瀑布流

Functions

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