Vue中util的工具函数实例详解


Posted in Javascript onJuly 08, 2019

Vue中util的工具函数,下面通过实例代码给大家介绍的非常详细,具体代码如下所示:

// 防抖函数
function debounce (fn, wait) {
let t
return () => {
let context = this
let args = arguments
if (t) clearTimeout(t)
t = setTimeout(() => {
 fn.apply(context, args)
}, wait)
}
}
function flatten (arr) { // 数组扁平化
return arr.reduce((result, item) => {
return result.concat(Array.isArray(item) ? flatten(item) : item)
}, [])
}
function handleMulitePerson (sPerson) {
console.log(44, sPerson.split(','))
if (typeof sPerson == 'string') {
let personArr = []
sPerson.split(',').forEach(item => {
 let obj = { userCode: item.split('/')[0], userName: item.split('/')[1] }
 personArr.push(obj)
})
return personArr
}
}
function uniqueArray (array, key) { // json数组根据key去重
var result = [array[0]]
for (var i = 1; i < array.length; i++) {
var item = array[i]
var repeat = false
for (var j = 0; j < result.length; j++) {
 if (item[key] == result[j][key]) {
  repeat = true
  break
 }
}
if (!repeat) {
 result.push(item)
}
}
return result
}
function setSessionStorage (key, val) {
if (typeof (val) == 'object') {
sessionStorage.setItem(key, JSON.stringify(val))
} else {
sessionStorage.setItem(key, val)
}
}
function getSessionStorage (key) {
return sessionStorage.getItem(key)
}
function removeStorage (key) {
sessionStorage.removeItem(key)
}
function urlParams () { // 获取链接参数
var str = location.search.length > 0 ? location.search.substring(1) : ''
var items = str.length ? str.split('&') : []
var args = {}
var item = null
var name = null
var value = null
for (let i = 0, len = items.length; i < len; i++) {
item = items[i].split('=')
name = decodeURIComponent(item[0])
value = decodeURIComponent(item[1])
if (name.length) {
 args[name] = value
}
};
return args
}
function urlAfterParams () {
var str = window.location.hash.length > 0 ? window.location.hash.substring(window.location.hash.indexOf('?') + 1) : ''
var items = str.indexOf('&') > 0 ? str.split('&') : str.split('?')
var args = {}
var item = null
var name = null
var value = null
for (let i = 0, len = items.length; i < len; i++) {
item = items[i].split('=')
name = decodeURIComponent(item[0])
value = decodeURIComponent(item[1])
if (name.length) {
 args[name] = value
}
};
return args
}
function parseParams (url) {
url = decodeURIComponent(url)
var params = {}
var idx = url.indexOf('?')
if (idx > 0) {
var queryStr = url.substring(idx + 1)
if (queryStr.length > 0) {
 var arr = queryStr.split('&')
 for (let i = 0; i < arr.length; i++) {
  var pair = arr[i].split('=')
  if (pair.length == 2 && pair[0].length > 0) {
   params[pair[0]] = pair[1]
  }
 }
}
}
return params
}
/**
选人下拉框数据:username(userCode)
*/
function getSelectUserName (userName, userCode) {
return userName + '(' + userCode + ')'
}
function getSelectLoginUser () {
var userInfo = getLoginUserInfo()
return getSelectUserName(userInfo.userName, userInfo.userId)
}
function getUserNameBySelectUserName (userName) {
let i = userName.indexOf('(')
return userName.substring(0, i)
}
/**
登录用户信息
userId
userName
mobileNo
@returns {any}
*/
function getLoginUserInfo () {
return JSON.parse(localStorage.getItem('userInfo'))
}
function getLoginUserCode () {
return JSON.parse(localStorage.getItem('userInfo')).userId
}
export default {
getNyr,
getYDate,
setSessionStorage,
urlParams,
urlAfterParams,
parseParams,
debounce,
handleMulitePerson,
uniqueArray,
flatten,
getSessionStorage,
removeStorage,
getSelectUserName,
getSelectLoginUser,
getLoginUserInfo,
getLoginUserCode,
getUserNameBySelectUserName
}

总结

以上所述是小编给大家介绍的Vue中util的工具函数实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
Vue项目中跨域问题解决方案
Jun 05 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 #Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 #Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 #Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 #Javascript
详解django模板与vue.js冲突问题
Jul 07 #Javascript
django中使用vue.js的要点总结
Jul 07 #Javascript
Vue使用lodop实现打印小结
Jul 06 #Javascript
You might like
php 缓存函数代码
2008/08/27 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
Prototype使用指南之selector.js说明
2008/10/26 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
js断点调试经验分享
2017/12/08 Javascript
详解vuex的简单使用
2018/03/12 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
期终自我鉴定
2014/02/17 职场文书
销售助理岗位职责
2014/02/21 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis