How to realize the effect of MUI Digital input Box by WeChat Mini Programs

This article mainly introduces WeChat Mini Programs how to achieve MUI digital input box effect related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that everyone after reading this WeChat Mini Programs how to achieve MUI digital input box effect article will have a harvest, let's take a look at it.

Effect picture

WXML

Default-+ limits the minimum value to 0 and the maximum value to 10-+

WXSS

Tui-number-group {display: table; table-layout: fixed; width: 300rpx; text-align: center; border-radius: 6px; border: 1px solid # bbb; overflow: hidden;} .tui-number-cell {display: table-cell; line-height: 1.7; border-radius: 0;} button::after {border-bottom: none; border-top: none; border-radius: 0;}

JS

Page ({data: {number: 1, number1: 5, disabled1: false, disabled2: false}, prevNum () {this.setData ({number: this.data.number + 1});}, nextNum () {this.setData ({number: this.data.number-1});}, prevNum1 () {this.setData ({number1: this.data.number1 > = 10? 10: this.data.number1 + 1, disabled1: this.data.number1! = = 0? False: true, disabled2: this.data.number1! = 10? False: true});}, nextNum1 () {this.setData ({number1: this.data.number1