安装
// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
// npm init -y
// 安装
npm install uview-ui
// 更新
npm update uview-ui
在main.js全局引入
import uView from 'uview-ui';
Vue.use(uView);
工具函数的使用
1. 函数防抖、节流
/**
* 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
*
* @param {Function} func 要执行的回调函数
* @param {Number} wait 延时的时间
* @param {Boolean} immediate 是否立即执行
* @return null
*/
this.$u.debounce(func, wait = 500, immediate = false)
this.$u.debounce(() => {
alert('防抖')
}, 500)
/**
* 节流原理：在一定时间内，只能触发一次
*
* @param {Function} func 要执行的回调函数
* @param {Number} wait 延时的时间
* @param {Boolean} immediate 是否立即执行
* @return null
*/
this.$u.throttle(func, wait = 500, immediate = true)
this.$u.debounce(() => {
throttle('节流')
}, 500)
2. 对象转url参数
/**
* 对象转url参数
* @param {*} data,对象
* @param {*} isPrefix,是否自动加上"?"
*/
this.$u.queryParams(data = {}, isPrefix = true, arrayFormat = 'brackets')
let test = this.$u.queryParams({a:1,b:2,c:3,d:4})
console.log(test) //输出 ?a=1&b=2&c=3&d=4
3. 路由封装
/**
* 路由跳转方法，该方法相对于直接使用uni.xxx的好处是使用更加简单快捷
* 并且带有路由拦截功能
* options对象内容 {
* type: 'navigateTo',
* url: '',
* delta: 1, // navigateBack页面后退时,回退的层数
* params: {}, // 传递的参数
* animationType: 'pop-in', // 窗口动画,只在APP有效
* animationDuration: 300, // 窗口动画持续时间,单位毫秒,只在APP有效
* intercept: false, // 是否需要拦截
* }
* params 传递的参数
*/
this.$u.route(options = {}, params = {})
this.$u.route({
type: 'navigateTo',
url: 'pages/order/GoodsReturn/index',
params: {a:1,b:2}
})
4. 时间格式化
// 其他更多是格式化有如下:
// yyyy:mm:dd|yyyy:mm|yyyy年mm月dd日|yyyy年mm月dd日 hh时MM分等,可自定义组合
this.$u.timeFormat(dateTime = null, fmt = 'yyyy-mm-dd')
let date = this.$u.timeFormat(new Date())
console.log(date) // 输出 2023-04-13
5. 求两个颜色渐变之间的值
/**
* 求两个颜色之间的渐变值
* @param {string} startColor 开始的颜色
* @param {string} endColor 结束的颜色
* @param {number} step 颜色等分的份额
* */
this.$u.colorGradient(startColor = 'rgb(0, 0, 0)', endColor = 'rgb(255, 255, 255)', step = 10)
let colorList = this.$u.colorGradient('rgb(0, 0, 0)','rgb(255, 255, 255)')
console.log(color) //输出 ["#000000", "#1a1a1a", "#333333", "#4d4d4d", "#666666", "#808080", "#999999", "#b3b3b3", "#cccccc", "#e6e6e6"]
6. 生成全局唯一guid字符串
/**
* 本算法来源于简书开源代码，详见：https://www.jianshu.com/p/fdbf293d0a85
* 全局唯一标识符（uuid，Globally Unique Identifier）,也称作 uuid(Universally Unique IDentifier)
* 一般用于多个组件之间,给它一个唯一的标识符,或者v-for循环的时候,如果使用数组的index可能会导致更新列表出现问题
* 最可能的情况是左滑删除item或者对某条信息流"不喜欢"并去掉它的时候,会导致组件内的数据可能出现错乱
* v-for的时候,推荐使用后端返回的id而不是循环的index
* @param {Number} len uuid的长度
* @param {Boolean} firstU 将返回的首字母置为"u"
* @param {Nubmer} radix 生成uuid的基数(意味着返回的字符串都是这个基数),2-二进制,8-八进制,10-十进制,16-十六进制
*/
this.$u.guid(len = 32, firstU = true, radix = null)
let uuid = this.$u.guid(10)
console.log(uuid) // 输出 upOaeDJn7p
7. 获取主题相关颜色
// ,info|success|warning|primary|default|error
this.$u.color.success
8. 根据type获取图标名称
/**
* 根据主题type值,获取对应的图标
* @param String type 主题名称,primary|info|error|warning|success
* @param String fill 是否使用fill填充实体的图标
*/
this.$u.type2icon(type = 'success', fill = false)
this.$u.type2icon('success')
9. 打乱数组的顺序
this.$u.randomArray(array = [])
let arr = this.$u.randomArray([1,2,3,4,5,6])
console.log(arr) // 输出 [1, 5, 2, 3, 4, 6]
10. 对象和数组的深度克隆
// 深度克隆
this.$u.deepClone(obj)
11. 对象和数组的深度拷贝
// JS对象深度合并
this.$u.deepMerge(target = {}, source = {})
let newObj = this.$u.deepMerge({a:1,b:2,c:3}, {e:1,f:2,g:3})
console.log(newObj) // 输出 {a: 1, b: 2, c: 3, e: 1, f: 2,g:3}
12. 添加单位
// 添加单位，如果有rpx，%，px等单位结尾或者值为auto，直接返回，否则加上rpx单位结尾
this.$u.addUnit(value = 'auto', unit = 'rpx')
let value = this.$u.addUnit(200)
console.log(value) // 输出 200rpx
13. 规则检验
/**
* 验证电子邮箱格式
*/
this.$u.test.email(value)
/**
* 验证手机格式
*/
this.$u.test.mobile(value)
/**
* 验证URL格式
*/
this.$u.test.url(value)
/**
* 验证日期格式
*/
this.$u.test.date(value)
/**
* 验证ISO类型的日期格式
*/
this.$u.test.dateISO(value)
/**
* 验证十进制数字
*/
this.$u.test.number(value)
/**
* 验证整数
*/
this.$u.test.digits(value)
/**
* 验证身份证号码
*/
this.$u.test.idCard(value)
/**
* 是否车牌号
*/
this.$u.test.carNo(value)
/**
* 金额,只允许2位小数
*/
this.$u.test.amount(value)
/**
* 中文
*/
this.$u.test.chinese(value)
/**
* 只能输入字母
*/
this.$u.test.letter(value)
/**
* 只能是字母或者数字
*/
this.$u.test.enOrNum(value)
/**
* 验证是否包含某个值
*/
this.$u.test.contains(value)
/**
* 验证一个值范围[min, max]
*/
this.$u.test.range(value)
/**
* 验证一个长度范围[min, max]
*/
this.$u.test.rangeLength(value)
/**
* 是否固定电话
*/
this.$u.test.landline(value)
/**
* 判断是否为空
*/
this.$u.test.empty(value)
/**
* 是否json字符串
*/
this.$u.test.jsonString(value)
/**
* 是否数组
*/
this.$u.test.array(value)
/**
* 是否对象
*/
this.$u.test.object(value)
/**
* 是否短信验证码
*/
this.$u.test.code(value, len = 6)
14. 对象和数组的深度克隆
// 随机数
this.$u.random(min, max)
15. 去除空格
// 随机数
this.$u.trim(str, pos = 'both')
16. toast提示
// toast提示
this.$u.toast(title, duration = 1500)
17. 获取父组件参数
// 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法
// this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx
this.$u.getParent(name, keys)
18. 获取整个父组件
// 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法
// this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx
// 这里默认值等于undefined有它的含义，因为最顶层元素(
this.$u.$parent(name = undefined)
19. 获取系统信息
this.$u.os() //ios或android
this.$u.sys() //获取系统信息
文章来源地址https://www.toymoban.com/news/detail-790578.html
文章来源：https://www.toymoban.com/news/detail-790578.html
到了这里，关于uview-ui工具函数的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
