uview-ui工具函数的使用
- 安装
-
- 在main.js全局引入
-
- 工具函数的使用
-
- 1. 函数防抖、节流
- 2. 对象转url参数
- 3. 路由封装
- 4. 时间格式化
- 5. 求两个颜色渐变之间的值
- 6. 生成全局唯一guid字符串
- 7. 获取主题相关颜色
- 8. 根据type获取图标名称
- 9. 打乱数组的顺序
- 10. 对象和数组的深度克隆
- 11. 对象和数组的深度拷贝
- 12. 添加单位
- 13. 规则检验
- 14. 对象和数组的深度克隆
- 15. 去除空格
- 16. toast提示
- 17. 获取父组件参数
- 18. 获取整个父组件
- 19. 获取系统信息
安装
npm install uview-ui
npm update uview-ui
在main.js全局引入
import uView from 'uview-ui';
Vue.use(uView);
工具函数的使用
1. 函数防抖、节流
this.$u.debounce(func, wait = 500, immediate = false)
this.$u.debounce(() => {
alert('防抖')
}, 500)
this.$u.throttle(func, wait = 500, immediate = true)
this.$u.debounce(() => {
throttle('节流')
}, 500)
2. 对象转url参数
this.$u.queryParams(data = {}, isPrefix = true, arrayFormat = 'brackets')
let test = this.$u.queryParams({a:1,b:2,c:3,d:4})
console.log(test)
3. 路由封装
this.$u.route(options = {}, params = {})
this.$u.route({
type: 'navigateTo',
url: 'pages/order/GoodsReturn/index',
params: {a:1,b:2}
})
4. 时间格式化
this.$u.timeFormat(dateTime = null, fmt = 'yyyy-mm-dd')
let date = this.$u.timeFormat(new Date())
console.log(date)
5. 求两个颜色渐变之间的值
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)
6. 生成全局唯一guid字符串
this.$u.guid(len = 32, firstU = true, radix = null)
let uuid = this.$u.guid(10)
console.log(uuid)
7. 获取主题相关颜色
this.$u.color.success
8. 根据type获取图标名称
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)
10. 对象和数组的深度克隆
this.$u.deepClone(obj)
11. 对象和数组的深度拷贝
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)
12. 添加单位
this.$u.addUnit(value = 'auto', unit = 'rpx')
let value = this.$u.addUnit(200)
console.log(value)
13. 规则检验
this.$u.test.email(value)
this.$u.test.mobile(value)
this.$u.test.url(value)
this.$u.test.date(value)
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)
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)
this.$u.test.range(value)
this.$u.test.rangeLength(value)
this.$u.test.landline(value)
this.$u.test.empty(value)
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提示
this.$u.toast(title, duration = 1500)
17. 获取父组件参数
this.$u.getParent(name, keys)
18. 获取整个父组件
this.$u.$parent(name = undefined)
19. 获取系统信息
this.$u.os()
this.$u.sys()