dekon-vue3-ui

该组件库采用 [email protected] + [email protected] + [email protected] + [email protected] 实现！ 所有组件样式 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 |