app-base-react

react development common base package.

Usage no npm install needed!

<script type="module">
  import appBaseReact from 'https://cdn.skypack.dev/app-base-react';
</script>

README

app-base-react

web development common base package.

安装环境

切换node版本

sudo n 11.0.0

安装包

npm i npm audit fix npm audit fix --force

编译js

npm run build

编辑css

gulp build

平时编译并复制到对应的工程

clear && gulp build && gulp fgq

发布时

clear && gulp build && npm publish

import api from '../../../library/util-axios'; import UtilString from '../../../library/util-string'; import Select from '../../../library/select' import UtilDate from '../../../library/util-date'; import UtilDic from '../../../library/util-dic'; import UtilModal from '../../../library/util-modal'; import RadioGroup from '../../../library/radio-group'; import Attachment from '../../../library/attachment'; import File from '../../../library/file'; import Dic from '../../../library/dic'; import Moment from '../../../library/moment'; import WangEditor from '../../../library/wang-editor' import SelectUser from '../../../library/select-user'; import UploadTable from '../../../library/upload-table'; import SelectDepartment from '../../../library/select-department';

项目应用

npm i app-base-react //or yarn add app-base-react


####  `modules`

import utils from 'app-base-react' //or import utils from 'app-base-react/utils'

let arr = ['fengguoqu','patrick','somebody'] let num = 'string' let date = new Date()

// [ 'fengguoqu', 'patrick' ] // false // 2019-04-25 21:40

//or import {array as arrayUtil,check as checkUtil,date as dateUtil} from 'app-base-react'

//dependency module import numeral from 'app-base-react/numeral'

let num = numeral('1,000')

import _ from 'app-base-react/lodash' _.chunk(['a', 'b', 'c', 'd'],2) //[['a', 'b'], ['c', 'd']]


## `css`

import 'app-base-react/css/base.css'

You can't see me!
//display:none;
left
middle
right
//check out the result! ``` `Note:` include reset.css, common.css, grid.css, visibility.css

API

For Utils Documentation, visit document

utils

  • string
    • uuid 生成uuid
    • randomCode 生成数字字符随机组合
    • encrypt 编码
    • decrypt 解码
    • checkPwd 检测密码强度
    • remove 移除字符
    • replace 替换字符
    • ellipsis 省略号
    • filterTag 过滤html代码(把<>转换)
    • filterScript 过滤<script></script>转换
    • getRandomColor 获取十六进制随机颜色
    • domToString DOM转字符串
    • stringToDom 字符串转DOM
  • number
    • random 随机数
    • randomGoods 抽奖概率
    • randomCode 随机验证码
    • formatSmallChinese 将数字转换成对应的中文小写
    • formatMoney 数字金钱表示
    • formatBigMoney 中文大写金钱表示
    • numberUnit 数字单位
  • array
    • remove 移除元素
    • sort 排序
    • unique 去重
    • union 并集
    • intersect 交集
    • complement 补集
    • minus 差集
    • max 最大值
    • min 最小值
    • sum 求和
    • average 平均值
    • isRepeat 判断数组是否有重复的项
    • getItemByRandom 随机获取元素
    • getIndexByItem 通过元素获取下标
    • getItemByIndex 通过下标获取元素
    • setItemByIndex 通过下标设置元素
    • removeByItem 移除元素
    • removeByIndex 通过下标移除元素
  • check
    • isBrowser 检查是什么浏览器
    • isMobile 返回手机操作系统
    • isPC 检查是否为PC
    • isString
    • isNumber
    • isBoolean
    • isFunction
    • isNull
    • isUndefined
    • isObj
    • isArray
    • isDate
    • isError
    • isSymbol
    • isPromise
    • isSet
    • isEmpty
    • isFalse
    • isInt
    • isPhone
    • isTel
    • isUsername
    • isPassword
    • isPostal
    • isQQ
    • isEmail
    • isMoney
    • isURL
    • isIP
    • isEnglish
    • isChinese
    • isLower
    • isUpper
    • isHTML
    • isSpace
    • isIdCard
    • isBankCard
    • isChineseIdCard
  • date
    • format 日期格式化 默认如:YYYY-MM-DD hh:mm:ss
    • countTime 计算时间的year,month,day,hour,minute,seconds,week,daytime,when 如:早晨,25秒以前等等
    • countDown 倒计时
    • getHMS 根据秒数返回时分秒格式 如:getHMS(3610) -> 1小时0分10秒
    • countMillisecond 计算毫秒数
    • formatMillisecond 转换毫秒数
    • getTime 当天当前时间距离1970年1月1日的毫秒数
    • getMilliseconds 当天当前时间的毫秒数
    • getSeconds 当天当前时间的秒数
    • getMinutes 当天当前时间的分钟数
    • getHours 当天几点
    • getHours12 当天几点(12小时制时)
    • getDay 当月多少号
    • getWeek 当月星期几
    • getMonth 当年几月
    • getPeriod 当年第几季度
    • getYear 获取年份
    • daysOfYear 当年有多少天
    • daysOfMonth 当月有多少天
    • dayOfYear 当年中的第几天
    • dayOfMonth 当月中的第几天
    • weekOfYear 当年的第几周
    • weekOfMonth 当月中的星期几
    • firstDayOfYear 当年的第一天
    • lastDayOfYear 当年的最后一天
    • firstDayOfMonth 当月的第一天
    • lastDayOfMonth 当月最后一天
    • firstTimeOfDay 当天的开始时间
    • lastTimeOfDay 当天的结束时间
    • firstDayOfWeek 当周的第一天
    • lastDayOfWeek 当周的最后一天
    • firstDayOfNextMonth 下个月的第一天
    • betweenMillSecond 获取两个时间间隔毫秒数
    • betweenSecond 获取两个时间间隔秒数
    • betweenMinute 获取两个时间间隔分钟数
    • betweenHour 获取两个时间间隔小时数
    • betweenDay 获取两个时间间隔天数
    • betweenMonth 获取两个时间间隔月数
    • betweenYear 获取两个时间间隔年数
    • plusMillisSeconds 在一个时间上加上多少毫秒
    • plusSeconds 在一个时间上加上多少秒
    • plusMinutes 在一个时间上加上多少分钟
    • plusHours 在一个时间上加上小时数
    • plusDays 在一个时间上加上天数
    • plusMonths 在一个时间上加上多少个月,这里是按照一个月30天来计算天数的
    • plusYears 在一个时间上加上多少年,这里是按照一年365天来计算天数的,isLoop是否闰年
    • minusMillisSeconds 在一个时间上减去多少毫秒
    • minusSeconds 在一个时间上减去多少秒
    • minusMinutes 在一个时间上减去多少分钟
    • minusHours 在一个时间上减去小时数
    • minusDays 在一个时间上减去天数
    • minusMonths 在一个时间上减去多少个月,这里是按照一个月30天来计算天数的
    • minusYears 在一个时间上减去多少年,这里是按照一年365天来计算天数的,isLoop是否闰年
    • isEq 判断两个时间是否一样
    • isAfter 判断date2是否晚于date1
    • isBefore 判断date2是否早于date1
  • event
    • debounce 空闲控制
    • throttle 频率控制
    • hit 检测两个物体是否相撞
    • frequency 随机间歇执行
  • file
    • formatSize 格式文件大小单位
    • getExt 获取文件的后缀名
    • getName 获取文件名称
    • getFileName 根据路径获取文件全名
    • isImageFile gif|jpg|jpeg|png|GIF|JPG|PNG
    • isVideoFile mp4|mp3|flv|wav
    • isDocumentFile doc|docx|xls|xlsx|pdf|txt|ppt|pptx|rar|zip|html|jsp|sql|htm|shtml|xml
    • isOfficeFile doc|docx|xls|xlsx|pdf|txt|ppt|pptx
  • net
    • getBreadcrumbs 获取path数组
    • getParam 获取url参数
    • getParams 获取所有url参数
    • ajax http请求
    • fetch fetch请求
    • request dependency superagent see superagent
    • cookie dependency js-cookie see js-cookie
      • parse 转换字符串cookie
      • getFromString 从headrs中获取cookie值
      • getJSON
      • get
      • set
      • remove
    • localStorage
      • set
      • get
      • remove
      • clear
    • sessionStorage
      • set
      • get
      • remove
      • clear
  • xlsx
    • read
    • write

