新版UI开发文档
Remark线上预览地址
https://getbootstrapadmin.com/remark/base/index.html
vue.js官方文档
https://cn.vuejs.org/
tp模版引擎文档
https://www.kancloud.cn/manual/thinkphp5/125003
UI选型：
面板（panel）
面板类型：
演示路径：html/uikit/panel-structure.html
相关api：
演示js地址：
var $panel = $('#examplePanel');// 获取DOM
var PanelClass = new Plugin.getPlugin('panel');// 声明对象
var api = new PanelClass($panel, $panel.data());
api.render();// 渲染
// 全屏
$('#exampleTogglFullscreene').on('click', function () {
api.toggleFullscreen();
});
$('#exampleEnterFullscreen').on('click', function () {
api.enterFullscreen();
});
$('#exampleLeaveFullscreen').on('click', function () {
api.leaveFullscreen();
});
// 显示/隐藏
$('#exampleToggleContent').on('click', function () {
api.toggleContent();
});
$('#exampleShowContent').on('click', function () {
api.showContent();
});
$('#exampleHideContent').on('click', function () {
api.hideContent();
});
// 开启/关闭
$('#exampleToggle').on('click', function () {
api.toggle();
});
$('#exampleOpen').on('click', function () {
api.open();
});
$('#exampleClose').on('click', function () {
api.close();
});
按钮（button）
普通按钮：
边框样式：.btn-outline
按钮尺寸：.btn-lg .btn-sm .btn-xs
椭圆按钮：.btn-round
图标按钮：
commonJS
网络请求：
POST：
/**
* url : 请求地址 [必填]
* data : 请求数据 [必填]
* beforeSend : 请求前调用 [必填]
* complete ：请求完成调用 [必填]
* success : 请求成功回调 [必填]
* error : 请求失败回调 [选填]
*/
api.post(url,data,beforeSend,complete,success,error);
GET：
/**
* url : 请求地址 [必填]
* beforeSend : 请求前调用 [必填]
* complete ：请求完成调用 [必填]
* success : 请求成功回调 [必填]
* error : 请求失败回调 [选填]
*/
api.get(url,beforeSend,complete,success,error);
字段校验：
dataCheck：
| api | 方法 | 参数 | 返回值 |
|---|---|---|---|
| 判空 | isNull | data（string） | bool |
| 手机号 | isPhone | data（string） | bool |
| 英文字母 | isEn | data（string） | bool |
| 整数 | isInt | data（string） | bool |
| 双精度 | isDouble | data（string） | bool |
| a-z,A-Z,0-9 | isString | data（string） | bool |
| 中文 | isChinese | data（string） | bool |
| 邮政编码 | isZIP | data（string） | bool |
| 网址 | isUrl | data（string） | bool |
| 身份证号 | isIdCard | data（string） | bool |
| 数字 | isNum | data（string） | bool |
var dataCheck = {
// 判空
isNull: function isNull(data) {
return data == '' || data == null ? true : false;
},
// 手机号
isPhone: function isPhone(data) {
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
return reg.test(data) ? true : false;
},
// 邮箱
isMail: function isMail(data) {
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
return reg.test(data) ? true : false;
},
// 英文字母
isEn: function isEn(data) {
var reg = /^[a-zA-Z]+$/;
return reg.test(data) ? true : false;
},
// 整数
isInt: function isInt(data) {
var reg = /^[-+]?\d*$/;
return reg.test(data) ? true : false;
},
// 双精度
isDouble: function isDouble(data) {
var reg = /^[-\+]?\d+(\.\d+)?$/;
return reg.test(data) ? true : false;
},
// a-z,A-Z,0-9
isString: function isString(data) {
var reg = /^[a-zA-Z0-9_]+$/;
return reg.test(data) ? true : false;
},
// 中文
isChinese: function isChinese(data) {
var reg = /^[\u0391-\uFFE5]+$/;
return reg.test(data) ? true : false;
},
// 邮政编码
isZIP: function isZIP(data) {
var reg = /^\d{6}$/;
return reg.test(data) ? true : false;
},
// 网址
isUrl: function isUrl(data) {
var reg = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
return reg.test(data) ? true : false;
},
// 身份证号
isIdCard: function isIdCard(data) {
var reg = /^\d{15}(\d{2}[A-Za-z0-9])?$/;
return reg.test(data) ? true : false;
},
// 验证数字
isNum: function isNum(data) {
var reg = /^[0-9]*$/;
return reg.test(data) ? true : false;
},
// 验证n位的数字：^\d{n}$
// 验证至少n位数字：^\d{n,}$
// 验证m-n位的数字：^\d{m,n}$
// 验证零和非零开头的数字：^(0|[1-9][0-9]*)$
// 验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
// 验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
// 验证非零的正整数：^\+?[1-9][0-9]*$
// 验证非零的负整数：^\-[1-9][0-9]*$
// 验证非负整数（正整数 + 0） ^\d+$
// 验证非正整数（负整数 + 0） ^((-\d+)|(0+))$
// 验证长度为3的字符：^.{3}$
};