新版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地址：<script src="../../assets/examples/js/uikit/panel-actions.js"></script>

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）

普通按钮：

<div class="col-sm-12 col-md-4 col-xl-2">
    <button type="button" class="btn btn-block btn-default">默认样式</button>
    
    <button type="button" class="btn btn-block btn-primary">普通样式</button>
    
    <button type="button" class="btn btn-block btn-success">成功样式</button>
    
    <button type="button" class="btn btn-block btn-info">提示样式</button>
    
    <button type="button" class="btn btn-block btn-warning">警告样式</button>
    
    <button type="button" class="btn btn-block btn-danger">危险样式</button>
</div>

边框样式：.btn-outline
按钮尺寸：.btn-lg .btn-sm .btn-xs
椭圆按钮：.btn-round

图标按钮：

<button type="button" class="btn btn-primary btn-block">
    <i class="icon wb-menu" aria-hidden="true"></i>
    图标按钮
</button>

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}$ 
};