260720

components/u-input/u-input.vue

@@ -0,0 +1,112 @@
+<template>
+	<view class="u-input" :style="mergedStyle">
+		<input
+			class="u-input__inner"
+			:type="type"
+			:placeholder="placeholder"
+			:placeholder-style="placeholderStyle"
+			:value="inputValue"
+			:maxlength="maxlength"
+			:disabled="disabled"
+			:confirm-type="confirmType"
+			@input="handleInput"
+			@confirm="handleConfirm"
+			@focus="handleFocus"
+			@blur="handleBlur"
+		/>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'UInput',
+		props: {
+			modelValue: {
+				type: [String, Number],
+				default: ''
+			},
+			value: {
+				type: [String, Number],
+				default: ''
+			},
+			type: {
+				type: String,
+				default: 'text'
+			},
+			placeholder: {
+				type: String,
+				default: ''
+			},
+			placeholderStyle: {
+				type: String,
+				default: 'color: #c0c4cc;'
+			},
+			maxlength: {
+				type: [String, Number],
+				default: 140
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			confirmType: {
+				type: String,
+				default: 'done'
+			},
+			customStyle: {
+				type: [String, Object],
+				default: ''
+			}
+		},
+		computed: {
+			inputValue() {
+				return this.modelValue !== '' && this.modelValue !== undefined
+					? this.modelValue
+					: this.value
+			},
+			mergedStyle() {
+				if (typeof this.customStyle === 'string') {
+					return this.customStyle
+				}
+				return this.customStyle || {}
+			}
+		},
+		methods: {
+			handleInput(event) {
+				const value = event.detail.value
+				this.$emit('update:modelValue', value)
+				this.$emit('input', value)
+				this.$emit('change', value)
+			},
+			handleConfirm(event) {
+				this.$emit('confirm', event)
+			},
+			handleFocus(event) {
+				this.$emit('focus', event)
+			},
+			handleBlur(event) {
+				this.$emit('blur', event)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-input {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.u-input__inner {
+		width: 100%;
+		height: 100%;
+		min-height: inherit;
+		font-size: inherit;
+		color: inherit;
+		background: transparent;
+		border: 0;
+		outline: none;
+	}
+</style>