lx-framework-utils
快速安装
npm install lx-framework-utils -S
更新到最新版本
npm i lx-framework-utils@latest -S
本地调试安装
// 进入npm模块项目目录
cd lx-framework-utils
npm link
// 进入需要使用npm模块的项目目录
cd my-app
npm link lx-framework-utils
使用方式
- 全局引用
import Vue from 'vue'
import LxFrameworkUtils from 'lx-framework-utils'
Vue.use(LxFrameworkUtils)
// 自动挂载至Vue原型方法,直接this.$[函数名]即可使用
组件&函数介绍
loading
- param
当调用方法
loading.open()
时,可以传一个对象参数,参数中可包含:
-
icon loading展现的图标
- 类型:String
- 默认值:"colorWave"
- 可选值:"colorWave", "circle", "line", "set", "bars"。也可传svg图标,示例:"./assets/icon/loading.svg"
-
size icon图标大小,默认 "px"
- 类型:String || Number
- 默认值:"150px"
-
methods
loading.open()
打开loadingloading.close()
关闭loadingloading.closeAll()
关闭所有loading并移除DOM
moduleIn 模块导入合并处理
-
param
- files 导入文件对象
- 类型: Object
- 必须: 是
- mode 导入模式
- 类型: String
- 默认值: 'object'
- 可选值:
- 'object' 将文件(模块)名作为对象名,文件(模块)内容作为对象值,键值对形式导入
- 'array' 将所有文件(模块)导入合并为一个数组
- 'single' 将所有文件(模块)导入合并为一个对象
- reg 文件匹配正则
- 类型: RegExp || String
- 默认值: 'underlineHead'
- 可选值:
- 'underlineHead' 匹配文件名格式为'_XXX.js'
- 'letterHead' 匹配文件名格式为'XXX.js'
- files 导入文件对象
-
methods
const files = require.context('./files', true, /_\S*\.js/)
const filesObj = moduleIn(files, 'object', 'underlineHead')
const files = require.context('./files', true, /\S*\.js/)
const filesObj = moduleIn(files, 'array', 'letterHead')
locals localStorage 缓存封装
- methods
locals.set(key, value)
设置,value 可以为任意值,无需手动处理locals.get(key)
获取locals.remove(key)
删除
session sessionStorage 缓存封装
- methods
session.set(key, value)
设置,value 可以为任意值,无需手动处理session.get(key)
获取session.remove(key)
删除
SLog sessionStorage日志存储
-
param
-
enable 是否开启日志存储
- 类型: Boolean
- 默认值: process.env.VUE_APP_ENV === 'development'
-
level 日志提示级别
- 类型: Array
- 默认值: [ 'error', 'warn', 'info', 'log' ]
- 示例说明:
- [ 'error' ] 仅存储error类型的日志
- [ 'warn' ] 仅存储warn类型的日志
- [ 'info' ] 仅存储info类型的日志
- [ 'log' ] 仅存储log类型的日志
- [ 'error', 'log' ] 仅存储error,log类型的日志
- 以此类推...
-
logName 日志存储key名
- 类型: String
- 默认值: 'LX-UTILS-LOC-LOGS'
-
logCount 日志存储数量key名
- 类型: String
- 默认值: 'LX-UTILS-LOC-LOGS-COUNT'
-
logMax 日志存储最大数量
- 类型: Number
- 默认值: 10
-
-
methods
// 常规使用
const slog = new SLog()
slog.error('错误信息测试')
slog.warn('信息提示测试')
slog.info('普通信息测试')
slog.log('输出信息测试')
// 参数配置使用
const slog = new SLog({
level: ['error', 'warn']
logMax: 20
})
slog.error('错误信息测试') // 输出成功
slog.warn('信息提示测试') // 输出成功
slog.info('普通信息测试') // 不会输出
slog.log('输出信息测试') // 不会输出
CLog 控制台,彩色日志打印
-
param
- 类型: Object
- 默认值: {}
- 传参示例:
// 全局引入 Vue.use(LxUtils, { clogColorList: { other: '#003400' } }) clog.other('88888') clog.otherBlod('88888')
// 按需引入 import {CLog} from 'lx-utils' const clog = new CLog({other: '#003400'}) clog.other('88888') clog.otherBlod('88888')
-
methods
const clog = new CLog()
clog.red('测试文字')
clog.red('测试多参数', 1200, {name: 'lx', age: 18})
clog.redBlod('测试粗体文字')
clog.redBlod('测试粗体多参数', 1200, {name: 'lx', age: 18})
- 颜色列表
- red: '#e86c55',
- green: '#7bc08c',
- yellow: '#db9f55',
- blue: '#71bef2',
- magenta: '#d290e4',
- cyan: '#66c2cd'
stock 常用JS函数
待补充.
框架核心封装库
request axios请求封装
-
methods
- request(opts) 请求axios函数,opts选项可私有配置
/* * @param {String} baseUrl 默认'/',请求接口基础URL * @param {Number} timeout 默认 30000,请求超时毫秒 * @param {String} loading 可选,默认 'colorWave',请求loading name, 具体请参加 loading 配置 * @param {Function} request 可选,请求前置(发起)处理 * @param {Function} response 可选,请求后置(响应)处理 * @param {Function} onErrorTips 可选,请求错误全局处理 * @param {String} authenMode 可选,请求鉴权模式,可选值"headers","params" * @param {String} authenField 可选,请求鉴权session储存字段名 * @param {Boolean} onlyResData 可选,仅返回响应数据,默认 'true' * @param {String} resDealMode 可选,响应参数处理方式,可选值'all'--全部,'global'--全局,'private'--私有 */
- createApi(apiFiles, request) 根据传入的文件对象生成api列表
/* * @param {Object} apiFiles 必须,api文件,示例: require.context('./apis', true, /_\S*\.js/) * @param {Object} request 必须,axios请求封装函数 * @return { * api: {}, // 生成的每个api请求对象 * list: [] // 生成的api列表,用于输出检测生成api是否正确 * } */
- getRequestUrl(url) 待补充.
router vue-router路由封装
- param
/*
* @param {String} mode 默认'hash',路由模式,可选值'hash','history'
* @param {String} base 默认'/',路由基础路径
* @param {Any} scrollBehavior 默认'() => ({y: 0})'
* @param {Function} beforeEach 可选,路由前置拦截处理
* @param {Function} afterEach 可选,路由后置拦截处理
* @param {Object} routesFile 必须,路由文件对象
* @param {Function} routesBeforeEach 可选,路由列表前置处理函数
* @param {String} authenField 可选,session储存的鉴权字段名
* @param {Function} authenFail 可选,默认'next => next('/login')',鉴权失败后操作
*/