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. java中的模运算规则

    取模运算定义 如果a和d是两个自然数,d非零,可以证明存在两个唯一的整数 q 和 r,满足 a = qd + r 且0 ≤ r < d.其中,q 被称为商,r 被称为余数. 运算实例 java模 ...

  2. search（8）- elastic4s-search-query模式

    上篇提过query模式除对记录的筛选之外还对符合条件的记录进行了评分,即与条件的相似匹配程度.我们把评分放在后面的博文中讨论,这篇我们只介绍query查询. 查询可以分为绝对值查询和全文查询:绝对值查 ...

  3. 吕建文 20199303《Linux内核原理与分析》第十二周作业

    ShellShock攻击实验 2014年9月24日,Bash中发现了一个严重漏洞shellshock,该漏洞可用于许多系统,并且既可以远程也可以在本地触发.在本实验中,学生需要亲手重现攻击来理解该漏洞 ...

  4. Makefile 头文件 <> 与 "" 的差别，与 Visual Studio 不同

    #include "" : 首先在所有被编译的.c所在的路径中,查找头文件,如果找不到,则到 -I路径下去找头文件 #inclue <> :首先在-I路径下去找,如果找 ...

  5. java 之 jsp tomcat启动失败问题

    问题描述: 创建了一个helloServlet 代码如下 package Test; import java.io.IOException; import javax.servlet.ServletE ...

  6. 标准库 xml

    xml处理模块 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗年代,大家只能选择用xml呀,至今很多传统公司如金融 ...

  7. 【Linux常见命令】date命令

    Linux date命令:可以用来显示或设定系统的日期与时间. 在显示方面,使用者可以设定欲显示的格式,格式设定为一个加号后接数个标记,其中可用的标记列表如下: 时间方面: %H : 小时(00..2 ...

  8. Element UI表格组件技巧：如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

  9. P1886 滑动窗口 单调队列

    题目描述 现在有一堆数字共N个数字(N<=10^6),以及一个大小为k的窗口.现在这个从左边开始向右滑动,每次滑动一个单位,求出每次滑动后窗口中的最大值和最小值. 例如: The array i ...

  10. 【linux运维】rsync+inotify与sersync+rsync实时数据同步笔记

    Rsync(remote sync)远程同步工具,通过rsync可以实现对远程服务器数据的增量备份通过,但rsync自身也有缺陷,同步数据时,rsync采用核心算法对远程服务器的目标文件进行对比,只进 ...