方案一
组件编写
<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);
},