2021-12-12

2021SC@SDUSC
智能研究中心快递柜学习笔记12

props-utils.js对"ant-design-vue/es/_util/props-util.js" 文件做出特殊修改
style和 静态风格可以共存

let style = data.style || {}
  let staticStyle = data.staticStyle
  staticStyle = staticStyle ? objectCamelize(data.staticStyle) : {}

Util.js

常用的JavaScript包，轻量基础库、方法库，用时可直接拷贝，拆卸式使用，适用于mobile端简单页面，适用于PC简单页面，基于node、php等多种构建方法。
Util.js文件包含了一些工具函数，来帮助人们使用JavaScript数据（例如从服务器返回的数据）来更新Web页面。可以再DWR框架以外使用它，因为它不依赖于DWR的其他部分，并可以下载整个DWR框架或者单独下载。
Util.js文件包含了下面几个基本函数，分别为getValue[s](), setValue[s](), getText(), addRows(), removeAllRows(). addoptions()和removeAllOptions()。其中getValuess函数可以操作大部分HTML页面元素（除了table， list和image）； getText()函数可以操作select list, 要修改table可以用addRows()和removeAllRows()函数；要修改列表（select列表和ul、ol列表）可以用addOptions()和removeAllOptions()函数。
过滤对象为空的属性

export function filterObj(obj) {
  if (!(typeof obj == 'object')) {
    return;
  }

  for ( let key in obj) {
    if (obj.hasOwnProperty(key)
      && (obj[key] == null || obj[key] == undefined || obj[key] === '')) {
      delete obj[key];
    }
  }
  return obj;
}

时间格式化
生成首页路由
生成嵌套子路由
深度克隆对象、数组
随机生成数字
随机生成字符串 @param length 字符串的长度@param chats 可选字符串区间（只会生成传入的字符串中的字符）@return string 生成的字符串

export function randomString(length, chats) {
  if (!length) length = 1
  if (!chats) chats = '0123456789qwertyuioplkjhgfdsazxcvbnm'
  let str = ''
  for (let i = 0; i < length; i++) {
    let num = randomNumber(0, chats.length - 1)
    str += chats[num]
  }
  return str
}

随机生成uuid
export function randomUUID() {
let chats = ‘0123456789abcdef’
return randomString(32, chats)
}
下划线转驼峰，判断是否显示办理按钮等函数

增强css，可以在页面上输出全局css
@param css 要增强的css
@param id style标签的id，可以用来清除旧样式

export function cssExpand(css, id) {
  let style = document.createElement('style')
  style.type = "text/css"
  style.innerHTML = `@charset "UTF-8"; ${css}`
  // 清除旧样式
  if (id) {
    let $style = document.getElementById(id)
    if ($style != null) $style.outerHTML = ''
    style.id = id
  }
  // 应用新样式
  document.head.appendChild(style)
}

用于js增强事件，运行JS代码，可以传参
options 所需参数：
参数名 类型 说明
vm VueComponent vue实例
event Object event对象
jsCode String 待执行的js代码
errorMessage String 执行出错后的提示（控制台）

// 创建script标签
  const script = document.createElement('script')
  // 将需要传递的参数挂载到window对象上
  window[windowKeyName]['EVENT_' + id] = {
    vm: options.vm,
    event: options.event,
    // 当执行完成时，无论如何都会调用的回调事件
    done() {
      // 执行完后删除新增的 script 标签不会撤销执行结果（已产生的结果不会被撤销）
      script.outerHTML = ''
      delete window[windowKeyName]['EVENT_' + id]
    },
    // 当js运行出错的时候调用的事件
    error(e) {
      console.group(`${options.errorMessage || '用户自定义JS增强代码运行出错'}（${new Date()}）`)
      console.error(e)
      console.groupEnd()
    }
  }
  // 将事件挂载到document中
  script.innerHTML = code
  document.body.appendChild(script)
}

vue + validate 表单校验
validate.js文件定义需要验证的方法
在所需要的页面中引入这个文件
在用于校验的rules中使用它
定义了邮箱、手机号码、电话号码、url地址四类