在线演示

这里提供一些常用方法的在线演示示例。

注意

以下演示需要在浏览器环境中运行。

数字处理

formatNumber 千位格式化

Qilin.Number.formatNumber(123456789)    // '123,456,789'
Qilin.Number.formatNumber(1000)         // '1,000'
Qilin.Number.formatNumber(123)          // '123'

精确运算

解决 JS 浮点数精度问题：

// 传统 JS 运算
0.1 + 0.2     // 0.30000000000000004 ❌

// 使用 qilin-utils
Qilin.Number.addNumber(0.1, 0.2)        // 0.3 ✅
Qilin.Number.multiplyNumber(0.1, 0.2)   // 0.02 ✅
Qilin.Number.divideNumber(0.3, 0.1)     // 3 ✅

---

日期处理

formatDate 日期格式化

const now = new Date()

Qilin.Date.formatDate(now, 'yyyy-MM-dd')        // '2024-01-15'
Qilin.Date.formatDate(now, 'yyyy/MM/dd', '/')   // '2024/01/15'
Qilin.Date.formatDate(now, 'chinese')           // '2024年01月15日'
Qilin.Date.formatDate(now, 'weekDetail')        // '星期一'
Qilin.Date.formatDate(now, 'hh:mm:ss')          // '10:30:45'

日期计算

// 获取7天后的日期
const nextWeek = Qilin.Date.getDateAfterDays(new Date(), 7)

// 获取某月天数
Qilin.Date.getDays(2024, 2)    // 29（闰年）
Qilin.Date.getDays(2023, 2)    // 28

---

字符串处理

// 插入字符串
Qilin.String.insertString('hello', '-', 2)      // 'he-llo'

// 删除字符串
Qilin.String.deleteString('hello', 1, 2)        // 'hlo'

// 替换字符串
Qilin.String.replaceString('hello', 1, 4, 'i')  // 'hio'

// 去除空格
Qilin.String.trimString('  hello  ')            // 'hello'
Qilin.String.trimString('a b c', true)          // 'abc'

---

正则判断

Qilin.Common.judgeRegText('13800138000', 'phone')     // true
Qilin.Common.judgeRegText('test@qq.com', 'email')     // true
Qilin.Common.judgeRegText('#ff0000', 'hex')           // true
Qilin.Common.judgeRegText('京A12345', 'licensePlate') // true
Qilin.Common.judgeRegText('你好世界', 'Chinese')       // true

---

元素操作

// 获取元素尺寸
Qilin.Element.getNodeWidth()               // 页面总宽度
Qilin.Element.getNodeHeight()              // 页面总高度
Qilin.Element.getNodeScrollTop()           // 当前滚动距离

// 类名操作
Qilin.Element.addClass(el, 'active')
Qilin.Element.hasClass(el, 'active')       // true
Qilin.Element.removeClass(el, 'active')

// rem/px 转换
Qilin.Element.remToPx(1)                   // 16（假设 root font-size: 16px）
Qilin.Element.pxToRem(32)                  // 2

---

平台检测

// 设备检测
const device = Qilin.Platform.getDevice()
console.log(device.Mobile, device.iPhone, device.Tablet)

// 浏览器检测
const browser = Qilin.Platform.getBrowser()
console.log(browser.Chrome, browser.Wechat, browser.Safari)

// 系统检测
const os = Qilin.Platform.getOperatingSystem()
console.log(os.Windows, os.IOS, os.HarmonyOS)

---

存储操作

// localStorage
Qilin.Storage.setKeyValueLocalStorage('token', 'abc123')
Qilin.Storage.getValueLocalStorage('token')    // 'abc123'
Qilin.Storage.removeKeyLocalStorage('token')

// sessionStorage
Qilin.Storage.setKeyValueSessionStorage('temp', 'data')
Qilin.Storage.getValueSessionStorage('temp')

---

事件绑定

// 带命名空间绑定
Qilin.Event.on(el, 'click.myApp', handler)

// 精准解绑
Qilin.Event.off(el, 'click.myApp')

// 批量绑定
Qilin.Event.on(el, 'click,mouseenter', handler)

---

文件处理

// File 转 Base64
const base64 = await Qilin.File.getFileBase64(file)

// Base64 转 File
const file = Qilin.File.getBase64File(base64, 'image.png')

// 获取预览 URL
const url = Qilin.File.getFileUrl(file)