移动端公用方法

1、axios 接口请求

/**
 * get请求方法
 * @param {String} url 接口
 * @param {Object} param  请求参数
 * @param {function} data 成功回调
 * @param {function} error 失败回调
 */
this.$get( url, param, data => {}, error => {})

/**
 * post请求方法
 * @param {String} url 接口
 * @param {Object} param  请求参数
 * @param {function} data 成功回调
 * @param {function} error 失败回调
 */
this.$get( url, param, data => {}, error => {})

2、axios 接口同步请求

/**
 * post请求方法
 * @param {String} url 接口
 * @param {Object} param  请求参数
 * @param {Boolean} isMsg 是否提示错误消息
 */
this.$postSync( url, param, isMsg)

/**
 * get请求方法
 * @param {String} url 接口
 * @param {Object} param  请求参数
 * @param {Boolean} isMsg 是否提示错误消息
 */
this.$getSync( url, param, isMsg)


// 用法， 方法前加async， 接口请求前面加await， res为接口返回参数
async loadList () {
    let res1 = await this.$postSync(api)
    let res2 = await this.$postSync(api)
}

3、通过经纬度计算距离（百度map）

/**
 * 通过经纬度获取距离
 * @param {Object} p1 经纬度, 必填,例: {lat: 12223.222, lgt: 132.233}
 * @param {Object} p2 经纬度，选填，不填则自动获取当前位置的经纬度
 * @return String 距离，单位米
 */
this.$getDistance(p1, p2)

4、downloadFile 下载文件

/**
 * 下载文件
 * @param {String} api 接口
 * @param {Object} params 请求参数
 * @param {String} fileName 文件名
 */
this.$downloadFile(api, params, fileName) 

5、dayjs 日期格式化

/**
 * 日期格式化
 * @param {String} 要格式化的日期
 * @param {String} 格式化
 * @return {String} 格式化后的日期
 */
this.$dayjs(param).format('YYYY-MM-DD HH:mm:ss')

// 更多使用方法请参考
https://www.cnblogs.com/cjrfan/p/9154539.html

6、debounce 防抖函数

/**
 * 防抖函数
 * @param {function} fn 函数
 * @param {number} delay 延迟
 */
this.$debounce(fn) 

// 用法
loadList: window.Vue.prototype.$debounce(function () {
	this.$refs.table.loadList()
})

7、throttle 节流函数

/**
 * 节流函数
 * @param {function} fn 函数
 * @param {number} delay 延迟
 */
this.$throttle(fn)


//用法
loadList: window.Vue.prototype.$throttle(function () {
	this.$refs.table.loadList()
})

8、deepClone 深拷贝

/**
 * 深拷贝对象
 * @param {Object} obj 拷贝对象
 * @retrun Object
 */
this.$deepClone(obj)

9、typeOf 类型判断

/**
 * 判断类型
 * @param {any} 数据 
 * @return {String} 类型
 */
this.$typeOf(data)

10、金额格式化

/**
 * 金额格式化
 * 参数说明：
 * @param {number} number：要格式化的数字
 * @param {number} decimals：保留几位小数
 * @param {string} dec_point：小数点符号,默认为点 “.”
 * @param {string} thousands_sep：千分位符号,默认为逗号 “,”
 * */
this.$moneyFormat(number, decimals, dec_point, thousands_sep)

11、存储操作

将 localStorage、sessionStorage 的常规操作进行封装，方便使用

• localStorage

this.$localCache.getItem('user')
this.$localCache.setItem('name','张三')
this.$localCache.removeItem('token')
this.$localCache.clear()

• sessionStorage

this.$sessionCache.getItem('user')

其余用法同 localCache

12、数组对象根据字段去重

/**
 * @param {Array} arr 数组
 * @param {String} key 根据去重的字段名,默认为 id
 * @return {Array} 去重后的数组
 */
this.$uniqueArrayObject(list,'id')

13、遍历树节点

/**
 * 遍历树节点
 * @param {Array} list 树节点数组
 * @param {Function} callback 回调函数
 * @param {string} childrenName 指定子树为节点对象的某个属性值，默认为 children
 */
this.$foreachTree(treeData,(item)=>{
    // 对指定节点进行操作
    console.log(item)
},'children')

示例：

例如查找 id 为7的节点

const treeData = [{
  id: 1,
  label: '一级 1',
  children: [{
    id: 4,
    label: '二级 1-1',
    children: [{
      id: 9,
      label: '三级 1-1-1'
    }, {
      id: 10,
      label: '三级 1-1-2'
    }]
  }]
 }, {
  id: 2,
  label: '一级 2',
  children: [{
    id: 5,
    label: '二级 2-1'
  }, {
    id: 6,
    label: '二级 2-2'
  }]
  }, {
    id: 3,
    label: '一级 3',
    children: [{
      id: 7,
      label: '二级 3-1'
    }, {
      id: 8,
      label: '二级 3-2'
    }]
}],

let result
this.$foreachTree(treeData, (item) => {
  if (item.id === 9) {
    result = item
  }
})
console.log('result', result)  // {id: 7, label: "二级 3-1"}   

14、微前端子应用路由跳转

/**
 * 微前端子应用路由跳转
 * @param {String} url 路由
 * @param {Object} mainRouter 主应用路由实例（例如this.$store.state.router）
 * @param {Object} params 路由传参参数,可为空
 */
this.$qiankunJump(url, this.$store.state.router)

15 模糊搜索

/**
 * 模糊搜索
 * @param {Array} list 搜索列表数据
 * @param {String} keyWord 搜索的关键字
 * @param {String} attribute 搜索 item 字段名
 * @returns {Array} 搜索过滤后数据
 */
this.$fuzzyQuery(list,keyWord,attribute)