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 相关文章推荐
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
JS面向对象编程浅析
Aug 28 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 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通用检测函数集合
2011/02/08 PHP
PHP实现变色验证码实例
2014/01/06 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
php实现的xml操作类
2016/01/15 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
Python使用re模块实现信息筛选的方法
2018/04/29 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
python实现随机漫步方法和原理
2019/06/10 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
2014年教师学期工作总结
2014/11/08 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
紧急迫降观后感
2015/06/15 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python