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库的更多相关文章

  1. 移动Web UI库（H5框架）

    1.Framework7 Framework7 - is a free and open source mobile HTML framework to develop hybrid mobile a ...

  2. 移动Web UI库（H5框架）有哪些，看这里就够了

    前言 今年上半年,项目组在项目开发的过程中建立了一套风格统一,组件丰富完善,命名统一规范的PC端UI库,适用于做大型站点,该UI库也是应用到了整个平台的项目中,在各个项目组中进行推广.因为项目的保密性 ...

  3. 移动端前端UI库—Frozen UI、WeUI、SUI Mobile

    [MUI]http://www.dcloud.io/ [Clouda]http://clouda.baidu.com/blend2是百度历时两年共同研发的开源App技术框架,基于Node.js,简单易 ...

  4. 移动端前端框架UI库（Frozen UI、WeUI、SUI Mobile）

    Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https:// ...

  5. 推荐：移动端前端UI库—Frozen UI、WeUI、SUI Mobile

    Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https:// ...

  6. 移动端和web端前端UI库—Frozen UI、WeUI、SUI Mobile

    web http://www.pintuer.com/ 拼图 http://www.h-ui.net/ http://www.layui.com/  很厉害的一个个人产品 http://amazeui ...

  7. 移动端前端框架UI库

    移动端前端框架UI库(Frozen UI.WeUI.SUI Mobile) Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github. ...

  8. vue-cli3.0结合lib-flexible、px2rem实现移动端适配，完美解决第三方ui库样式变小问题

    公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配 ...

  9. 基于Svelte3.x桌面端UI组件库Svelte UI

    Svelte-UI,一套基于svelte.js开发的桌面pc端ui组件库 最近一直忙于写svelte-ui,一套svelte3开发的桌面端ui组件库.在设计及功能上借鉴了element-ui组件库.所 ...

随机推荐

  1. Linux编辑利器-Vim

    在大学时代,Vim 的大名就已如雷贯耳,但由于它陡峭的学习曲线,一直望而却步.等真正开始学习之后,发现并没有想象中的复杂,也没有所谓的瓶颈,只要在实际写代码中强迫自己使用就可以了,无形中就会形成习惯. ...

  2. 从零开始学习docker之在docker中运行springboot项目

    一.docker环境配置 首先需要一个安装了docker的服务器(本地或者云服务器),如果没有请看上文,传送门---https://www.cnblogs.com/wdfordream/p/12737 ...

  3. MySQL server has gone away(在执行sql的时候,莫名的报错)

    原文:https://cenalulu.github.io/mysql/mysql-has-gone-away/ MySQL Server has gone away报错原因汇总分析 原因1. MyS ...

  4. Linux 日常操作

    Linux 日常操作 */--> Linux 日常操作 Table of Contents 1. 查看硬件信息 1.1. 服务器型号序列号 1.2. 主板型号 1.3. 查看BIOS信息 1.4 ...

  5. webpack4 图片加载

    图片处理(file-loader) 引用时出现的问题 在js中引入图片并添加到页面 let img = new Image(); img.src = './logo.png' document.bod ...

  6. opencv-1-QT_OPENCV 安装

    opencv-1-QT_OPENCV 安装 qtopencvc++ 既然我们是从头开始的, 那我们就从 opencv 的安装开始吧, 主要环境为: win10 1909 - 18363.720 版本 ...

  7. java 8中 predicate chain的使用

    目录 简介 基本使用 使用多个Filter 使用复合Predicate 组合Predicate Predicate的集合操作 总结 java 8中 predicate chain的使用 简介 Pred ...

  8. Libra白皮书解读

    文章目录 Libra简介 Libra区块链 Libra货币和存储 Libra协会 Libra简介 Libra是facebook发起的一个区块链项目,其使命是建立一套简单的.无国界的货币和为数十亿人服务 ...

  9. RANet : 分辨率自适应网络，效果和性能的best trade-off | CVPR 2020

    基于对自适应网络的研究,论文提出了自适应网络RANet(Resolution Adaptive Network)来进行效果与性能上的取舍,该网络包含多个不同输入分辨率和深度的子网,难易样本的推理会自动 ...

  10. 这个linux命令能让时光倒流！你不知道的date隐藏用法

    文章每周持续更新,各位的「三连」是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 今天给项目写了个脚本需要获取前一天的时间,本来先获取今天的然后减一下, ...