lx-framework-utils v0.5.3

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() 打开loading loading.close() 关闭loading loading.closeAll() 关闭所有loading并移除DOM

moduleIn 模块导入合并处理

• param

  • files 导入文件对象
    • 类型: Object
    • 必须: 是
  • mode 导入模式
    • 类型: String
    • 默认值: 'object'
    • 可选值:
      • 'object' 将文件(模块)名作为对象名，文件(模块)内容作为对象值，键值对形式导入
      • 'array' 将所有文件(模块)导入合并为一个数组
      • 'single' 将所有文件(模块)导入合并为一个对象
  • reg 文件匹配正则
  • 类型: RegExp || String
  • 默认值: 'underlineHead'
  • 可选值:
    • 'underlineHead' 匹配文件名格式为'_XXX.js'
    • 'letterHead' 匹配文件名格式为'XXX.js'

• 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')'，鉴权失败后操作
 */