1.0.1 • Published 10 months ago

fc-design v1.0.1

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

fc-design

Document & Online preview

Fc-Design

Install

npm install fc-design
# or
pnpm add fc-design
# or
yarn add fc-design
# or
bun add fc-design

Use Components

Global

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

import FcDesign from 'fc-design'
import 'fc-design/css'

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

Local

<script setup lang="ts">
import { Button } from 'fc-design'
import 'fc-design/css'
</script>

Use Functions

<script setup lang="ts">
import {
  dateFormat,
  formatNumber,
  rafTimeout,
  cancelRaf,
  throttle,
  debounce,
  add,
  downloadFile,
  toggleDark,
  useEventListener,
  useMutationObserver,
  useScrollDirection,
  useFps,
  useMediaQuery,
  useResizeObserver
} from 'fc-design'
</script>

Use CDN

<script src="https://unpkg.com/fc-design@latest"></script>

Components

集成elementPlus, 增加内部业务组件

Functions

NameDescriptionType
dateFormat格式化日期时间字符串函数(timestamp: number | string | Date, format = 'YYYY-MM-DD HH:mm:ss') => string
formatNumber数字格式化函数(value: number | string, precision = 2, separator = ',', decimal = '.', prefix = '', suffix = '') => string
rafTimeout使用 requestAnimationFrame 实现的延迟 setTimeout 或间隔 setInterval 调用函数(fn: Function, delay = 0, interval = false) => object
cancelRaf用于取消 rafTimeout 函数(raf: { id: number }) => void
throttle节流函数(fn: Function, delay = 300) => any
debounce防抖函数(fn: Function, delay = 300) => any
add消除 js 加减精度问题的加法函数(num1: number, num2: number) => number
downloadFile下载文件并自定义文件名,未传 name 时,从文件地址中自动提取文件名称(url: string, name: string) => void
toggleDark一键切换暗黑模式函数() => void
useEventListener使用 Vue 的生命周期钩子添加和移除事件监听器(target: HTMLElement | Window | Document, event: string, callback: Function) => void
useMutationObserver使用 MutationObserver 观察 DOM 元素的变化(target: Ref | Ref[] | HTMLElement | HTMLElement[], callback: MutationCallback, options = {}) => object
useScrollDirection实时监测页面滚动方向(throttleDelay: 100) => object
useFps实时监测浏览器刷新率 FPS() => object
useMediaQuery使用媒体查询来判断当前环境是否符合指定的媒体查询条件(mediaQuery: string) => object
useResizeObserver使用 ResizeObserver 观察 DOM 元素尺寸变化(target: Ref | Ref[] | HTMLElement | HTMLElement[], callback: ResizeObserverCallback, options = {}) => object