@yujinpan/common-modules

Common modules.

Usage no npm install needed!

<script type="module">
  import yujinpanCommonModules from 'https://cdn.skypack.dev/@yujinpan/common-modules';
</script>

README

common-modules

Common modules.

Usage

Install

npm install --save @yujinpan/common-modules

Require element-ui

If your project does not use element-ui, you need to introduce a separate element-ui package, like this:

import '@yujinpan/common-modules/lib/element-ui';

Global registration

import Vue from 'vue';
import CM from '@yujinpan/common-modules';
import '@yujinpan/common-modules/dist/styles/index.css';

Vue.use(CM);

In-component registration

import { CMForm } from '@yujinpan/common-modules';
import '@yujinpan/common-modules/dist/styles/index.css';

export default {
  components: {
    CMForm
  }
};

Components

Directives

  • CMProgress 加载进度条
  • CMShadowDom 阴影 DOM

Filters

  • index
    • CMDate 时间日期格式化
    • CMInt 转换为整数
    • CMNumFixed 保留小数点
    • CMSliceStr 剪切字符串

Utils

  • array
    • toArray 转换为数组
    • toFlatArray 二维数组转换为平级数组
    • toMap 转换为 Map 结构
    • toGroupMap 转换为分组的 Map 结构
    • deDup 去重
    • deDupByKey 根据数组子项的键名去重
    • swapItem 交互数组的两项
    • compareArrayChanges 对比数组的更改
    • createArray 创建数组
  • browser
    • isIE 是否为 IE 浏览器
    • triggerResize 触发浏览器的 resize 事件
  • business
    • getVisibleData 获取展示的数据
    • toFormData 转换为 FormData 数据
    • getConfirmText 获取确认文本
    • handlePromise 处理异步操作
  • class
    • classMixin 类的混入
  • date
    • getDateTimeStr 获取日期时间字符串
    • isTimeStamp 是否为时间戳
    • getTimeStampByDay 获取 n 天后的当前时间的时间戳
    • getMicrosecondByDay 获取 n 天的微秒
    • getOverTime 获取剩余时间
    • getDuration 获取时长
    • getDurationStr 获取时长文本
  • dictionary
    • getLabel 获取字典值对应的别名
    • Dictionary 字典类
  • dom
    • getStyle 获取样式
    • hasPosition 判断使用使用了定位属性
    • addListener 监听事件
    • unsetTransitionMoment 短时间内禁用 transition 过渡样式（解决部分情况过渡异常触发问题）
  • element
    • getButtonGroupWidth 获取按钮组的宽度
    • prompt 确认表单输入框
    • promptForm 确认表单输入内容
    • ElFormInheritProps ElForm 的继承属性
    • ElFormChangeEvent ElForm 的修改事件
    • ElFormControlBase ElForm 的控件基类
  • file
    • downloadByUrl 下载文件地址
    • downloadByCanvas 下载 canvas
    • downloadByContent 下载文本内容
    • downloadByJSON 下载 JSON 对象
    • downloadByBlob 下载 Blob 对象
    • readTextFile 读取文本文件
    • readJSONFile 读取 JSON 文件
  • form
    • getFormRules 获取表单规则
    • validateForm 校验表单
    • getFormDefaultModel 获取表单数据的默认值对象
    • getFormItemDefaultValue 获取表单项的默认值
    • getFormLabelWidth 获取表单的 labelWidth
  • format
    • getValueByKeyPath 获取字符串的键值 obj['a.b.c'] = obj.a.b.c
    • objToArray 对象序列化
    • fillZero 补零
    • getValidValue 获取有效值
    • toSliceStr 截取文本
    • getStrLen 获取字符串长度
  • function
    • onceAsync 执行一次（异步）
    • once 执行一次
    • getCompoundAsyncVal 获取复合类型的值（异步）
    • getCompoundSyncVal 获取复合类型的值（同步）
  • local-data
    • LocalData 本地缓存类
    • LocalDataMap 本地缓存类 - Map 结构
  • message
    • printInfo 打印信息
    • printInfoStyle 打印带样式的信息
    • showMessage 弹出提示
    • getErrorStr 获取错误信息字符串
    • getErrorAlias 获取报错信息别名
    • updateErrorAliasMap 更新错误信息别名
  • noop
    • noop 空函数
  • number
    • numToFixed 保留小数位 n 位
    • numToThousand 转换为千位分隔符形式
    • toInt 转换为数字整型
  • object
    • mergeProps 合并有效的属性（改变源）
    • getValidProps 获取有效的属性（不改变源）
    • propsPick 对象属性摘取
    • propsOmit 对象属性删除
    • propsFilter 对象属性过滤
  • permission
    • permissionRouterLoad 加载权限路由
    • permissionRouterGuard 权限路由守卫
    • permissionRoutesFilter 权限菜单过滤
    • hasPermission 判断路由是否有权限
  • progress
    • Progress 进度条
  • reg-exp
    • REG_EXP_DOUBLE_BYTE 双字节正则（中文）
  • request
    • request axios.request 请求方法
    • createRequest 创建请求实例
    • postDataTransform post 请求头转换
    • REQUEST_PARAMS_SERIALIZER_REPEAT 请求参数序列化方法 - repeat 模式
    • REQUEST_HEADERS_JSON 请求头 - json 格式
  • router
    • routerLoadProgress 路由加载进度条
  • unit
    • transformInformationUnit 转换信息单位
  • url
    • getUrlInfo 获取链接信息
    • getUrlParams 获取链接参数（非 hash 参数）
    • getUrlOrigin 获取链接 origin 地址
    • getUrlHost 获取链接 host 地址
    • getUrlProtocol 获取链接协议
    • getUrlPort 获取链接端口
    • getUrlPathname 获取链接路径名
    • getUrlSearch 获取链接查询值
    • getUrlHash 获取链接 hash 值
    • getUrlHashParams 获取链接 hash 参数
    • addParamsToUrl 添加参数到地址上
    • getBaseUrl 获取基础地址
  • validate
    • isValidArray 校验数组是否有效
    • isValidValue 校验一个简单值
  • vue
    • banVueObservable 禁用 vue 的响应式封装
    • isValidVNode 是否为有效节点
  • webpack
    • getModulesByRequireContext 获取路径下所有模块

