wardrobe/tm-vuetify/components/tm-stepper/tm-stepper.vue

<template>
	<view class="tm-stepper  d-inline-block">
		<view class="flex-center" :style="{  width: `${width}rpx` }">
			<view :class="[isJianDisabled||disabled?'opacity-6 gray':'']">
				<tm-button @touchcancel="endlongpressEvent" @touchend="endlongpressEvent"
					@touchstart="$emit('touchstart', 'minus')" @longpress="longpressEvent('-')" :fllowTheme="fllowTheme"
					:disabled="isJianDisabled || disabled ? true : false"
					:shadow="isJianDisabled || disabled ? 0 : shadwo_num" :black="black_tmeme" @click="setStep('-')"
					:item-class="circular?' pa-0':` round-l-${round} `" icon-size="24" :round="circular?round:0"
					:theme="disabled ? '' : color_tmeme" :width="height" :height="height" block icon="icon-minus">
				</tm-button>
			</view>
			<input v-if="fixed!=0" @blur="inputVal" @input="inputVal" :disabled="(disabled||disabledInput)"
				v-model="setVal" type="digit" :style="{ height: `${height}rpx`, width: `calc(100% - ${height}rpx)` }"
				class="text-align-center  text-size-n fulled"
				:class="[`text-${font_color}`, black_tmeme&&!circular ? 'grey-darken-4 bk' : '',black_tmeme? 'text-grey-lighten-4' : '',circular?'':'grey-lighten-4']" />
			<input v-if="fixed==0" @blur="inputVal" @input="inputVal" :disabled="(disabled||disabledInput)"
				v-model="setVal" type="number" :style="{ height: `${height}rpx`, width: `calc(100% - ${height}rpx)` }"
				class="text-align-center grey-lighten-4 text-size-n fulled"
				:class="[`text-${font_color}`, black_tmeme&&!circular ? 'grey-darken-4 bk' : '',black_tmeme? 'text-grey-lighten-4' : '',circular?'':'grey-lighten-4']" />
			<view :class="[isAddDisabled||disabled?'opacity-6 gray':'']">
				<tm-button @touchcancel="endlongpressEvent" @touchend="endlongpressEvent"
					@touchstart="$emit('touchstart', 'add')" @longpress="longpressEvent('+')" :fllowTheme="fllowTheme"
					:shadow="isAddDisabled || disabled ? 0 : shadwo_num" :black="black_tmeme" @click="setStep('+')"
					:item-class="circular?' pa-0':` round-r-${round} `" icon-size="24" :round="circular?round:0"
					:theme="disabled ? '' : color_tmeme" :disabled="isAddDisabled || disabled ? true : false"
					:width="height" :height="height" block icon="icon-plus"></tm-button>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 步进器
	 * @property {String|Number} value = [] 默认：''，值，推荐使用value.sync或者v-model
	 * @property {Boolean} disabled = [] 默认：false，是否禁用
	 * @property {Boolean} black = [] 默认：false，是否暗黑模式。
	 * @property {Number|String} step = [] 默认：1， 步幅。
	 * @property {String} color = [] 默认：primary， 主题色。
	 * @property {String} fontColor = [] 默认：black， 输入框的文字主题色。
	 * @property {String|Number} round = [] 默认：3， 圆角。
	 * @property {String|Number} shadow = [] 默认：3， 圆角。
	 * @property {String|Number} max = [] 默认：999， 最大值。
	 * @property {String|Number} min = [] 默认：0， 最小值。
	 * @property {String|Number} width = [] 默认：200， 宽度，单位rpx。
	 * @property {String|Number} height = [] 默认：70， 高度，单位rpx。
	 * @property {String} name = [] 默认：''，提交表单时的的字段名称标识
	 * @property {Boolean|String} disabledInput = [] 默认：false，是否禁用输入框
	 * @property {Boolean|String} circular = [] 默认：false，按钮四角是否跟随圆角
	 * @property {Number} fixed = [] 默认：0， 小数点位数
	 * @example <tm-stepper  value="50"></tm-stepper>
	 */
	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';

	export default {
		components: {
			tmButton
		},
		name: 'tm-stepper',
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			value: {
				type: Number | String,
				default: 0
			},
			//提交表单时的的字段名称
			name: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			//禁用输入功能
			disabledInput: {
				type: Boolean | String,
				default: false
			},
			black: {
				type: Boolean | String,
				default: null
			},
			// 步幅，默认1
			step: {
				type: Number,
				default: 1
			},
			//固定小数点位数，0表示整数
			fixed: {
				type: Number,
				default: NaN
			},
			color: {
				type: String,
				default: 'primary'
			},
			fontColor: {
				type: String,
				default: 'black'
			},
			round: {
				type: String | Number,
				default: 3
			},
			circular: {
				type: Boolean | String,
				default: false
			},
			shadow: {
				type: String | Number,
				default: 3
			},
			// 跟随主题色的改变而改变。
			fllowTheme: {
				type: Boolean | String,
				default: true
			},
			max: {
				type: Number | String,
				default: 999
			},
			min: {
				type: Number | String,
				default: 0
			},
			height: {
				type: Number | String,
				default: 60
			},
			width: {
				type: Number | String,
				default: 180
			},
			//回调函数。默认返回true即增减，否则不执行增减。
			callback: {
				type: Function | Object | Boolean,
				default: true
			}
		},
		data() {
			return {
				setVal: '',
				timeid: 598985656
			};
		},
		mounted() {
			this.setVal = this.value;
		},
		watch: {
			value: function(val) {
				this.jianchData(parseFloat(val));
			}
		},
		computed: {
			isJianDisabled() {
				if (isNaN(parseInt(this.setVal))) return false;
				if (parseInt(this.setVal) <= this.min) return true;
				return false;
			},
			isAddDisabled() {
				if (isNaN(parseInt(this.setVal))) return false;
				if (parseInt(this.setVal) >= this.max) return true;
				return false;
			},
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			color_tmeme: function() {
				if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this
					.fllowTheme) {
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			font_color: function() {
				if (this.fontColor) return this.fontColor;
				return this.color;
			},
			shadwo_num: function() {
				if (typeof this.shadow !== 'undefined') return this.shadow;
				return 3;
			}
		},
		destroyed() {
			clearInterval(this.timeid);
		},
		methods: {
			async setStep(ty) {
				if (this.disabled) return;

				if (typeof this.callback !== 'boolean' && this.callback !== true) {
					uni.showLoading({
						title: '...',
						mask: true
					})
					let p = await this.callasync();
					uni.hideLoading();
					if (p !== true) return;
				}
				this.$nextTick(function() {
					var val = parseFloat(this.value);
					if (!isNaN(this.fixed) && this.fixed > 0) {
						val = val.toFixed(this.fixed)
						if (isNaN(val) || val == 0 || val == '0' || val == '' || !val) {
							val = '0.' + this.strWidth(this.fixed) + this.step
						}
						val = parseFloat(val)
						let setval = '0.' + this.strWidth(this.fixed) + this.step
						setval = parseFloat(setval);
						if (ty == '+') {
							val += setval
						} else {
							val -= setval
						}
					} else if (!isNaN(this.fixed) && this.fixed == 0) {
						val = val.toFixed(this.fixed)
						val = parseInt(val)
						if (ty == '+') {
							val += this.step
						} else {
							val -= this.step
						}
					} else if (isNaN(this.fixed)) {
						if (ty == '+') {
							val += this.step
						} else {
							val -= this.step
						}
					}

					if (val < 0) {
						if (val <= this.min) {
							val = this.min;
						}
						clearInterval(this.timeid);
					} else if (val >= this.max) {
						val = this.max;
						clearInterval(this.timeid);
					}
					const realVal = val;
					this.setVal = isNaN(realVal) ? '' : String(val);
					this.$emit('input', this.setVal);
					this.$emit('update:value', this.setVal);
					this.$emit('change', this.setVal);
				});

			},
			inputVal(e) {
				var val = parseFloat(e.detail.value)
				this.jianchData(val);
			},
			strWidth(len) {
				let v = '';
				for (let i = 0; i < len - 1; i++) {
					v += '0';
				}
				return v;
			},
			jianchData(val) {

				this.$nextTick(function() {
					if (!isNaN(this.fixed) && this.fixed > 0) {
						val = val.toFixed(this.fixed)
						if (isNaN(val) || val == 0 || val == '0' || val == '' || !val) {
							val = '0.' + this.strWidth(this.fixed) + this.step
						}
					} else if (!isNaN(this.fixed) && this.fixed == 0) {
						val = val.toFixed(this.fixed)
					}
					const realval = val;
					if (val < this.min) {
						val = String(this.min);
					}
					if (val > this.max) {
						val = String(this.max);
					}
					this.setVal = isNaN(parseFloat(realval)) ? '' : String(val);
					this.$emit('input', this.setVal);
					this.$emit('update:value', this.setVal);
					this.$emit('change', this.setVal);
				});
			},
			longpressEvent(ty) {
				if (this.disabled) return;
				let t = this;
				clearInterval(this.timeid);
				this.timeid = setInterval(async function() {
					await t.setStep(ty);
				}, 250);
			},
			endlongpressEvent(ty) {
				clearInterval(this.timeid);
			},
			//异步回调
			async callasync() {
				let verify = this.callback;
				verify = await verify()
				if (typeof verify === 'function') {
					verify = await verify()
				}
				if (typeof verify !== 'boolean') verify = true;

				return verify;
			}
		}
	};
</script>

<style lang="scss"></style>