44 lines
9.5 KiB
Markdown
44 lines
9.5 KiB
Markdown
## 🌈 介绍
|
||
|
||
基于 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)`<br />`@param {Object} target`：要克隆的目标<br />`@return {Object} result`：结果 |
|
||
| 存储 | `useLocalStorage` | 会话存储 | `useLocalStorage.set(key, value)`: 设置临时缓存<br />`useLocalStorage.get(key)`: 获取临时缓存<br />`useLocalStorage.remove(key)`: 移除临时缓存<br />`useLocalStorage.clear()`: 移除全部临时缓存<br />`@param {String} key`：设置缓存的名称<br />`@param {Any} value`：设置缓存的值 |
|
||
| | `useLocalStorage` | 本地存储 | `useLocalStorage.set(key, value)`: 设置临时缓存<br />`useLocalStorage.get(key)`: 获取临时缓存<br />`useLocalStorage.remove(key)`: 移除临时缓存<br />`useLocalStorage.clear()`: 移除全部临时缓存<br />`@param {String} key`：设置缓存的名称<br />`@param {Any} value`：设置缓存的值 |
|
||
| 函数 | `useDebounce` | 防抖 | `useDebounce(function, time)`<br />`@param {Function} function`：要处理防抖的函数<br />`@param {String,Number} time`：防抖的时间<br />`@return {function}`：防抖的函数 |
|
||
| 日期 | `useDateFormat` | 日期格式 | `useDateFormat(date, [format])`<br />`@param {Date} date`：任何合法的时间格式、秒或毫秒的时间戳<br />`@param {String} format`：时间格式，可选，默认为 YYYY-mm-dd。<br />`@return {String}`：格式好的时间 |
|
||
| 验证 | `usePureNum` | 验证是否为纯数字 | `usePureNum(str)`<br />`@param {String,Number} str`：要验证的字符串或数字<br />`@return {Boolean}`：true / false |
|
||
| | `usePhoneNum` | 验证是手机号 | `usePhoneNum(str)`<br />`@param {String,Number} str`：要验证的手机号<br />`@return {Boolean}`：true / false |
|
||
| | `useEmailNum` | 验证是邮箱号 | `useEmailNum(str)`<br />`@param {String} str`：要验证的字符串<br />`@return {Boolean}`：true / false |
|
||
| | `useEmptyObj` | 验证是空对象 | `useEmptyObj(obj)`<br />`@param {Object} obj`：要验证的对象<br />`@return {Boolean}`：true / false |
|
||
| | `useDataType` | 检查数据类型 | `useDataType(data,[type])`<br />`@param {Any} data`：数据<br />`@param {Type}type`：类型，可选值。<br />如果传了 type 会返回一个布尔值表示 data 是否与 type 类型相等<br />`@return {String,Boolean}`：数据类型或 true / false |
|
||
| 样式 | `useCssVar` | 设置 css 变量 | `useCssVar(key, value)`<br />`@param {String} key`：要设置变量<br />`@param {String} value`：设置的值 |
|
||
| | `useRgbToHex` | hex 颜色转 rgb 颜色 | `useRgbToHex(r, g, b)`<br />`@param {String} r`：红色<br />`@param {String} g`：绿色<br />`@param {String} b`：蓝色<br />`@return {String}`：Hex 值 |
|
||
| | `useHexToRgb` | rgb 颜色转 Hex 颜色 | `useHexToRgb(str)`<br />`@param {String} str`：颜色值字符串<br />`@return {String}`：Rgb 值 |
|
||
| | `useDarkColor` | 加深颜色值 | `useDarkColor(color, level)`<br />`@param {String} color`：颜色值字符串<br />`@param {String} level`：加深的程度，限 0-1 之间<br />`@return {String}`：加深后的颜色 |
|
||
| | `useLightColor` | 变浅颜色值 | `useLightColor(color, level)`<br />`@param {String} color`：颜色值字符串<br />`@param {String} level`：变浅的程度，限 0-1 之间<br />`@return {String}`：变浅后的颜色 |
|
||
| 按键 | `useKeyStroke` | 键盘按下事件 **<br />注: 仅支持如下键 Esc、Tab、<br />BackSpace、Enter、Shift、Ctrl、<br />Alt、Up、Down、Left、Right** | `useKeyStroke(key, fun)`<br />`@param {String} key`：要监听的键<br />`@param {Function} fun`：回调函数 |
|
||
| 方法 | `useRepairZero` | 补零 ( 当数小于 10 在前补零 ) | `useRepairZero(number)`<br />`@param {Number} number`：当前数<br />`@return {Number}`：补零后的数 |
|
||
|
||
### 😊 指令
|
||
|
||
| 方法 | 说明 | 使用 |
|
||
| ------------ | ---------------------- | ----------------------- |
|
||
| `v-isLogin` | 需要登录后可操作的函数 | `v-isLogin="fun"` |
|
||
| `v-throttle` | 节流函数指令 | `v-throttle:1000="fun"` |
|
||
| `v-size-ob` | 监控元素的尺寸变化 | `v-size-ob="fun"` |
|