## 🌈 介绍
基于 vue3.x + CompositionAPI setup 语法糖 + vite + element plus + vue-router-next + pinia 技术的后台开源免费模板，希望减少工作量，实现快速开发，此项目为 JS 非 TS 版本。
### 🏭 环境支持
| Edge | Firefox | Chrome | Safari |
| --------- | ------------ | ----------- | ----------- |
| Edge ≥ 88 | Firefox ≥ 78 | Chrome ≥ 87 | Safari ≥ 13 |
> 由于 Vue3 不再支持 IE11，故而 ElementPlus 也不支持 IE11 及之前版本。
### 😉 hooks
> 依赖 ElementPlus，方法提示均使用 ElMessage
| 说明 | 方法 | 说明 | 使用 |
| ---- | ------------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 数据 | `useDeepClone` | 深度克隆 | `const result = useDeepClone(target)`
`@param {Object} target`：要克隆的目标
`@return {Object} result`：结果 |
| 存储 | `useLocalStorage` | 会话存储 | `useLocalStorage.set(key, value)`: 设置临时缓存
`useLocalStorage.get(key)`: 获取临时缓存
`useLocalStorage.remove(key)`: 移除临时缓存
`useLocalStorage.clear()`: 移除全部临时缓存
`@param {String} key`：设置缓存的名称
`@param {Any} value`：设置缓存的值 |
| | `useLocalStorage` | 本地存储 | `useLocalStorage.set(key, value)`: 设置临时缓存
`useLocalStorage.get(key)`: 获取临时缓存
`useLocalStorage.remove(key)`: 移除临时缓存
`useLocalStorage.clear()`: 移除全部临时缓存
`@param {String} key`：设置缓存的名称
`@param {Any} value`：设置缓存的值 |
| 函数 | `useDebounce` | 防抖 | `useDebounce(function, time)`
`@param {Function} function`：要处理防抖的函数
`@param {String,Number} time`：防抖的时间
`@return {function}`：防抖的函数 |
| 日期 | `useDateFormat` | 日期格式 | `useDateFormat(date, [format])`
`@param {Date} date`：任何合法的时间格式、秒或毫秒的时间戳
`@param {String} format`：时间格式，可选，默认为 YYYY-mm-dd。
`@return {String}`：格式好的时间 |
| 验证 | `usePureNum` | 验证是否为纯数字 | `usePureNum(str)`
`@param {String,Number} str`：要验证的字符串或数字
`@return {Boolean}`：true / false |
| | `usePhoneNum` | 验证是手机号 | `usePhoneNum(str)`
`@param {String,Number} str`：要验证的手机号
`@return {Boolean}`：true / false |
| | `useEmailNum` | 验证是邮箱号 | `useEmailNum(str)`
`@param {String} str`：要验证的字符串
`@return {Boolean}`：true / false |
| | `useEmptyObj` | 验证是空对象 | `useEmptyObj(obj)`
`@param {Object} obj`：要验证的对象
`@return {Boolean}`：true / false |
| | `useDataType` | 检查数据类型 | `useDataType(data,[type])`
`@param {Any} data`：数据
`@param {Type}type`：类型，可选值。
如果传了 type 会返回一个布尔值表示 data 是否与 type 类型相等
`@return {String,Boolean}`：数据类型或 true / false |
| 样式 | `useCssVar` | 设置 css 变量 | `useCssVar(key, value)`
`@param {String} key`：要设置变量
`@param {String} value`：设置的值 |
| | `useRgbToHex` | hex 颜色转 rgb 颜色 | `useRgbToHex(r, g, b)`
`@param {String} r`：红色
`@param {String} g`：绿色
`@param {String} b`：蓝色
`@return {String}`：Hex 值 |
| | `useHexToRgb` | rgb 颜色转 Hex 颜色 | `useHexToRgb(str)`
`@param {String} str`：颜色值字符串
`@return {String}`：Rgb 值 |
| | `useDarkColor` | 加深颜色值 | `useDarkColor(color, level)`
`@param {String} color`：颜色值字符串
`@param {String} level`：加深的程度，限 0-1 之间
`@return {String}`：加深后的颜色 |
| | `useLightColor` | 变浅颜色值 | `useLightColor(color, level)`
`@param {String} color`：颜色值字符串
`@param {String} level`：变浅的程度，限 0-1 之间
`@return {String}`：变浅后的颜色 |
| 按键 | `useKeyStroke` | 键盘按下事件 **
注: 仅支持如下键 Esc、Tab、
BackSpace、Enter、Shift、Ctrl、
Alt、Up、Down、Left、Right** | `useKeyStroke(key, fun)`
`@param {String} key`：要监听的键
`@param {Function} fun`：回调函数 |
| 方法 | `useRepairZero` | 补零 ( 当数小于 10 在前补零 ) | `useRepairZero(number)`
`@param {Number} number`：当前数
`@return {Number}`：补零后的数 |
### 😊 指令
| 方法 | 说明 | 使用 |
| ------------ | ---------------------- | ----------------------- |
| `v-isLogin` | 需要登录后可操作的函数 | `v-isLogin="fun"` |
| `v-throttle` | 节流函数指令 | `v-throttle:1000="fun"` |
| `v-size-ob` | 监控元素的尺寸变化 | `v-size-ob="fun"` |