import React, { Component } from 'react'
import { View, Text, Input } from '@tarojs/components'
import './index.scss'
export default class RuiStepper extends Component {
constructor(props) {
super(props)
}
render () {
return (
<View className='rui-flex-ac rui-fa'>
<Text className='rui-icon rui-icon-minus rui-color4 rui-fs30 rui-ml15'></Text>
<Input className='rui-stepper-input'></Input>
<Text className='rui-icon rui-icon-plus rui-color4 rui-fs30 rui-mr15'></Text>
</View>
)
}
}
export default class RuiStepper extends Component {
constructor(props) {
super(props)
}
render () {
let { value = 1 } = this.props
return (
<View className='rui-flex-ac rui-fa'>
<Text className='rui-icon rui-icon-minus rui-color4 rui-fs30 rui-ml15'></Text>
<Input className='rui-stepper-input' value={value}></Input>
<Text className='rui-icon rui-icon-plus rui-color4 rui-fs30 rui-mr15'></Text>
</View>
)
}
}
getValue(e){
let { value } = e.detail
let { max = 1000, min = 1 } = this.props
value = value.replace(/[^\d]/g, '')
value = value < min ? min : value > max ? max : value
this.props.changeValue(value)
}
handleStep(value, type){
let { max = 1000, min = 1 } = this.props
value = type == '+' && value + 1 <= max ? value + 1 : type == '-' && value - 1 > min ? value - 1 : value
this.props.changeValue(value)
}
<View className='rui-flex-ac rui-fa' onClick={(e) => e.stopPropagation()}></View>
import React, { Component } from 'react'
import { View, Text, Input } from '@tarojs/components'
import './index.scss'
export default class RuiStepper extends Component {
constructor(props) {
super(props)
}
// 操作对值的加减操作
handleStep(value, type){
let { max = 1000, min = 1 } = this.props
value = type == '+' && value + 1 <= max ? value + 1 : type == '-' && value - 1 > min ? value - 1 : value
this.props.changeValue(value)
}
// 获取输入值的操作
getValue(e){
let { value } = e.detail
let { max = 1000, min = 1 } = this.props
value = value.replace(/[^\d]/g, '')
value = value < min ? min : value > max ? max : value
this.props.changeValue(value)
}
render () {
let { value } = this.props
return (
<View className='rui-flex-ac rui-fa' onClick={(e) => e.stopPropagation()}>
<Text className='rui-icon rui-icon-minus rui-color4 rui-fs30 rui-ml15' onClick={this.handleStep.bind(this, value, '-')}></Text>
<Input className='rui-stepper-input' value={value} onBlur={this.getValue.bind(this)}></Input>
<Text className='rui-icon rui-icon-plus rui-color4 rui-fs30 rui-mr15' onClick={this.handleStep.bind(this, value, '+')}></Text>
</View>
)
}
}
import React, { Component } from 'react'
import { View, Text, Input } from '@tarojs/components'
import RuiStepper from '../RuiStepper/RuiStepper'
export default class RuiGoodsLi extends Component {
constructor(props) {
super(props)
}
changeValue(value){
let { index = 0, idx = 0, list } = this.state
list[index].buy[idx].GoodsNum = value
this.setState({list})
}
render () {
let { value = 1 } = this.props
return (
<View>
<RuiStepper changeValue={this.changeValue.bind(this)} value={goods.GoodsNum}/>
</View>
)
}
}