通过引入layui.js文件并使用layui.form.render('number')初始化数字输入框，可以自定义带加减按钮的layui数字输入框。加减按钮分别绑定点击事件处理函数，点击后可增加或减少输入框中的数字。
如何使用layui自定义带加减按钮的数字输入框
layui提供了强大的UI组件，其中包括数字输入框。但是，默认的数字输入框没有内置的加减按钮。本教程将指导您如何使用layui自定义带加减按钮的数字输入框。
步骤：
-
引入layui.js文件：
在您的HTML文件中，引入layui.js文件。 -
创建输入框元素：
创建如下HTML元素：<code class="html"><div class="layui-input-inline"> <input type="text" id="number" value="0" class="layui-input"> </div></code>
-
定义加减按钮：
在输入框的前面和后面定义加减按钮，如下所示：<code class="html"><button class="layui-btn layui-btn-primary" id="minus"><i class="layui-icon layui-icon-subtraction"></i></button> <button class="layui-btn layui-btn-primary" id="plus"><i class="layui-icon layui-icon-addition"></i></button></code>
-
初始化layui数字输入框：
使用layui.form初始化数字输入框，如下所示：<code class="javascript">layui.form.render('number');</code> -
绑定加减按钮事件：
为加减按钮绑定点击事件，如下所示：<code class="javascript">$('#minus').click(function() { let value = parseInt($('#number').val()) - 1; if (value < 0) value = 0; $('#number').val(value); }); $('#plus').click(function() { let value = parseInt($('#number').val()) + 1; $('#number').val(value); });</code>
效果：
通过上述步骤，您将创建一个带加减按钮的数字输入框。当用户点击加减按钮时，输入框中的数字将相应地加1或减1。
完整代码：
<code class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layui数字输入框加减按钮</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-input-inline">
<button class="layui-btn layui-btn-primary" id="minus"><i class="layui-icon layui-icon-subtraction"></i></button>
<input type="text" id="number" value="0" class="layui-input">
<button class="layui-btn layui-btn-primary" id="plus"><i class="layui-icon layui-icon-addition"></i></button>
</div>
<script src="layui/layui.js"></script>
<script>
layui.form.render('number');
$('#minus').click(function() {
let value = parseInt($('#number').val()) - 1;
if (value < 0) value = 0;
$('#number').val(value);
});
$('#plus').click(function() {
let value = parseInt($('#number').val()) + 1;
$('#number').val(value);
});
</script>
</body>
</html></code> 
