webTools 简易工具

web 小工具

安装

npm i -S @stroll/web-tools

import {
  DTC, // 数字转汉字
  jsonTreat, // 参数过滤
  textTip, // 简易提示
  SDrag, // vue3 拖拽弹窗
  isFullscreen, // 是否支持全屏
  launchIntoFullscreen, // 全屏
  exitFullscreen, // 退出全屏
  isElementFullScreen, // 全屏状态
  screenChange, // 监听变化
  setSession, // 设置 session
  getSession, // 获取 session
  pushSession, // 更新 session
  WebSocketClass, // 长连接
  DB, // indexedDB 浏览器数据库
  windowHeight, // 窗口高度
  SEl, // 元素属性
  webRTC, // 暂未实现
} from '@stroll/web-tools'

// 数字转汉字
// num 比传参数,需要转换的数字
DTC(num)

// 数组去重
dedupe(arr)

// 简易提示
// str 提示文案，默认 '未知错误',
// t显示时间，单位毫秒，默认 2000,
// tipStyle 提示框样式,
// fn 提示框消失后的回调
textTip({ str, t, tipStyle, fn })

// 获取操作系统
detectOS()

// 参数过滤
// 只传第一个参，返回参数的所有key
// 传两个参数，把第二个参数合并到第一个里
// 第三个参数，第二个参数需要过滤调的key
// 前两个参数为json对象，第三个为数组
jsonTreat(jsonObjA, jsonObjB, arr)

// 指定长度随即字符串
// len 数字，要生成的长度，默认 30
randomString(len)

// 设置session
// name 参数 session 的 key
// obj 参数 session 的 value
setSession({ name }, obj)

// 获取session
// name 参数 session 的 key
getSession({ name })

// 更新session
// name 参数 session 的 key
// arr 参数 需要更新的 key
// obj 参数 需要更新的
pushSession({ name, arr }, obj = {})

// Promise WebSocket
// class WebSocketClass {
//   // 。。。
// }

const websocketUrl = 'ws://localhost:9000/websocket',
let CreateWebSocket = null


// new 一个 WebSocket
// websocketUrl 发送的地址
this.CreateWebSocket = new WebSocketClass(this.websocketUrl)

// send 发送给后端的数据
// res 接受后端返回的数据
this.CreateWebSocket.open({ send: 'send' }).then(res => {
  console.log(res)
})

// ee 发送给后端的数据
// res 接受后端返回的数据
this.CreateWebSocket.send('ee').then(res => {
  console.log(res)
})

// res 成功与失败 信息
this.CreateWebSocket.close().then(res => {
  console.log(res)
})

/**
 * 监听元素变化，元素变化或窗口变化(可能存在兼容问题)
 * @param el: string|Element|ref
 * - 如果是字符串，可以是 id或class, 例：#id 或 .class
 * - 也可以是元素本身或vue的ref元素 
 * @param fn: Function(entries, observer)
 * - entries: 变化后的属性
 * - observer: 监听实例
 */
const elChange = new elObserve(el, (entries, observer) => {})
// 开始
elChange.start()
// 结束
elChange.end()
// OR
// 实例化并开始
const elChange = elObserve.start(el, (entries, observer) => {})
// 结束
elChange.end()

/**
 * 只监听元素变化，应窗口变化导致元素变化不在监听内
 * @param el: string|Element|ref
 * - 如果是字符串，可以是 id或class, 例：#id 或 .class
 * - 也可以是元素本身或vue的ref元素 
 * @param fn: Function(entries, observer)
 * - entries: 变化后的属性
 * - observer: 监听实例
 */
const elChange = new observeEl(el, (entries, observer) => {})
// 开始
elChange.start()
// 结束
elChange.end()
// OR
// 实例化并开始
const elChange = observeEl.start(el, (entries, observer) => {})
// 结束
elChange.end()

/**
 * 监听窗口变化
 * @param fn: Function({windowHeight: number, windowWidth: number, type: 'window'})
 */
const elChange = new resize(({windowHeight, windowWidth, type}) => {})
// 开始
elChange.start()
// 结束
elChange.end()
// OR
// 实例化并开始
const elChange = resize.start(({windowHeight, windowWidth, type}) => {})
// 结束
elChange.end()

/**
 * 监听窗口或元素变化(可能会多次调用)
 * @param el: string|Element|ref
 * - 如果是字符串，可以是 id或class, 例：#id 或 .class
 * - 也可以是元素本身或vue的ref元素 
 * @param fn: Function(entries|{windowHeight: number, windowWidth: number, type: 'window'}, observer)
 * - entries: 变化后的属性
 * - observer: 监听实例
 */
const elChange = new elResize(el, (entries, observer) => {})
// 开始
elChange.start()
// 结束
elChange.end()
// OR
// 实例化并开始
const elChange = elResize.start(el, (entries, observer) => {})
// 结束
elChange.end()