dependency module

  • moment dependency moment see momentjs
  • numeral dependency numeral see numeraljs
  • math dependency mathjs see mathjs
  • anime dependency animejs see animejs
  • interact dependency interactjs see interactjs
  • jquery dependency jquery see jquery
  • lodash dependency lodash see lodash
  • d3 dependency d3 see d3
  • Mock dependency mockjs see mockjs
  • Sortable dependency sortablejs see sortablejs
  • Two dependency two.js see two.js
  • Three dependency threejs see threejs
  • Web3 dependency web3 see web3

common.css class

  • show display: none;
  • hide display: none;
  • transparent opacity: 0;
  • usn user-select: none;
  • mask create a mask
    • -cover background-size: cover;
    • -cover-all background-size: 100% 100%;
  • font
    • -indent text-indent: 2em;
    • -bold font-weight: bold;
    • -normal font-weight: normal;
    • -fz12 font-size: 12px;
    • -fz14 font-size: 14px;
    • -fz16 font-size: 16px;
    • -fz18 font-size: 18px;
    • -fz20 font-size: 20px;
    • -fz24 font-size: 24px;
    • -fz26 font-size: 26px;
    • -fz28 font-size: 28px;
    • -fz32 font-size: 32px;
  • text
    • -tal text-align: left;
    • -tar text-align: right;
    • -tac text-align: center;
    • -taj text-align: justify;
    • -ellipsis overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
      • -clamp height: inherit; /*必须设置高度才生效*/
  • menu
    • -icon width: 16px;height: 16px;...
    • -text vertical-align: middle;
  • fixed position: fixed;
    • -tl top: 0;left: 0;
    • -tr top: 0;right: 0;
    • -tc top: 0;left: 50%;
    • -bl bottom: 0;left: 0;
    • -br bottom: 0;right: 0;
    • -bc bottom: 0;left: 50%;
    • -cc bottom: 50%;left: 50%;
  • float
    • -l float: left;
    • -r float: right;
    • -c clear: both;...
  • flex
    • -b-half flex-basis: 50%;
    • -b-quarter flex-basis: 25%;
    • -b-fifth flex-basis: 20%;
    • -auto flex-grow: 1;
    • -shrink flex-shrink: 1;
    • -row flex-flow: row wrap;...
    • -row-sa justify-content: space-around;
    • -row-sb justify-content: space-between;
    • -row-c justify-content: center;
    • -row-end justify-content: flex-end;
    • -col flex-flow: column nowrap;
    • -col-sa justify-content: space-around;
    • -col-sb justify-content: space-between;
    • -col-c justify-content: center;
    • -col-end justify-content: flex-end;
    • -center align-items: center;
    • -center-sa justify-content: space-around;
    • -center-sb justify-content: space-between;
    • -center-c justify-content: center;
  • grid
    • -row display: grid;
    • -inline display: inline-grid;
  • margin
    • -center position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;
  • transform
    • -center position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
  • vertical
    • -center display: inline-block;text-align: center;
    • -inner-center width: inherit;height: inherit;text-align: center;display: table-cell;vertical-align: middle;

Note: