【VUE】input输入框 WiFi-Mac地址输入组件及对应表单验证方法

方案一 

组件编写

<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"
/>

方案二

1.下载插件

npm install vue-masked-input --save

2. main.js中引用

import MaskedInput from 'vue-masked-input';

Vue.component('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.组件事件

@input 

input事件，每次输入都会触发

@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>

rules里面的写法

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

data里进行基础校验并通过后台查询是否已存在：

		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;
								}
							}
						});
					}
			}
		};

methods里写方法：

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