lyipin-assist v1.0.69
vue-assist
install
Please install Webpack first!
install vma-vue-assist
Using npm:
npm install vma-vue-assist --saveUsing a script tag for global use:
<script type="text/javascript" src="./vma-vue-assist/dist/static/js/vmaAssist.js"></script>Usage
import Vue from 'vue'
import vmaAssist from 'vma-vue-assist'
const options = {...}
Vue.install(vmaAssist, options)options
const options = {
// 全局安装过滤器
filters: {
// 日期格式化
// eg. new Date() | date(format = options.utils.fmt.date.format) => '2018-12-12 12:12:12'
date: true,
// 货币格式化
// eg. 2000 | currency(opts = options.utils.fmt.currency) => '¥2, 000.00'
currency: true,
// 数组/对象取值
// eg. sex | value({man: '男', male: '女'}) => sex = 'man' => '男'
// 或 sex | value(['男', '女']) => sex = 0 => '男'
value: true,
// 图片url补全
// eg. photoUrl | url
url: true,
// 七牛图片显示策略
// eg. photoUrl | imageView2(opts = options.utils.imageView2.params)
imageView2: true
},
plugins: {
axios: {
// 将extend到axios.defaults
defaults: {},
adapters: {
// 缓存adapter，在缓存时间内将不会发起http请求
cache: {
maxAge: 5 * 60 * 1000
}
},
// 所有的拦截器只要配置为false则不启用
interceptor: {
// 支持post/put/patch 的表单提交方式，
// config.contentType = 'application/x-www-form-urlencoded'
applicationForm: true,
// 将请求中的驼峰数据转成下划线格式
// 将转化url、config.params上的参数，非get时转化config.data
// config.dataToUnderline = false 单次禁用
dataToUnderline: true,
// 将请求中的下划线数据转成驼峰格式
// 将转化url、config.params上的参数，非get时转化config.data
// config.dataToHump = false 单次禁用
dataToHump: false,
// 返回数据的下划线转驼峰
// config.responseDataToHump = false 单次禁用
responseDataToHump: true,
// 返回数据的驼峰转下划线
// config.responseDataToUnderline = false 单次禁用
responseDataToUnderline: false,
// 请求错误时，将接口返回的data转下划线
// config.responseErrToUnderline = false 单次禁用
responseErrToUnderline: false,
// 请求错误时，将接口返回的data转驼峰
// config.responseErrToHump = false 单次禁用
responseErrToHump: true,
// 添加随机参数禁用浏览器缓存
disableCache: true,
// 全局错误拦截器
errorHandle: {
handleError(error) {
warn('Please rewrite axios.interceptor.errorHandle.handleError')
return Promise.reject(error)
}
},
// http请求显示加载中
loading: {
// 第一个http请求发起时
showLoader() {
warn('Please rewrite axios.interceptor.loading.showLoader')
},
// 最后一个http请求结束时
hideLoader() {
warn('Please rewrite axios.interceptor.loading.hideLoader')
}
},
// Authorization授权
authorization: {
MAC_ID: '2YotnFZFEjr1zCsicMWpAA',
MAC_KEY: 'mac_key',
decode: true,
getMacKey() {
let macKey = VueCookie.get(this.MAC_KEY) || ''
return this.decode ? decodeURIComponent(macKey) : macKey
}
},
// 移除值为空的数据，config.removeEmpty = true
// 将移除url、config.params上的空值，非get时移除化config.data上的空值
removeEmpty: true,
// 只返回response.data，注：该拦截器必须放置在最后
// 若有需要自定义axios的拦截器则需要关闭该拦截器以获取response对象
returnResponseData: false
}
},
bus: {
// 全局事件总线，跨组件监听/调用，在实例销毁时自动解除事件绑定
// vm.$onBus
// vm.$onceBus
// vm.$offBus 区别于vm.$off，此处不支持解除全部事件，vm在销毁时会自动解除绑定在当前实例上的所有事件
// vm.$emitBus
// [String | Boolean]
prefix: '__BUS__'
}
},
utils: {
// 授权校验配置项，非特例无需修改
authMac: {
requestContentSymbol: '\n',
authMacSymbol: 'MAC',
nonceLen: 8
},
fmt: {
// 日期格式化
date: {
format: 'yyyy-MM-dd hh:mm:ss'
},
// 货币格式化
currency: {
places: 2,
symbol: '￥',
thousand: ', ',
decimal: '.'
},
// 图片域名
imgDomain: ''
},
rand: {
// 随机数的数据模型
model: [
'abcdefghijklmnopqrstuvwxyz',
'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
'1234567890'
]
},
// 七牛图片显示策略
imageView2: {
name: 'imageView2',
params: {
interlace: 1
}
}
}
}utils
1、fmt 格式化相关工具
fmt.date(date, format = options.utils.fmt.date.format)
fmt.dateFormat(date, format)
fmt.currency(money, opt = options.utils.fmt.currency)
fmt.value(key, obj, defaultValue)
fmt.url(url)
fmt.prop(propStr, obj, defaultValue = '')2、type 对象类型
type(obj)
boolean
number
string
function
array
date
regexp
object
error
symbol3、noop 空函数
4、eachOwn(obj, (value, key, obj) => {}) 对象自有属性遍历
5、isDomain 是否为域名
6、compatUrl(url, jsonData) 组合地址栏参数
7、removeEmpty 移除空值
8、decomposeUrl 分解url
return
source
protocol
host
port
hostname
origin
query
params
file
hash
path
uri
segments9、fireKeyEvent(el, evtType, keyCode) 模拟按键事件
10、isAbsoluteUrl(url) 是否为http开头的绝对地址
11、transformContext(expression) 根据vue指令中的expression取得目标值所在的对象和key
12、isApplicationForm(contentType) axios中使用applicationForm的判断依据
13、randText(len) 根据options.utils.rand.model随机生成文本
14、randRange(min, max) 在给定范围内取得随机数
15、strToHump(str) 字符串转驼峰
16、dataToHump(data) 对象属性转驼峰
17、strToUnderline(str) 字符串转下划线
18、dataToUnderline(data) 对象属性转下划线
19、addEventListener(target, eventName, listener) dom添加事件
20、removeEventListener(target, eventName, listener) dom移除事件
21、requireContext(requireContext, excludeObjKeyOrArr = [], flatContext = true) 将require.context读取的模块数组化
22、requireContextToObj(requireContext, excludeObjKeyOrArr = [], flatContext = true) 将require.context读取的模块对象化
23、getAuthMacHeaders({ url, method, macId, macKey }) hmac认证头部信息
24、isParentNode(node, parentNode) 是否为给定节点的父节点
25、imageView2(url, w, h, m = 1, opts = options.utils.imageView2.params) 七牛图片显示策略
26、base64ToBlob(base64Code) base64转blob
27、downloadFile(blob, fileName, clearTime = 10000) blob下载为文件
28、downloadBase64Img(base64Code, fileName, clearTime = 10000) 下载base64图片
29、clearSearch(params)清空查询条件
30、compressImg(file, maxWidth = 128, maxHeight = 128) 压缩图片
31、rotateAngleImg(img, deg, canvas) 旋转图片，只支持90度倍数的旋转
32、readFileAsImg(file) 文件读取为图片
33、fileOrBlobToDataURL(fileOrBlob) 文件/blob转化为base64
34、dataURLToBlob(dataUrl) base64转为blob，同26
35、toArray(arrLike, start = 0) 类数组转数组
36、cipher.encode(str, r) 加密字符串 cipher.decode(str, r) 解密字符串 cipher.encodeJSON(json, r) 加密json cipher.decodeJSON(json, r) 解密json cipher.encodeEnv(env, r) 加密env
37、debounce(fn, delayMilliseconds) 函数防抖
38、throttle(fn, cycleMilliseconds) 函数节流
2 years ago