react-se v0.1.4

react-se

一个简单的自由的 React 基础 UI 库。 一些常用的小工具集。 React 基础 UI 组件的展示示例: UI Demo

环境

node v11.2.0 + npm v6.4.1 + react v16.8.6 +

描述

该项目基于 Create React App 创建 npm 上的项目是该项目打包后上传的 打包命令

npm run public

打包之后生成三个项目位于根目录，分别是 lib -->主要的 UI 组件 theme -->UI 样式 tools -->小工具集

安装

npm install react-se --save

示例

引入组件

import { Button } from "react-se";

引入样式

import "react-se/theme/index.css";

引入小工具

import { getBodyHeight } from "react-se/tools/index.js";

目录

README.md //help

src

asset

scss

index.scss //UI 库样式

_reset.scss //重置浏览器基本样式

component //UI 组件

tools //小工具目录

package.json

使用说明

组件

Button 按钮

属性

事件

UploadFile 选择文件按钮

属性

事件

AutoSize 一个随窗口变化而宽高自变化的 div

属性

ImgZoom 图片容器。自带功能：查看原图，旋转，放大，缩小

属性

Input 输入框

属性

事件

Textarea 输入文本框

属性

事件

Modal 遮罩层

属性

无

PopupPanels 弹出窗

属性

PopupPanelsHeader 弹出窗头部。与弹出窗配合使用

属性

PopupPanelsContent 弹出窗主体。与弹出窗配合使用

属性

PopupPanelsFooter 弹出窗脚部。与弹出窗配合使用

属性

Circle 圆圈

属性

Sliver 提示框。位于文档流里。

属性

事件

主题

主题样式开发使用sass，若想修改主题样式，建议直接下载 /src/asset/scss/index.scss 进行修改然后覆盖。 此方式比较方便快捷

工具

getBodyHeight

说明 获取 body 高度 参数 - 是否异步 否 返回值 number

getBodyWidht

说明 获取 body 宽度 参数 - 是否异步 否 返回值 number

sha1

说明 sha1 加密 参数 (string) 是否异步 否 返回值 string

md5

说明 md5 加密 参数 (string) 是否异步 否 返回值 string

importExcelToJson

说明 导入 Excel 文件生成 json object 数据 参数 { file:file, header:"keyName-1","keyName-2",..., callback:function(data), isDeleteTheFirstRow:boolean, errorCallback:function(error) } 是否异步 是。 不需要 async 声明 返回值 -

exportJsonToExcel

说明 将符合规范的数据导出 Excel 文件 参数 { data:{},{},..., filename: "文件名", header:"第一列名称","第二列名称",..., errorCallback:function(error) } 是否异步 是。 不需要 async 声明 返回值 生成一个 Excel 文件自动保存

dateTimeToFormat

说明 时间日期格式化 参数 (new Date()) 是否异步 否 返回值 string. Y-m-d H:m:s

dateToFormat

说明 时间年月日期格式化 参数 (new Date()) 是否异步 否 返回值 string. Y-m-d

dateParse

说明 日期字符串解析 参数 ("Date string") 日期时间格式的字符串 是否异步 否 返回值 Date Object

JSONParse

说明 json 解析函数 参数 (json) 是否异步 否 返回值 Object

JSONStringify

说明 JavaScript 值(对象或者数组)转换为一个 JSON 字符串 参数 (object || array) 是否异步 否 返回值 json

pickOutVersion

说明 过滤,挑选出版本号字符串 参数 (string) 是否异步 否 返回值 string。 number.numerb.number...

compareGtVersion

说明 判断两个版本号大小—— val1 大于(1)等于(0)小于(-1) val2 参数 (string-1, string-2) 是否异步 否 返回值 number。 1: 大于， 0: 等于， -1: 小于

pickOutChinese

说明 过滤,挑选出中文字符串 参数 (string) 是否异步 否 返回值 string

isChinese

说明 判断是否是中文 参数 (string) 是否异步 否 返回值 boolean

pickOutNumberCSV

说明 过滤，挑选出数字 csv 格式字符串 参数 (string) 是否异步 否 返回值 string

pickOutNumber

说明 过滤，挑选出正整数数字 参数 (string) 是否异步 否 返回值 integer

isUrl

说明 判断是否是 http 或 http 或 ftp 的 url 参数 (string) 是否异步 否 返回值 boolean

isJsonString

说明 判断是否是 json 字符串 参数 (string) 是否异步 否 返回值 boolean

getQueryVariable

说明 获取 url 参数 参数 (string) 是否异步 否 返回值 string

pickOutDecimalPointN

说明 过滤小数点后 n 位,不传 n 或传 n 不为 number 则不进行小数点截取 参数 (string, int) string: 要过滤的字符串， int: 小数点后 n 位 是否异步 否 返回值 number

isImg

说明 判断是否是图片 参数 (string) 是否异步 否 返回值 boolean

getFileExtension

说明 获取 url 路径的拓展名 参数 (string) 是否异步 否 返回值 string

isDecimalPointN

说明 检查字符串是否是数字字符串 参数 (string, integer) string: 要判断的字符串 integer: 要判断是小数点后 n 未,n 为 0，则为整数，n 不传或传非 int 型,则小数点后无穷位 是否异步 否 返回值 boolean

pickOutNumberAndNegative

说明 过滤，挑选出数字和负号 参数 (string) 是否异步 否 返回值 string

isInteger

说明 判断是否是整数 参数 (string || number) 是否异步 否 返回值 boolean

isLineFeed

说明 是否换行 参数 (string) 是否异步 否 返回值 boolean

isItWhite

说明 安全白名单 参数 (string, WhiteList) string: 检查的目标， WhiteList: 白名单 格式 const WhiteList = { value: "https:www.baidu.com", matchRule: "strict" }, ...; const MatchRule = "strict", "start", "end", "in", "startAndEnd"; 是否异步 否 返回值 boolean

getImgSize

说明 获取图片的宽高尺寸 参数 (file) 是否异步 是，async 或 promise 返回值 object。 {width, height}

getImgSizeOnline

说明 获取在线图片的宽高尺寸 参数 (url) 是否异步 是，async 或 promise 返回值 object。 {width, height}

getFileContent

说明 读取文件内容 参数 (file, type) type: "Binary" || "Text" || "DataURL" || "Array" 是否异步 是，async 或 promise 返回值 result。 result: "Binary" || "Text" || "DataURL" || "Array"