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 相关文章推荐
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
node.js爬虫框架node-crawler初体验
Oct 29 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
详解基于 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
如何做到多笔资料的同步
2006/10/09 PHP
PHP函数常用用法小结
2010/02/08 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
超清晰的document对象详解
2007/02/27 Javascript
prototype Element学习笔记(篇一)
2008/10/26 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
jquery实现图片预加载
2015/12/25 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
js实现返回顶部效果
2017/03/10 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
网络工程师的自我评价
2013/10/02 职场文书
大学本科毕业生求职信范文
2013/12/18 职场文书
万年牢教学反思
2014/02/15 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
大连星海广场导游词
2015/02/10 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
团委工作总结2015
2015/04/02 职场文书
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