aui
简介
aui 是一套基于原生javascript开发的移动端UI框架。包含常用js API(如：字符校验、本地定时存储、数组对象处理、ajax原生封装、设备信息获取、手势事件…)；插件(如：loading加载、dialog模态框、toast消息提示、picker多级联动…)；UI组件(如：button按钮、tag标签、card卡片…)；常用模板(如：侧滑菜单、加入购物车动画、星级评价、图片上传预览裁剪、选项卡…)。
特点
1、标准化，产品化 2、更多复用，更快效率 3、多人协作，更加统一 4、维护方便 5、易于使用 6、减少UI设计时间
引用
演示
查看演示：https://aui-js.github.io/aui/index.html
文档
看云在线文档地址：https://www.kancloud.cn/chen-wanchun/aui-js
代码
Github仓库地址：https://github.com/aui-js/aui
api
extend 对象合并(可实现多层对象深度合并)
参数
类型
描述
默认值
必选
opts
Object
原始参数
无
是
opt
Object
新参数
无
是
override
Boolean
是否合并重置
无
否
aui.extend("原始参数", "新参数", true);
isDefine 判断字符串是否为空
参数
类型
描述
默认值
必选
str
string
字符串
无
是
aui.isDefine(str);
space 删除字符串中指定字符
参数
类型
描述
默认值
必选
str
string
字符串
无
是
flag
Boolean
是否去除前后空格[false: 去除前后空格 \ true: 去除全部空格]
无
否
aui.space(str, true);
replaceStr 去除字符串中空格
参数
类型
描述
默认值
必选
str
string
字符串
无
是
assignStr
string
指定字符串
无
否
aui.replaceStr('原字符串', '指定字符');
uniq 数组去重
参数
类型
描述
默认值
必选
array
array
去重数组
无
是
aui.uniq(array);
getUrlstr 截取URL中参数(可获取中文内容)
参数
类型
描述
默认值
必选
str
string
参数名称
无
是
aui.getUrlstr('id');
random 生成随机数
参数
类型
描述
默认值
必选
Min
number
最小值
无
是
Max
number
最大值
无
是
aui.random(10, 100);
copy 复制到剪切板
参数
类型
描述
默认值
必选
str
string
要复制的文本
无
是
aui.copy('213421');
checkIsDeveloper 验证是否是开发者
参数
类型
描述
默认值
必选
isDeveloper
Boolean
是否是开发者
无
否
aui.checkIsDeveloper(false);
setLocal 本地存储(可设置存储时间)
参数
类型
描述
默认值
必选
key
string
存储的名称
无
是
value
string
存储的内容
无
是
time
number
存储时间
无
否
aui.setLocal('items', items, 1*24*60*60);
//获取缓存
aui.getLocal('items');
//移除缓存，一般情况不手动调用，缓存过期自动调用
aui.removeLocal('items');
//清空所有缓存
aui.clearLocal();
import 引入 js / css 文件
参数
类型
描述
默认值
必选
url
string / array
文件path
无
是
aui.import('aui.js')
aui.import(['aui.js', 'aui.css'])
组件
loading加载动画
预览
参数
类型
描述
默认值
必选
warp
string
父容器元素
‘body’
否
type
number
1: 常用风格; 2: 点击按钮后在按钮内显示加载动画; 3: 四个方块旋转; 4: 圆点放大缩小动画(全屏首次加载过度动画); 5: 圆点背景过度动画-微信小程序效果(全屏首次加载过度动画)
1
否
msg
string
提示内容
‘’
否
mask
boolean
是否显示遮罩蒙版
true
否
direction
string
横向(“row”)或纵向(“col”)控制
‘col’
否
theme
number
type=3时，控制全屏或小窗展示（1：小窗; 2：全屏）
1
否
style
object
{ bg: ‘背景’, color: ‘文字颜色’, maskBg: ‘遮罩层颜色’, zIndex: ‘层级’}
‘’
否
显示loading加载：
aui.showload({
msg: "加载中"
});
隐藏loading加载：
aui.hideload();
toast消息提示弹窗
预览
参数
类型
描述
默认值
必选
warp
string
父容器元素
‘body’
否
msg
string
提示内容
‘’
是
icon
string
图标
‘’
否
direction
string
横向(“row”)或纵向(“col”)控制
‘col’
否
location
string
（icon参数未配置时可配置）位置 bottom:位于底部，从底部弹出显示middle:位于页面中心位置
‘bottom’
否
duration
number
显示时间
2000
否
示例：
aui.toast({
icon: "../../img/success.png",
msg: "支付成功！",
direction: "col"
},function(ret){
});
dialog提示窗
预览
参数
类型
描述
默认值
必选
warp
string
父容器元素
‘body’
否
title
string
标题
‘’
否
msg
string
提示内容
‘’
是
btns
arr
按钮，默认按钮为“确定” 分别可设置btns值为1：[‘按钮1’, ‘按钮2’]2：[{name: ‘按钮1’, color: ‘’},{name: ‘按钮2’, color: ‘’}]
[“确定”]
否
mask
boolean
是否显示遮罩蒙版
true
否
touchClose
boolean
触摸遮罩是否关闭模态弹窗
true
否
theme
number
主题样式，控制模态弹窗按钮显示风格(1: 大按钮; 2: 小按钮-居右分布; 3: 按钮宽度等于父级宽度100%，适用于按钮文字过多情况)
‘col’
否
items
arr
prompt–input框列表配置[{label: ‘姓名：’, type: ‘text’, value: ‘(可选)’, placeholder: ‘请输入姓名’}]
[]
否
duration
number
显示时间
2000
否
style
object
{ w: ‘’, //–可选参数，模态窗宽度，默认80% h: ‘’, //–可选参数，模态窗高度，默认"auto"自适应 bg: ‘’,//–可选参数，模态窗背景色，默认白色 zIndex: ‘’, //–可选参数，模态窗层级 title: { bg: “”, color: “”, lineHeight: “”, textAlign: “”, fontSize: “”, padding: “”}}
‘’
否
1、alert单按钮提醒弹窗
aui.alert({
title: "提示", //可选
msg: "您点击了alert单按钮模态弹窗！",
mask: true,
touchClose: true, //可选
btns: ["确定"], //可选
//或btns: [{name: '按钮1', color: '#f00'},{name: '按钮2', color: '#00f'}], //可选
theme: 1, //可选
style: {
//可选
w: "75%",
h: "auto",
bg: '#FFF',
zIndex: 999,
animate: "aui-scale-in-tosmall-dialog",
title: {
bg: "#FFF",
color: "#333",
lineHeight:"55px",
fontSize: "17px",
textAlign: "center",
padding: "0px"
}
}
},function(ret){
console.log(ret.index);
if(ret.index == 0){
aui.toast({
msg: "您点击了确定"});
}
});
2、confirm双按钮提醒弹窗
aui.confirm({
msg: "您点击了confirm双按钮模态弹窗！",
btns: ["取消", "确定"],
},function(ret){
console.log(ret.index);
if(ret.index == 1){
aui.toast({
msg: "您点击了确定"});
}
});
3、delete删除提醒弹窗
aui.delete({
msg: "您点击了delete删除模态弹窗！",
btns: ["取消", "删除"],
},function(ret){
console.log(ret.index);
if(ret.index == 1){
aui.toast({
msg: