emis-app/components/tpx-input/tpx-input.vue

<template>
	<u-input shape="circle" :placeholder="placeholder" :modelValue="value" :clearable="clearable" 
		:custom-style="inputStyle" :readonly="readonly" :type="type" :inputAlign="inputAlign"
		:placeholder-style="`color: #999;${placeholderStyle};` " @change="handleChange"
		@blur="handleFocus" @focus="handleBlur"
		:formatter="formatter" :disabled="disabled" :focus="autoFocus"
	>
		<template v-if="suffix || $slots.suffix" #suffix>
			<text v-if="suffix" class="font-26 clr-sub pl-10">{{suffix}}</text>
			<slot v-if="$slots.suffix" name="suffix"></slot>
		</template>
		
	</u-input>
</template>

<script>
	export default {
		computed: {
			inputStyle(){
				let bgColor = '#F6F6F6'
				let sty1 = 'border:0;border-radius: 10rpx;padding: 11rpx 20rpx;'
				// if(this.isWhite) {
				// 	bgColor = '#fff'
				// 	sty1 += 'border: 2rpx solid #dadbde;'
				// }
				if(true) {
					bgColor = '#fff'
					sty1 += 'border: 2rpx solid #dadbde;'
				}
				if(!this.disabled) {
					sty1 += `background-color:${bgColor};`
				}
				return `${sty1};${this.customStyle};`
			}
		},
		props: {
			isWhite: {
				default () {
					return false
				}
			},
			suffix: {
				default () {
					return ''
				}
			},
			clearable: {
				default () {
					return false
				}
			},
			type: {
				default () {
					return ''
				}
			},
			readonly: {
				default () {
					return false
				}
			},
			value: {
				default () {
					return ''
				}
			},
			disabled:{
				default () {
					return false
				}
			},
			placeholder:{
				default () {
					return ''
				}
			},
			_digit:{ // 保留小数位
			},
			_maxNum:{ // 最大数值
			},
			customStyle:{
				default () {
					return ''
				}
			},
			placeholderStyle:{
				default () {
					return ''
				}
			},
			inputAlign:{
				default () {
					return ''
				}
			},
			autoFocus: {
				default () {
					return false
				}
			},
		},
		data() {
			return {
				
			}
		},
		created() {

		},
		onHide() {

		},
		unmounted() {},
		
		methods: {
			handleFocus(){
				this.$emit('focus')
			},
			handleBlur(){
				this.$emit('blur')
			},
			handleChange(val){
				this.$emit('change', val)
				this.$emit('update:value', val) 
			},
			formatter(val) {
				let newVal = val
				if((this.type == 'number' || this._digit || this._maxNum) && (typeof val == 'string' && val)) {
					newVal = Number(val) // 需要格式化输入框的格式
					// 判断是否输入了数字
					if(!isNaN(newVal)) {
						if(this._digit) {
							let reg = new RegExp(`^\\d*(\\.?\\d{0,${this._digit}})`, 'g')
							newVal = val.match(reg)[0]
						}
						if(typeof this._maxNum != 'undefined') {
							if(newVal > Number(this._maxNum)) {
								newVal = this._maxNum
							}
						}
					} else {
						newVal = ''
					}
				}
				return newVal
			}
		}
	}
</script>

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