aui移动端UI库
aui
简介
aui 是一套基于原生javascript开发的移动端UI组件库,包含常用js方法、字符校验、dialog提示弹窗、数字键盘、侧滑菜单、时间选择器、多级联动、聊天UI、项目常用模板......
特点
1、标准化,产品化
2、更多复用,更快效率
3、多人协作,更加统一
4、维护方便
5、易于使用
6、减少UI设计时间
引用
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.min.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.min.js"></script>
演示
组件
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: '', //--可选参数,模态窗层级 animate: '', //--可选参数,显示动画 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: "您点击了删除"});
}
});
4、prompt输入弹窗
aui.prompt({
items: [{
label: '姓名:',
type: 'text',
value: '',
placeholder: '请输入姓名'
},{
label: '年龄:',
type: 'number',
value: '',
placeholder: '请输入年龄'
}],
btns: ["取消", "确定"],
},function(ret){
console.log(ret.data);
if(ret.index == 1)
{
aui.alert({
title: "输入结果:",
msg: "<div style='text-align: left;'>姓名:" + ret.data[0] + "</br>年龄:" + ret.data[1]+"</div>",
btns: ["确定"],
}, function(ret){
if(ret.index == 0){
aui.toast({msg: "您点击了确定"});
}
});
}
});
5、confirm带图标双按钮提醒弹窗
aui.confirm({
msg: "<div style='text-align: center;'>"
+"<img src='../../img/success-green.png' style='width: 60px; margin: 0 auto;'>"
+"<p style='width: 100%; line-height: 25px; color: 15px;'>带图标模态弹窗</p>"
+"</div>",
btns: ["取消", "确定"],
},function(ret){
console.log(ret.index);
if(ret.index == 1){
aui.toast({msg: "您点击了确定"});
}
});
6、多按钮弹窗
aui.confirm({
msg: "您点击了多按钮弹窗!",
btns: [{name: '残忍拒绝', color: ''},{name: '再逛逛', color: ''}, {name: "返回首页", color: "#909090"}], //可选
theme: 3, //可选
},function(ret){
console.log(ret.index);
if(ret.index == 0){
aui.toast({msg: "您点击了残忍拒绝"});
}
else if(ret.index == 1){
aui.toast({msg: "您点击了再逛逛"});
}
else if(ret.index == 2){
aui.toast({msg: "您点击了返回首页"});
}
});
actionsheet操作表
参数 | 类型 | 描述 | 默认值 | 必选 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
items | arr | 菜单列表[{name: "", color: "", fontSize: "", textAlign: ""}] | [] | 否 |
mask | boolean | 是否显示遮罩蒙版 | true | 否 |
touchClose | boolean | 触摸遮罩是否关闭模态弹窗 | true | 否 |
cancle | string | 取消按钮 | '' | 否 |
location | string | 位置 bottom:位于底部,从底部弹出显示middle:位于页面中心位置 | 'bottom' | 否 |
theme | number | 主题样式(1: 非全屏宽度; 2: 全屏宽度) | 1 | 否 |
示例:
aui.actionSheet({
title: '上传图片',
mask: true,
touchClose: true,
items: [{
name: "从相册选择",
},{
name: "拍照"
}],
cancle: "取消",
theme: 1,
location: "bottom"
},function(ret){
console.log(ret.index);
});
actionmenu分享弹窗
参数 | 类型 | 描述 | 默认值 | 必选 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
items | arr | 菜单列表[{name: "", icon: "", iconColor: "", img: ""}] | [] | 否 |
mask | boolean | 是否显示遮罩蒙版 | true | 否 |
touchClose | boolean | 触摸遮罩是否关闭模态弹窗 | true | 否 |
cancle | string | 取消按钮 | '' | 否 |
location | string | 位置 bottom:位于底部,从底部弹出显示middle:位于页面中心位置 | 'bottom' | 否 |
theme | number | 主题样式(1: 非全屏宽度; 2: 全屏宽度) | 1 | 否 |
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.actionmenu.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.actionmenu.js"></script>
示例:
aui.actionMenu({
title: '分享至',
mask: true,
touchClose: true,
items: [
{name: "微信", img: "../../img/weixin.png"},
{name: "朋友圈", img: "../../img/pengyouquan.png"},
{name: "QQ", img: "../../img/QQ.png"},
{name: "微博", img: "../../img/weibo.png"}
],
cancle: "取消",
theme: 1,
location: "bottom"
},function(ret){
console.log(ret.index);
});
popover菜单
参数 | 类型 | 描述 | 默认值 | 必选 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
items | arr | 菜单列表[{name: "", color: "", icon: "iconfont icongfont-right", iconColor: '', img: "", fontSize: "", textAlign: ""}] | [] | 否 |
mask | boolean | 是否显示遮罩蒙版 | false | 否 |
touchClose | boolean | 触摸遮罩是否关闭模态弹窗 | true | 否 |
location | string | 位置 top: 设置弹窗显示到触发元素“上”方; bottom: 设置弹窗显示到触发元素“下”方; | 'top' | 否 |
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.popover.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.popover.js"></script>
示例:
aui.popover.open({
warp: '.aui-header-right',
items: [
{name: '微信', img: '../../img/weixin.png'},
{name: '朋友圈', img: '../../img/pengyouquan.png'},
{name: 'QQ', img: '../../img/QQ.png'},
{name: '微博', img: '../../img/weibo.png'}
],
mask: true,
location: 'bottom'
},function(ret){
console.log(ret);
aui.toast({msg: ret.el.querySelector("span").innerHTML});
})
picker多级联动
参数 | 类型 | 描述 | 默认值 | 必选 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
title | string | 标题 | '' | 否 |
layer | number | 控制几级联动 | 1 | 否 |
data | arr | 数据 如:[{text: '', adcode: '', children: [{text: '', adcode: ''}]}] | [] | 否 |
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.picker.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.picker.js"></script>
示例:
aui.picker.open({
title: '选择区域',
layer: 3,
data: cityData, //城市数据
select: function(ret){
console.log(ret);
}
},function(ret){
console.log(ret);
if(ret.status == 1){
aui.picker.close(function(){
aui.alert({msg: ret.data.text + " " + ret.data.children.text + ' ' + ret.data.children.children.text});
});
}
})
poster广告弹窗
参数 | 类型 | 描述 | 默认值 | 必选 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
mask | boolean | 是否显示遮罩蒙版 | true | 否 |
touchClose | boolean | 触摸遮罩是否关闭模态弹窗 | true | 否 |
image | string | 广告图片地址 | '' | 是 |
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.poster.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.poster.js"></script>
示例:
aui.poster({
image: 'https://xbjz1.oss-cn-beijing.aliyuncs.com/upload/default/share.png'
});
sidemenu侧滑菜单
参数 | 类型 | 描述 | 默认值 | 必选 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
content | string | 侧滑菜单元素 | '' | 是 |
moves | arr | 跟随拖动元素;[header——页面头部, .content——页面内容部分] (moveType设置为"all-move" 或 "menu-move"时,此参数必须配置 | [] | 是 |
moveType | string | ['main-move': '主页面移动,侧滑菜单固定'] ['menu-move': '侧滑菜单移动,主页面固定'] ['all-move': '主页面+侧滑菜单都移动'] | 'main-move' | 否 |
position | string | 侧滑菜单初始化位置,默认位于页面左侧 [left: '左侧', right: '右侧'] | 'left' | 否 |
mask | boolean | 是否显示遮罩蒙版 | true | 否 |
maskTapClose | boolean | 触摸遮罩是否关闭侧滑菜单 | true | 否 |
speed | number | 打开、关闭页面速度[值越大,速度越快] | 10 | 否 |
drag | object | { use: true, //--可选参数,是否开启拖动打开、关闭菜单[true: 开启 , false: 关闭] start: null, //--可选参数,开始拖动回调 move: null, //--可选参数,拖动中回调 end: null, //--可选参数,拖动结束} | {} | 否 |
style | object | 设置样式 | {w: '80vw', h: '100vh', bg: '#333'} | 否 |
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.sidemenu.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.sidemenu.js"></script>
初始化:
aui.sidemenu.init({
warp: '.aui-container',
content: '#aui-sidemenu-wapper',
position: 'left',
moveType: 'main-move',
moves: ['.aui-container'],
mask: true,
maskTapClose: true,
drag: {
use: true,
//start: _this.dragcallback,
//move: _this.dragcallback,
end: function(ret){
console.log(ret)
}
},
style: {
w: '70vw',
h: '100vh',
bg: '#333'
},
}).then(function(ret){
console.log(ret)
});
设置配置数据:
aui.sidemenu.setData({
moveType: 'all-move',
}).then(function(ret){
//console.log(ret)
});
打开侧滑菜单:
aui.sidemenu.open({
moveType: 'main-move',
speed: 10,
}).then(function(ret){
console.log(ret)
});
关闭侧滑菜单:
aui.sidemenu.close({speed: 10}).then(function(ret){
console.log(ret)
});
selectmenu下拉列表选择菜单
参数 | 类型 | 描述 | 默认值 | 必选 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
data | arr | 菜单列表[{value: '', text: ''}] | [] | 是 |
layer | number | 控制组件为几级 | 1 | 是 |
mask | boolean | 是否显示遮罩蒙版 | true | 否 |
touchClose | boolean | 触摸遮罩是否关闭侧滑菜单 | true | 否 |
checkedMore | boolean | 是否多选(多选限制最后一级可多选) | false | 否 |
before | function | 打开弹窗前执行 | null | 否 |
select | function | 一级以上点击选择后执行,获取下级数据并return | null | 否 |
style | object | 样式 | {width: '', height: '', top: '', left: '', padding: '', background: '', borderRadius: '', itemStyle:{textAlign: '',fontSize: '',color: '',isLine: false, //是否显示分割线}} | 否 |
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.selectmenu.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.selectmenu.js"></script>
打开:
aui.selectMenu.open({
warp: '.orderby-items',
layer: layer, // 1,2,3...
data: [
{value: '0', text: '昨天'},
{value: '1', text: '本周'},
{value: '2', text: '上周'},
{value: '3', text: '本月'},
{value: '4', text: '上月'},
],
checkedMore: true,
select: function(ret){ //点击时获取下级数据
//console.log(ret); //{value: '0', text: '昨天'}
if(ret.pindex == 0){
//ajax -- 参数如ret.value
var data = [
{value: '1', text: '1点'},
{value: '2', text: '2点'},
{value: '3', text: '3点'},
{value: '4', text: '4点'},
{value: '4', text: '5点'},
{value: '4', text: '6点'},
{value: '4', text: '7点'},
{value: '4', text: '8点'},
{value: '4', text: '9点'},
{value: '4', text: '10点'},
{value: '4', text: '11点'},
{value: '4', text: '12点'},
];
}
else if(ret.pindex == 1){
var data = [
{value: '0', text: '10分'},
{value: '1', text: '20分'},
{value: '2', text: '30分'},
{value: '3', text: '40分'},
{value: '4', text: '50分'},
{value: '4', text: '60分'},
];
}
return data
},
}, function(ret){
isShowModal = false;
for(var i = 0; i < is.parentNode.querySelectorAll('.orderby-item').length; i++){
is.parentNode.querySelectorAll('.orderby-item')[i].classList.remove('active');
}
});
关闭
aui.selectMenu.close(function(){
if(ret && ret.status == 0){
console.log(ret);
if(ret.data.length > 0){
is.classList.add("selected");
is.querySelector("span").innerText = '';
for(var i = 0; i < ret.data[ret.data.length-1].length; i++){
if(i != ret.data[ret.data.length-1].length - 1){
is.querySelector("span").innerText += ret.data[ret.data.length - 1][i].text + ',';
}
else{
is.querySelector("span").innerText += ret.data[ret.data.length - 1][i].text
}
}
}
else{
is.classList.remove("selected");
is.querySelector("span").innerText = '三级列表';
}
}
});
keypad数字键盘
参数 | 类型 | 描述 | 默认值 | 必选 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
type | string | 类型: "number"—纯数字键盘 "point"—带小数点键盘 "idcard"—输入身份证号键盘 | 'number' | 否 |
value | string | 键盘输入值 | '' | 否 |
num | number | 控制小数点后保留两位 | 2 | 否 |
mask | boolean | 是否显示遮罩蒙版 | true | 否 |
touchClose | boolean | 触摸遮罩是否关闭侧滑菜单 | true | 否 |
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.keypad.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.keypad.js"></script>
示例:
aui.keypad.open({
type: 'number', //1、number | 2、point | 3、idcard
mask: false,
value: document.querySelector('#text1').value
}, function(ret){
console.log(ret);
document.querySelector('#text1').value = ret.result;
});
chatbox js聊天输入框
参数 | 类型 | 描述 | 默认值 | 必选 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
mask | boolean | 是否显示遮罩蒙版 | true | 否 |
touchClose | boolean | 触摸遮罩是否关闭侧滑菜单 | true | 否 |
autoFocus | boolean | 是否自动获取焦点 | false | 否 |
events | arr | 配置监听事件(录音,选择附加功能...等事件监听) | [] | 否 |
record | object | 录音功能配置 | record: { use: true, //是否开启录音功能 MIN_SOUND_TIME: 800 //录音最短时间限制 } | 否 |
emotion | object | 表情功能配置 | emotion: { use: true, //是否开启表情功能 path: '' //.json文件路径 pageHasNum: 27, //一页显示按钮数量(7 * 4 - 1) } | 否 |
extras | object | 附加功能配置 | extras: { use: true, //是否开启附加功能 pageHasNum: 8, //一页显示按钮数量(4 * 2) btns: [ /* {title: '', icon: '', img: ''} */], } |
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.chatbox.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.chatbox.js"></script>
示例:
aui.chatbox.init({
warp: 'body',
autoFocus: true,
record: {
use: true,
},
emotion: {
use: true,
path: '../../img/chat/emotion/',
file: 'emotion.json'
},
extras: {
use: true,
btns: [
{title: '相册', icon: 'iconimage'},
{title: '拍摄', icon: 'iconcamera_fill'},
{title: '语音通话', icon: 'iconvideo_fill'},
{title: '位置', icon: 'iconaddress1'},
{title: '红包', icon: 'iconredpacket_fill'},
{title: '语音输入', icon: 'icontranslation_fill'},
{title: '我的收藏', icon: 'iconcollection_fill'},
{title: '名片', icon: 'iconcreatetask_fill'},
{title: '文件', icon: 'iconmail_fill'}
],
},
events: ['recordStart', 'recordCancel', 'recordEnd', 'chooseExtrasItem', 'submit'],
}, function(){
})
//开始录音
aui.chatbox.addEventListener({name: 'recordStart'}, function(ret){
console.log(ret);
//aui.toast({msg: ret.msg})
});
//取消录音
aui.chatbox.addEventListener({name: 'recordCancel'}, function(ret){
console.log(ret);
//aui.toast({msg: ret.msg})
});
//结束录音
aui.chatbox.addEventListener({name: 'recordEnd'}, function(ret){
console.log(ret);
aui.toast({msg: ret.msg})
});
//选择附加功能
aui.chatbox.addEventListener({name: 'chooseExtrasItem'}, function(ret){
console.log(ret);
aui.toast({msg: ret.data.title});
});
//发送
aui.chatbox.addEventListener({name: 'submit'}, function(ret){
console.log(ret);
aui.toast({msg: ret.data.value})
});
aui移动端UI库的更多相关文章
- 移动Web UI库(H5框架)
1.Framework7 Framework7 - is a free and open source mobile HTML framework to develop hybrid mobile a ...
- 移动Web UI库(H5框架)有哪些,看这里就够了
前言 今年上半年,项目组在项目开发的过程中建立了一套风格统一,组件丰富完善,命名统一规范的PC端UI库,适用于做大型站点,该UI库也是应用到了整个平台的项目中,在各个项目组中进行推广.因为项目的保密性 ...
- 移动端前端UI库—Frozen UI、WeUI、SUI Mobile
[MUI]http://www.dcloud.io/ [Clouda]http://clouda.baidu.com/blend2是百度历时两年共同研发的开源App技术框架,基于Node.js,简单易 ...
- 移动端前端框架UI库(Frozen UI、WeUI、SUI Mobile)
Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https:// ...
- 推荐:移动端前端UI库—Frozen UI、WeUI、SUI Mobile
Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https:// ...
- 移动端和web端前端UI库—Frozen UI、WeUI、SUI Mobile
web http://www.pintuer.com/ 拼图 http://www.h-ui.net/ http://www.layui.com/ 很厉害的一个个人产品 http://amazeui ...
- 移动端前端框架UI库
移动端前端框架UI库(Frozen UI.WeUI.SUI Mobile) Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github. ...
- vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题
公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配 ...
- 基于Svelte3.x桌面端UI组件库Svelte UI
Svelte-UI,一套基于svelte.js开发的桌面pc端ui组件库 最近一直忙于写svelte-ui,一套svelte3开发的桌面端ui组件库.在设计及功能上借鉴了element-ui组件库.所 ...
随机推荐
- SpringBoot全局异常处理与定制404页面
一.错误处理原理分析 使用SpringBoot创建的web项目中,当我们请求的页面不存在(http状态码为404),或者器发生异常(http状态码一般为500)时,SpringBoot就会给我们返回错 ...
- 磁盘性能测试工具之fio
fio是测试磁盘性能的一个非常好的工具,用来对硬件进行压力测试和验证. 注意事项 CentOS 6.5等较老版本的操作系统用fdisk创建分区时,默认为非4KB对齐选择初始磁柱编号,对性能有较大的影响 ...
- 个人理解Linux文件权限--以前记录的,根据鸟哥的第二版去解释的
ps:鸟哥的第三版私房菜印刷的有问题 上面的意思:d指的是目录 档案拥有者权限:r可读w可写,x,可运行, 同群组的权限:r可读,这段有个-号,表示不可写,x表示可运行 其他非本群组的权限:r可读,这 ...
- tp5 -- 控制器的参数
方法的参数是可以直接获取的到get和post这集中提交格式的数据的. 但是呢. 前置操作时不能这样操作的, 只能老老实实的使用input()这个方法来获取!!!
- union 的概念及在嵌入式编程中的应用
union 概念 union 在中文的叫法中又被称为共用体,联合或者联合体,它定义的方式与 struct 是相同的,但是意义却与 struct 完全不同,下面是 union 的定义格式: union ...
- springmvc返回不带引号的字符串
springmvc返回不带引号的字符串项目使用springboot开发的,大部分出参为json,使用的fastJson,现在有的接口需要返回一个success字符串,发现返回结果为“success”, ...
- vue2.x学习笔记(三十二)
接着前面的内容:https://www.cnblogs.com/yanggb/p/12684060.html. 深入响应式原理 vue最独特的特性之一,是其非侵入式(耦合度低)的响应式系统:数据模型仅 ...
- 移动端rem适配&iOS兼容
移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...
- 用三维的视角理解二维世界:完美解释meshgrid函数,三维曲面,等高线,看完你就懂了。...
完美解释meshgrid函数,三维曲面,等高线 #用三维的视角理解二维世界 #完美解释meshgrid函数,三维曲面,等高线 import numpy as np import matplotlib. ...
- python操作ftp文件
from ftplib import FTP ftp = FTP('ftp.abc.com') ftp.login(user='username', passwd='********') ftp.cw ...