Classes

  • Activable 可激活对象
  • FullScreen 全屏交互
  • HistoryRecord 历史记录类
  • Observable 可观察对象
  • ObservableArray 可观察对象 - 数组
  • ObservableObject 可观察对象 - 对象
  • ReactiveState 响应式状态（可响应式，可监听）

Styles

  • dist
    • components 组件样式
    • theme 主题样式
    • base.css 基础样式
    • common-variables.scss 公共的变量
    • element-ui.css element-ui 的定制样式
    • index.css 入口样式类
    • mixins.scss 公共混入
    • public.scss 公共样式类（组件依赖）

暗黑风格

// 暗黑主题文件
@import "@yujinpan/common-modules/dist/styles/theme/dark.scss";

// 这里自定义主题（更多变量在 ~element-ui/packages/theme-chalk/src/common/var 中查看）
$--color-primary: pink;

// 主要样式文件
@import "@yujinpan/common-modules/dist/styles/index.scss";

// element-ui 的原始 scss 文件
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import '~element-ui/packages/theme-chalk/src/index';

body {
}

Class

  • Activable 可激活对象
  • FullScreen 全屏交互
  • HistoryRecord 历史记录
  • Observable 可观察对象
  • ReactiveState 响应式状态

Decorators

  • Installable 创建插件类型，即可使用 Vue.use(Component)
  • BanVueObservable 禁止 Vue 响应式封装
  • VueObservable 使用 Vue 响应式封装