在 layui 表单中实现带加减按钮的数字输入框：引入 layui 库。创建数字输入框，并设置最小值、最大值和初始值。添加加减号图标按钮。绑定点击事件，实现加减值功能，并在允许范围内对输入框的值进行更新。
在 layui 表单中使用带加减按钮的数字输入框
在 layui 表单中使用带加减按钮的数字输入框，可以实现方便、灵活的数字输入。具体操作步骤如下：
1. 引入依赖
<code class="html"><script src="layui/layui.js"></script></code>
2. 创建数字输入框
<code class="html"><input type="number" id="input-number" lay-type="number" min="0" max="100" value="0"></code>
-
min：最小值 -
max：最大值 -
value：初始值
3. 绑定加减按钮
<code class="html"><i class="layui-icon layui-icon-add-1" style="position: absolute; right: 28px; top: 10px; cursor: pointer;" id="add-btn"></i> <i class="layui-icon layui-icon-subtraction" style="position: absolute; right: 12px; top: 10px; cursor: pointer;" id="sub-btn"></i></code>
-
layui-icon-add-1：加号图标 -
layui-icon-subtraction：减号图标 -
id：自定义按钮 ID，用于绑定事件
4. 绑定事件
<code class="javascript">layui.use('form', function() {
var form = layui.form;
// 加号按钮点击事件
$('#add-btn').on('click', function() {
var value = parseInt($('#input-number').val());
if (value < 100) {
value++;
$('#input-number').val(value);
}
});
// 减号按钮点击事件
$('#sub-btn').on('click', function() {
var value = parseInt($('#input-number').val());
if (value > 0) {
value--;
$('#input-number').val(value);
}
});
});</code>-
parseInt()：将字符串转换为整数 - 检查值是否在允许范围内
- 更新数字输入框的值
