layUI框架下带加减按钮的数字输入框

<div class="num-input">
  <input type="text" class="layui-input num" value="1">
  <i class="layui-icon layui-icon-add-1 inc"></i>
  <i class="layui-icon layui-icon-subtract dec"></i>
</div>

在上面的代码中，“num-input”类是包含文本框和按钮的父级容器。文本框使用“num”类进行标记，并带有一个初始值“1”。加减按钮的类分别为“inc”和“dec”。我们使用LayUI中的矢量图标来创建这些按钮（类名称中包含了“layui-icon”），同时还有一个“-1”的后缀。这个后缀指定了矢量图标的大小。我们还需要为这些图标添加一个“i”元素来使用这些矢量图标。

2. CSS样式

我们需要使用CSS样式来指定数字输入框的外观、大小等属性。下面的代码说明如何可视化数字文本框和按钮：

/* 数字输入框样式 */
.num-input {
  display: inline-block;
  height: 36px;
  position: relative;
}
/* 数字输入框文本框样式 */
.num {
  height: 36px;
  width: 50px;
  text-align: center;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 14px;
}
/* 加减按钮样式 */
.inc, .dec {
  position: absolute;
  top: 0;
  font-size: 20px;
  cursor: pointer;
  color: #666;
}
.inc {
  right: 0;
}
.dec {
  left: 0;
}

上述CSS样式定义了数字文本框和两个按钮的外观。输入框和按钮的大小和位置可以使用position和display属性来控制。我们还使用了绝对定位将加减按钮放置在文本框的左右侧。

3. JavaScript代码

最后，我们需要使用JavaScript代码来添加按钮的行为。每次单击“+”按钮时，将数字递增1，每次单击“-”按钮时，将数字递减1。在LayUI中，我们使用form.on()函数将响应器添加到具有特定类名的元素。为了使加减器函数可用，需要在LayUI中添加几个依赖项（form和jquery）。

layui.use(['form', 'jquery'], function () {
  var form = layui.form;
  var $ = layui.jquery;
  form.on('click', '.inc', function () {
    var num = Number($('.num').val());
    num++;
    $('.num').val(num);
  });
  form.on('click', '.dec', function () {
    var num = Number($('.num').val());
    if (num > 1) {
      num--;
      $('.num').val(num);
    }
  });
});

上述JavaScript代码使用LayUI的form.on()函数添加了一个单击事件，它将相应器添加到带有“inc”或“dec”类名的元素中。在单击事件中，我们获取当前数字的值，然后将其递增或递减1。由于使用数字是以字符串形式存储的，因此需要将其转换为数字类型才能进行加减操作。

总结

在本文中，我们了解了如何使用LayUI框架创建一个带有加减按钮的数字输入框。我们使用HTML、CSS和JavaScript来实现这个目标。我们使用一个HTML文本框和两个元素为加减按钮创建一个容器。我们还使用CSS样式来定义数字文本框和按钮的外观，并使用JavaScript代码向这些按钮添加函数。