123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416 |
- <template>
- <view class="u-number-box">
- <view
- class="u-number-box__slot"
- @tap.stop="clickHandler('minus')"
- @touchstart="onTouchStart('minus')"
- @touchend.stop="clearTimeout"
- v-if="showMinus && $slots.minus"
- >
- <slot name="minus" />
- </view>
- <view
- v-else-if="showMinus"
- class="u-number-box__minus"
- @tap.stop="clickHandler('minus')"
- @touchstart="onTouchStart('minus')"
- @touchend.stop="clearTimeout"
- hover-class="u-number-box__minus--hover"
- hover-stay-time="150"
- :class="{ 'u-number-box__minus--disabled': isDisabled('minus') }"
- :style="[buttonStyle('minus')]"
- >
- <u-icon
- name="minus"
- :color="isDisabled('minus') ? '#c8c9cc' : '#323233'"
- size="15"
- bold
- :customStyle="iconStyle"
- ></u-icon>
- </view>
- <slot name="input">
- <input
- :disabled="disabledInput || disabled"
- :cursor-spacing="getCursorSpacing"
- :class="{ 'u-number-box__input--disabled': disabled || disabledInput }"
- v-model="currentValue"
- class="u-number-box__input"
- @blur="onBlur"
- @focus="onFocus"
- @input="onInput"
- type="number"
- :style="[inputStyle]"
- />
- </slot>
- <view
- class="u-number-box__slot"
- @tap.stop="clickHandler('plus')"
- @touchstart="onTouchStart('plus')"
- @touchend.stop="clearTimeout"
- v-if="showPlus && $slots.plus"
- >
- <slot name="plus" />
- </view>
- <view
- v-else-if="showPlus"
- class="u-number-box__plus"
- @tap.stop="clickHandler('plus')"
- @touchstart="onTouchStart('plus')"
- @touchend.stop="clearTimeout"
- hover-class="u-number-box__plus--hover"
- hover-stay-time="150"
- :class="{ 'u-number-box__minus--disabled': isDisabled('plus') }"
- :style="[buttonStyle('plus')]"
- >
- <u-icon
- name="plus"
- :color="isDisabled('plus') ? '#c8c9cc' : '#323233'"
- size="15"
- bold
- :customStyle="iconStyle"
- ></u-icon>
- </view>
- </view>
- </template>
- <script>
- import props from './props.js';
-
- export default {
- name: 'u-number-box',
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
- data() {
- return {
-
- currentValue: '',
-
- longPressTimer: null
- }
- },
- watch: {
-
- watchChange(n) {
- this.check()
- },
-
- value(n) {
- if (n !== this.currentValue) {
- this.currentValue = this.format(this.value)
- }
- }
- },
- computed: {
- getCursorSpacing() {
-
- return uni.$u.getPx(this.cursorSpacing)
- },
-
- buttonStyle() {
- return (type) => {
- const style = {
- backgroundColor: this.bgColor,
- height: uni.$u.addUnit(this.buttonSize),
- color: this.color
- }
- if (this.isDisabled(type)) {
- style.backgroundColor = '#f7f8fa'
- }
- return style
- }
- },
-
- inputStyle() {
- const disabled = this.disabled || this.disabledInput
- const style = {
- color: this.color,
- backgroundColor: this.bgColor,
- height: uni.$u.addUnit(this.buttonSize),
- width: uni.$u.addUnit(this.inputWidth)
- }
- return style
- },
-
- watchChange() {
- return [this.integer, this.decimalLength, this.min, this.max]
- },
- isDisabled() {
- return (type) => {
- if (type === 'plus') {
-
- return (
- this.disabled ||
- this.disablePlus ||
- this.currentValue >= this.max
- )
- }
-
- return (
- this.disabled ||
- this.disableMinus ||
- this.currentValue <= this.min
- )
- }
- },
- },
- mounted() {
- this.init()
- },
- methods: {
- init() {
- this.currentValue = this.format(this.value)
- },
-
- format(value) {
- value = this.filter(value)
-
- value = value === '' ? 0 : +value
-
- value = Math.max(Math.min(this.max, value), this.min)
-
- if (this.decimalLength !== null) {
- value = value.toFixed(this.decimalLength)
- }
- return value
- },
-
- filter(value) {
-
- value = String(value).replace(/[^0-9.-]/g, '')
-
- if (this.integer && value.indexOf('.') !== -1) {
- value = value.split('.')[0]
- }
- return value;
- },
- check() {
-
- const val = this.format(this.currentValue);
- if (val !== this.currentValue) {
- this.currentValue = val
- }
- },
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- onFocus(event) {
- this.$emit('focus', {
- ...event.detail,
- name: this.name,
- })
- },
-
- onBlur(event) {
-
- const value = this.format(event.detail.value)
-
- this.$emit(
- 'blur',{
- ...event.detail,
- name: this.name,
- }
- )
- },
-
- onInput(e) {
- const {
- value = ''
- } = e.detail || {}
-
- if (value === '') return
- let formatted = this.filter(value)
-
- if (this.decimalLength !== null && formatted.indexOf('.') !== -1) {
- const pair = formatted.split('.');
- formatted = `${pair[0]}.${pair[1].slice(0, this.decimalLength)}`
- }
- formatted = this.format(formatted)
- this.emitChange(formatted);
- },
-
- emitChange(value) {
-
- if (!this.asyncChange) {
- this.$nextTick(() => {
- this.$emit('input', value)
- this.currentValue = value
- this.$forceUpdate()
- })
- }
- this.$emit('change', {
- value,
- name: this.name,
- });
- },
- onChange() {
- const {
- type
- } = this
- if (this.isDisabled(type)) {
- return this.$emit('overlimit', type)
- }
- const diff = type === 'minus' ? -this.step : +this.step
- const value = this.format(this.add(+this.currentValue, diff))
- this.emitChange(value)
- this.$emit(type)
- },
-
- add(num1, num2) {
- const cardinal = Math.pow(10, 10);
- return Math.round((num1 + num2) * cardinal) / cardinal
- },
-
- clickHandler(type) {
- this.type = type
- this.onChange()
- },
- longPressStep() {
-
- this.clearTimeout()
- this.longPressTimer = setTimeout(() => {
- this.onChange()
- this.longPressStep()
- }, 250);
- },
- onTouchStart(type) {
- if (!this.longPress) return
- this.clearTimeout()
- this.type = type
-
- this.longPressTimer = setTimeout(() => {
- this.onChange()
- this.longPressStep()
- }, 600)
- },
-
- onTouchEnd() {
- if (!this.longPress) return
- this.clearTimeout()
- },
-
- clearTimeout() {
- clearTimeout(this.longPressTimer)
- this.longPressTimer = null
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @import '../../libs/css/components.scss';
- $u-numberBox-hover-bgColor: #E6E6E6 !default;
- $u-numberBox-disabled-color: #c8c9cc !default;
- $u-numberBox-disabled-bgColor: #f7f8fa !default;
- $u-numberBox-plus-radius: 4px !default;
- $u-numberBox-minus-radius: 4px !default;
- $u-numberBox-input-text-align: center !default;
- $u-numberBox-input-font-size: 15px !default;
- $u-numberBox-input-padding: 0 !default;
- $u-numberBox-input-margin: 0 2px !default;
- $u-numberBox-input-disabled-color: #c8c9cc !default;
- $u-numberBox-input-disabled-bgColor: #f2f3f5 !default;
- .u-number-box {
- @include flex(row);
- align-items: center;
- &__slot {
-
- touch-action: none;
-
- }
- &__plus,
- &__minus {
- width: 35px;
- @include flex;
- justify-content: center;
- align-items: center;
-
- touch-action: none;
-
- &--hover {
- background-color: $u-numberBox-hover-bgColor !important;
- }
- &--disabled {
- color: $u-numberBox-disabled-color;
- background-color: $u-numberBox-disabled-bgColor;
- }
- }
- &__plus {
- border-top-right-radius: $u-numberBox-plus-radius;
- border-bottom-right-radius: $u-numberBox-plus-radius;
- }
- &__minus {
- border-top-left-radius: $u-numberBox-minus-radius;
- border-bottom-left-radius: $u-numberBox-minus-radius;
- }
- &__input {
- position: relative;
- text-align: $u-numberBox-input-text-align;
- font-size: $u-numberBox-input-font-size;
- padding: $u-numberBox-input-padding;
- margin: $u-numberBox-input-margin;
- @include flex;
- align-items: center;
- justify-content: center;
- &--disabled {
- color: $u-numberBox-input-disabled-color;
- background-color: $u-numberBox-input-disabled-bgColor;
- }
- }
- }
- </style>
|