layui input 步进器
时间: 2023-08-18 10:29:29 浏览: 163
Layui没有提供步进器(stepper)的组件,但可以通过Layui的输入框(input)和按钮(button)组合实现类似的功能。
下面是一个简单的示例代码:
```html
<div class="layui-input-inline">
<input type="text" name="num" value="1" class="layui-input" id="num">
</div>
<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-primary" id="minus">-</button>
<button type="button" class="layui-btn" id="plus">+</button>
</div>
```
```javascript
// 获取输入框和按钮元素
var numInput = document.getElementById("num");
var minusBtn = document.getElementById("minus");
var plusBtn = document.getElementById("plus");
// 减少数量
minusBtn.onclick = function() {
var num = parseInt(numInput.value);
if (num > 1) {
numInput.value = num - 1;
}
};
// 增加数量
plusBtn.onclick = function() {
var num = parseInt(numInput.value);
numInput.value = num + 1;
};
```
这个示例中,我们使用了两个按钮来控制输入框中的数值,通过点击按钮可以增加或减少数值。你可以根据自己的需求修改样式和代码实现更复杂的步进器功能。
阅读全文