legacy.pda.deploy-review/components/xmh-ip-input/ip-input.vue

<template>
	<view class="ip-input-content">
		<view class="ip-input-group">
			<view class="ip-input">
				<ip-fragment ref="focus0" :fontSize="fontSize" :validate="checkIpFragment" @returned="onReturned(0)"
					@complete="onComplete(0)" :value="IP.ip0" @updateValue="IP.ip0=$event" :max-length="3"
					:focus="focus.wrapper.focus0" @onFocus="focus.wrapper.focus0=$event" font-size="24px">
				</ip-fragment>
			</view>
			<view class="ip-dot">
				<text>.</text>
			</view>

			<view class="ip-input">
				<ip-fragment ref="focus1" :fontSize="fontSize" :validate="checkIpFragment" @returned="onReturned(1)"
					@complete="onComplete(1)" :value="IP.ip1" @updateValue="IP.ip1=$event" :max-length="3"
					:focus="focus.wrapper.focus1" @onFocus="focus.wrapper.focus1=$event" font-size="24px">
				</ip-fragment>
			</view>
			<view class="ip-dot">
				<text>.</text>
			</view>

			<view class="ip-input">
				<ip-fragment ref="focus2" :fontSize="fontSize" :validate="checkIpFragment" @returned="onReturned(2)"
					@complete="onComplete(2)" :value="IP.ip2" @updateValue="IP.ip2=$event" :max-length="3"
					:focus="focus.wrapper.focus2" @onFocus="focus.wrapper.focus2=$event" font-size="24px">
				</ip-fragment>
			</view>
			<view class="ip-dot">
				<text>.</text>
			</view>

			<view class="ip-input">
				<ip-fragment ref="focus3" :fontSize="fontSize" :validate="checkIpFragment" @returned="onReturned(3)"
					@complete="onComplete(3)" :value="IP.ip3" @updateValue="IP.ip3=$event" :max-length="3"
					:focus="focus.wrapper.focus3" @onFocus="focus.wrapper.focus3=$event" font-size="24px">
				</ip-fragment>
			</view>
		</view>
		<view class="keyborder-container" v-show="needKeyBoard" @click.stop>
			<view v-show="needKeyBoard">
				<key-board @typeCharacter="outLetCharacter" @typeComplete="onTypeComplete"></key-board>
			</view>
		</view>
	</view>
</template>

<script>
	import KeyBoard from "./keyboard.vue";
	import Fragment from "./fragment.vue"
	export default {
		components: {
			"ip-fragment": Fragment,
			"key-board": KeyBoard
		},
		// #ifdef VUE3
		props: {
			"modelValue": {
				type: String,
				default: ""
			}
		},
		emits: {
			"update:modelValue": null
		},
		// #endif
		// #ifndef VUE3
		props: {
			"value": {
				type: String,
				default: ""
			},
			"fontSize": {
				type: String,
				default: "1rem"
			}
		},
		// #endif
		data() {
			return {
				IP: {
					ip0: "",
					ip1: "",
					ip2: "",
					ip3: "",
				},
				focus: {
					wrapper: {
						focus0: false,
						focus1: false,
						focus2: false,
						focus3: false,
					}
				}
			}
		},
		methods: {
			onInputFocus(e) {
				console.log("e", e);
			},
			checkIpFragment(str) {
				let r = parseInt(str);
				if (r > 255) {
					return false;
				}
				return true;
			},
			onComplete(index) {
				if (this.focus.wrapper[`focus${index+1}`] !== undefined)
					this.focus.wrapper[`focus${index+1}`] = true;
			},
			unFocusExcept(nodes, excludedKey) {
				let obj = {};
				for (let key of nodes) {
					if (key !== excludedKey) {
						obj[key] = false;
					}
				}
				obj[excludedKey] = true;
				return obj;
			},
			outLetCharacter(character) {
				const obj = this.focus.wrapper;
				const keys = Object.keys(obj);
				for (let key of keys) {
					if (this.focus.wrapper[key] === true) {
						this.$refs[key].inPut(character);
						break;
					}
				}
			},
			onTypeComplete() {
				const obj = this.focus.wrapper;
				const keys = Object.keys(obj);
				for (let key of keys) {
					if (this.focus.wrapper[key] === true) {
						this.$refs[key].onComplete();
						break;
					}
				}
			},
			onReturned(index) {
				if (this.focus.wrapper[`focus${index-1}`] !== undefined)
					this.focus.wrapper[`focus${index-1}`] = true;
			}
		},
		watch: {
			"focus.wrapper.focus0": {
				handler(n, o) {
					if (n === true) {
						let r = this.unFocusExcept(["focus0", "focus1", "focus2", "focus3"], "focus0");
						this.focus.wrapper = r;
					}
				}
			},
			"focus.wrapper.focus1": {
				handler(n, o) {
					if (n === true) {
						let r = this.unFocusExcept(["focus0", "focus1", "focus2", "focus3"], "focus1");
						this.focus.wrapper = r;
					}
				}
			},
			"focus.wrapper.focus2": {
				handler(n, o) {
					if (n === true) {
						let r = this.unFocusExcept(["focus0", "focus1", "focus2", "focus3"], "focus2");
						this.focus.wrapper = r;
					}
				}
			},
			"focus.wrapper.focus3": {
				handler(n, o) {
					if (n === true) {
						let r = this.unFocusExcept(["focus0", "focus1", "focus2", "focus3"], "focus3");
						this.focus.wrapper = r;
					}
				}
			},
			"IP": {
				handler(n, o) {
					if (this.IP.ip0 !== "" && this.IP.ip1 !== "" && this.IP.ip2 !== "" && this.IP.ip3 !== "") {
						const value = `${this.IP.ip0}.${this.IP.ip1}.${this.IP.ip2}.${this.IP.ip3}`
						// #ifdef VUE3
						this.$emit("update:modelValue", value);
						// #endif

						// #ifndef VUE3
						this.$emit("input", value);
						// #endif
					}
				},
				deep: true
			}
		},
		computed: {
			needKeyBoard() {
				return this.focus.wrapper.focus0 ||
					this.focus.wrapper.focus1 ||
					this.focus.wrapper.focus2 ||
					this.focus.wrapper.focus3;
			}
		}
	}
</script>

<style scoped lang="scss">
	.ip-input-content {
		width: 100%;
		height: 100%;

		.keyborder-container {
			position: fixed;
			bottom: 0px;
			left: 0px;
			right: 0px;
			z-index: 9999;
			border-top-left-radius: 16px;
			border-top-right-radius: 16px;
			overflow: hidden;
		}

		.ip-input-group {
			display: flex;
			justify-content: space-around;

			.ip-dot {
				width: 20rpx;
				display: flex;
				align-items: flex-end;
			}

			.ip-input {
				flex: 4;
			}
		}

	}
</style>