mirror of
https://gitee.com/technical-laohu/mpay.git
synced 2025-11-12 05:33:44 +08:00
首次提交
This commit is contained in:
182
public/component/pear/module/design.js
Normal file
182
public/component/pear/module/design.js
Normal file
@@ -0,0 +1,182 @@
|
||||
layui.define(['layer', 'form'], function(exports) {
|
||||
var layer = layui.layer,
|
||||
form = layui.form,
|
||||
$ = layui.$,
|
||||
key = '';
|
||||
delHtml()
|
||||
$('button').on('click', function() {
|
||||
var _this = $(this),
|
||||
size = _this.data('size'),
|
||||
type = _this.data('type'),
|
||||
html = '';
|
||||
key = randStrName();
|
||||
switch (type) {
|
||||
case 'text':
|
||||
html = input(type, size)
|
||||
break;
|
||||
case 'password':
|
||||
html = input(type, size)
|
||||
break;
|
||||
case 'select':
|
||||
html = select(size)
|
||||
break;
|
||||
case 'checkbox_a':
|
||||
html = checkbox_a(size)
|
||||
break;
|
||||
case 'checkbox_b':
|
||||
html = checkbox_b(size)
|
||||
break;
|
||||
case 'radio':
|
||||
html = radio(size)
|
||||
break;
|
||||
case 'textarea':
|
||||
html = textarea(size)
|
||||
break;
|
||||
case 'submit':
|
||||
html = submits(size)
|
||||
break;
|
||||
case 'del':
|
||||
$('form').html("\n")
|
||||
delHtml()
|
||||
$('.code-show').text('')
|
||||
return false
|
||||
break;
|
||||
default:
|
||||
layer.msg('类型错误', {
|
||||
icon: 2
|
||||
})
|
||||
}
|
||||
|
||||
$('form').append(html);
|
||||
form.render();
|
||||
setHtml(html)
|
||||
})
|
||||
|
||||
function delHtml() {
|
||||
layui.data('form_html', {
|
||||
key: 'html',
|
||||
remove: true
|
||||
});
|
||||
}
|
||||
|
||||
function setHtml(html) {
|
||||
var h = layui.data('form_html');
|
||||
if (h && h.html) {
|
||||
var _d = h.html + html
|
||||
} else {
|
||||
var _d = html
|
||||
}
|
||||
layui.data('form_html', {
|
||||
key: 'html',
|
||||
value: _d
|
||||
})
|
||||
$('.code-show').text('<form class="layui-form" action="" onsubmit="return false">\n' + _d + '</form>')
|
||||
|
||||
}
|
||||
|
||||
function input(type, size) {
|
||||
var name = type === 'text' ? '输入框' : (type === 'password' ? '密码框' : '');
|
||||
var html = ' <div class="layui-form-item">\n' +
|
||||
' <label class="layui-form-label">' + name + '</label>\n' +
|
||||
' <div class="layui-input-' + size + '">\n' +
|
||||
' <input type="' + type + '" name="' + key + '" required lay-verify="required" placeholder="请输入' + name +
|
||||
'内容" autocomplete="off" class="layui-input">\n' +
|
||||
' </div>\n' +
|
||||
' </div>\n';
|
||||
return html;
|
||||
}
|
||||
|
||||
function select(size) {
|
||||
var html = ' <div class="layui-form-item">\n' +
|
||||
' <label class="layui-form-label">选择框</label>\n' +
|
||||
' <div class="layui-input-' + size + '">\n' +
|
||||
' <select name="' + key + '" lay-verify="required" lay-search>\n' +
|
||||
' <option value=""></option>\n' +
|
||||
' <option value="0">北京</option>\n' +
|
||||
' <option value="1">上海</option>\n' +
|
||||
' <option value="2">广州</option>\n' +
|
||||
' <option value="3">深圳</option>\n' +
|
||||
' <option value="4">杭州</option>\n' +
|
||||
' </select>\n' +
|
||||
' </div>\n' +
|
||||
' </div>\n';
|
||||
return html;
|
||||
}
|
||||
|
||||
function checkbox_a(size) {
|
||||
var html = ' <div class="layui-form-item">\n' +
|
||||
' <label class="layui-form-label">复选框</label>\n' +
|
||||
' <div class="layui-input-' + size + '">\n' +
|
||||
' <input type="checkbox" name="' + key + '[]" title="写作">\n' +
|
||||
' <input type="checkbox" name="' + key + '[]" title="阅读" checked>\n' +
|
||||
' <input type="checkbox" name="' + key + '[]" title="发呆">\n' +
|
||||
' </div>\n' +
|
||||
' </div>\n';
|
||||
return html;
|
||||
}
|
||||
|
||||
function checkbox_b(size) {
|
||||
var html = ' <div class="layui-form-item">\n' +
|
||||
' <label class="layui-form-label">开关</label>\n' +
|
||||
' <div class="layui-input-' + size + '">\n' +
|
||||
' <input type="checkbox" name="' + key + '" lay-skin="switch">\n' +
|
||||
' </div>\n' +
|
||||
' </div>\n';
|
||||
return html;
|
||||
}
|
||||
|
||||
function radio(size) {
|
||||
var html = ' <div class="layui-form-item">\n' +
|
||||
' <label class="layui-form-label">单选框</label>\n' +
|
||||
' <div class="layui-input-' + size + '">\n' +
|
||||
' <input type="radio" name="' + key + '" value="男" title="男">\n' +
|
||||
' <input type="radio" name="' + key + '" value="女" title="女" checked>\n' +
|
||||
' </div>\n' +
|
||||
' </div>\n';
|
||||
return html;
|
||||
}
|
||||
|
||||
function textarea(size) {
|
||||
var html = ' <div class="layui-form-item layui-form-text">\n' +
|
||||
' <label class="layui-form-label">文本域</label>\n' +
|
||||
' <div class="layui-input-' + size + '">\n' +
|
||||
' <textarea name="' + key + '" placeholder="请输入内容" class="layui-textarea"></textarea>\n' +
|
||||
' </div>\n' +
|
||||
' </div>\n';
|
||||
return html;
|
||||
}
|
||||
|
||||
function submits(size) {
|
||||
var html = ' <div class="layui-form-item">\n' +
|
||||
' <div class="layui-input-' + size + '">\n' +
|
||||
' <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>\n' +
|
||||
' <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
|
||||
' </div>\n' +
|
||||
' </div>\n';
|
||||
return html;
|
||||
}
|
||||
|
||||
function jscode() {
|
||||
var html = '<script>\n' +
|
||||
' layui.use(\'form\', function(){\n' +
|
||||
' var form = layui.form;\n' +
|
||||
' form.on(\'submit(formDemo)\', function(data){\n' +
|
||||
' layer.msg(JSON.stringify(data.field));\n' +
|
||||
' return false;\n' +
|
||||
' });\n' +
|
||||
' });\n' +
|
||||
'</script>';
|
||||
return html;
|
||||
}
|
||||
|
||||
function randStrName() {
|
||||
return Math.random().toString(36).substr(8);
|
||||
}
|
||||
var jscodehtml = jscode();
|
||||
$('.js-show').text(jscodehtml)
|
||||
form.on('submit(formDemo)', function(data) {
|
||||
layer.msg(JSON.stringify(data.field));
|
||||
return false;
|
||||
});
|
||||
exports('design', {});
|
||||
});
|
||||
Reference in New Issue
Block a user