【VUE】입력 입력 상자 WiFi-Mac 주소 입력 구성 요소 및 해당 양식 확인 방법

옵션 1 

구성요소 작성

<template>
	<div id="wifi">
		<div
			v-for="(item, index) in list"
			:key="index"
			:class="index !== list.length - 1 ? 'box' : 'box-last'"
		>
			<el-input
				v-model="item.value"
				ref="contentWrap"
				@input="input(item.value, index)"
				maxlength="2"
				@change="change()"
				:disabled="isDisabled"
			/>
			<span class="split" v-show="index !== list.length - 1"> : </span>
		</div>
	</div>
</template>

<script>
export default {
	name: 'wifi',
	components: {},
	props: {
		value: {
			type: String,
			default: '',
		},
		isDisabled: {
			type: Boolean,
			default: false,
		},
	},
	computed: {},
	mounted() {},
	data() {
		return {
			list: [
				{
					value: '',
				},
				{
					value: '',
				},
				{
					value: '',
				},
				{
					value: '',
				},
				{
					value: '',
				},
				{
					value: '',
				},
			],
			isDisabled: false,
		};
	},
	watch: {
		value: {
			handler(newVal) {
				this.setList();
			},
			deep: true,
			immediate: true,
		},
	},
	created() {},
	methods: {
		setList() {
			if (
				this.value === undefined ||
				this.value === null ||
				this.value === ''
			) {
				this.list = [
					{
						value: '',
					},
					{
						value: '',
					},
					{
						value: '',
					},
					{
						value: '',
					},
					{
						value: '',
					},
					{
						value: '',
					},
				];
			} else {
				const array = this.value.split(':');
				if (array.length > 0) {
					this.list = [];
					let obj = [];
					array.forEach(function (element) {
						obj.push({
							value: element.toUpperCase(),
						});
					});
					this.list = obj;
				}
			}
		},
		change() {
			let res = '';
			this.list.forEach(function (element) {
				res += element.value + ':';
			});
			if (res !== '') {
				res = res.substring(0, res.length - 1);
			}
			this.$emit('input', res);
		},
		input(value, index) {
			if (value.length === 2) {
				this.$nextTick(() => {
					index++;
					if (index < this.list.length) {
						this.$refs.contentWrap[index].focus();
					}
				});
			} else {
				this.$nextTick(() => {
					if (this.list[index].value == '') {
						this.$refs.contentWrap[index - 1].focus();
					}
				});
			}
		},
	},
};
</script>

<style lang="scss" scoped>
#wifi {
	display: flex;
	.box {
		width: calc(100% / 6);
		display: flex;
	}
	.box-last {
		width: calc((100% / 6) - 8px);
		display: flex;
	}
	.split {
		margin: auto 2px;
	}
	::v-deep .el-input__inner {
		padding: 0px 5px;
		text-align: center;
	}
}
</style>

페이지 내에서 사용

<wifi
	v-model="xxx.wifimac"
	:value="xxx.wifimac"
/>

옵션 II

1. 플러그인 다운로드

npm install  vue-masked-input --save

2. main.js에서 참조

'vue-masked-input'에서 MaskedInput을 가져옵니다.

Vue.comComponent('MaskedInput', MaskedInput);//전역 마운트

3. 인페이지 이용

<MaskedInput
	v-model="form.WiFimac"
	mask="##:##:##:##:##:##"
	@input="WiFiOnInput"
/>

4. 양식 유효성 검사가 필요한 경우 이 방법을 추가하세요.

<el-form-item
	prop="authCode"
	ref="inputWiFiRef"
>
	<MaskedInput
		class="wifi form-item-box"
		v-model="form.authCode"
		mask="##:##:##:##:##:##"
		@input="WiFiOnInput"
	/>
</el-form-item>


// 触发WiFimac输入框校验
methods: {
WiFiOnInput(v) {
	this.$refs.inputWiFiRef.$emit('el.form.blur', v);
}
}

5. 스타일 수정, 전역적으로 스타일 수정, app.vue에 추가

.wifi {
	padding: 10px 16px;
	height: 36px;
	font-family: inherit;
	font-size: inherit;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	outline: none;
	color: #606266;
}

6. 구성요소 이벤트

@입력 

입력이 입력될 때마다 발생하는 입력 이벤트

@blur.native.capture

아웃포커스 이벤트

양식 확인 방법:

							<el-form-item
								prop="wifi"
								ref="wifiRef"
							>
								<MaskedInput
									class="wifi form-item-box"
									v-model="form.wifi"
									mask="##:##:##:##:##:##"
									@input="WiFiOnInput"
								/>
							</el-form-item>

규칙의 문구

				authCode: [
					{
						required: true,
						message: '已存在', {
							field: 'WiFi',
						}),
						trigger: 'blur',
					},
					{ validator: validwifi, trigger: 'blur' },
				],

데이터의 기본 확인을 수행하고 백그라운드를 통해 존재하는지 확인합니다.

		const validwifi = async (rule, value, callback) => {
			if (value !== null && value !== undefined && value !== '') {
				const array = value.split(':');
				let flag = false;
				for (let i in array) {
					if (array[i] !== '' && !validNumABC(array[i])) {
						flag = true;
						break;
					}
				}
				if (flag) {
					callback(new Error('请填写完整'));
				} else {
						let param = {
							authCode: this.form.wifi,
							value: this.form.wifi,
						};
						await checkUnique(param).then((response) => {
							if (response.code === 200) {
								if (response.data === 'exist') {
									return callback(
										new Error(
											'该wifi信息已存在'
										)
									);
								} else {
									return;
								}
							}
						});
					}
			}
		};

메소드를 메소드로 작성하십시오.

 

		// 触发WiFi输入框校验
		WiFiOnInput(v) {
			this.$refs.wifiref.$emit('el.form.blur', v);
		},