app-input-ip.vue

<template>
    <div class="app-input-ip">
        <el-input  
            type="text" 
            size="small"
            :disabled="disabled"
            :readonly="readonly"
            v-model="firstIp"
            @focus="getFocus"
            @blur="blur"
            maxlength="3" />.
        <el-input         
            type="text" 
            size="small"
            :disabled="disabled"
            :readonly="readonly"
            v-model="secIp"
            @focus="getFocus"
            @blur="blur"
            maxlength="3" />.
        <el-input 
            type="text"
            size="small"
            maxlength="3" 
            :disabled="disabled"
            :readonly="readonly"
            @focus="getFocus"
            @blur="blur"
            v-model="thirdIp" />.
        <el-input 
            type="text" 
            size="small"
            maxlength="3"
            :disabled="disabled"
            :readonly="readonly"
            @focus="getFocus"
            @blur="blur"
            v-model="forIp" />
    </div>     
</template>

<script lang='ts'>
import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
import { Subject, Subscription } from 'rxjs';

@Component({
})
export default class AppInputIp extends Vue {  

    /**
     * 应用上下文
     * 
     * @type {any}
     * @memberof AppInputIp
     */
    @Prop() context: any;

    /**
     * 视图参数
     * 
     * @type {any}
     * @memberof AppInputIp
     */
    @Prop() viewparam: any;

    /**
     * 是否启用禁用
     * 
     * @type {any}
     * @memberof AppInputIp
     */
    @Prop({default: false}) disabled: any;

	/**
	 * 只读模式
	 * 
	 * @type {boolean}
	 */
	@Prop({default: false}) public readonly?: boolean;

    /**
     * 表单状态对象
     *
     * @type {Subject<any>}
     * @memberof AppInputIp
     */
    @Prop() public formState!: Subject<any>;

    /**表单数据绑定
     * 
     * @type {string}
     * @memberof AppInputIp
     */
    @Model('change') public ipdata!: string;

    /**
     * 当前组件是否已获取到焦点
     * 
     * @type {boolean}
     * @memberof AppInputIp
     */
    public activeElement: boolean = false;

    /**
     * 当前组件输入框是否全部失焦
     *
     * @type {string}
     * @memberof AppInputIp
     */
    public isAllBlur:boolean = true;

    /**
     * 获取当前值
     *
     * @type {string}
     * @memberof AppInputIp
     */
    public CurValue: any[] = [];

    /**
     * 第一段ip
     * 
     * @type {any}
     * @memberof AppInputIp
     */
    public firstIp: any = '';

    /**
     * 第二段ip
     * 
     * @type {any}
     * @memberof AppInputIp
     */
    public secIp: any = '';

    /**
     * 第三段ip
     * 
     * @type {any}
     */
    public thirdIp: any = '';

    /**
     * 第四段ip
     * 
     * @type {any}
     * @memberof AppInputIp
     */
    public forIp: any = '';

    /**
     * 表单状态事件
     *
     * @private
     * @type {(Subscription | undefined)}
     * @memberof AppImagePreview
     */
    private formStateEvent: Subscription | undefined;
   
    /**
     * Vue声明周期(处理组件的输入属性)
     *
     * @memberof AppInputIp
     */
    public created(){
        if(this.formState){
            this.formStateEvent = this.formState.subscribe(({type,data})=>{  
                if(Object.is('load',type)){
                    this.loadData();
                }
            })
        }
        this.loadData();
    } 

    /**
     * @description: 组件销毁
     * 
     * @return {*}
     */    
    public destroyed(){
        if (this.formStateEvent) {
            this.formStateEvent.unsubscribe();
        }
    }

    /**
     * 加载数据
     *
     * @memberof AppInputIp
     */
    public loadData(){
        if(this.ipdata){
            let iparr:Array<any> = this.ipdata.split('.');
            this.CurValue = iparr;
            this.firstIp = this.CurValue[0];
            this.secIp = this.CurValue[1];
            this.thirdIp = this.CurValue[2];
            this.forIp = this.CurValue[3];
        }
    }

    /**
     * 监听每段ip变化
     * 
     * @memberof AppInputIp
     */
    @Watch('firstIp')
    public FirstIpChange(newVal:any,oldVal:any){
        this.checkIpVal(newVal,oldVal,'firstIp',0);
    }

    @Watch('secIp')
    public SecIpChange(newVal:any,oldVal:any){
        this.checkIpVal(newVal,oldVal,'secIp',1);
    }

    @Watch('thirdIp')
    public ThirdIpChange(newVal:any,oldVal:any){
        this.checkIpVal(newVal,oldVal,'thirdIp',2);
    }

    @Watch('forIp')
    public ForIpChange(newVal:any,oldVal:any){
        this.checkIpVal(newVal,oldVal,'forIp',3);
    }

    /**
     * 输入框获取到焦点时设置该组件已获取到焦点
     * 
     * @memberof AppInputIp
     */
    public getFocus(){
        this.activeElement = true;
        if(this.isAllBlur){
            this.isAllBlur = false;
            this.$emit('focus',this.firstIp+'.'+this.secIp+'.'+this.thirdIp+'.'+this.forIp)
        }
    }

    /**
     * 失焦事件
     * 
     * @memberof AppInputIp
     */
    public blur(){
        this.activeElement = false;
        // 多个输入框同时失焦则抛出失焦事件
        setTimeout(() => {
            if(!this.activeElement){
                this.isAllBlur = true;
                this.$emit('blur',this.firstIp+'.'+this.secIp+'.'+this.thirdIp+'.'+this.forIp)
            }
        }, 0);
    }

    /**
     * 验证格式
     * 
     * @memberof AppInputIp
     */
    public checkIpVal(newVal:any,oldVal:any,flag:any,index:number){
        if(newVal === '') return
        let val = newVal;
        let reg = /^(([0-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5]))))$/g;
        if(reg.test(val)){
            this.CurValue[index] = val;
            if(val.length == 3 && this.activeElement && index >=0 && index <= 2){
                const inputElement: any = this.$children;
                inputElement[index+1]?.focus();
            } 
        }else{
            if(flag){
                let that:any = this;
                that[flag] = oldVal;
                this.CurValue[index] = oldVal;
            }
        }
        if(this.firstIp && this.secIp && this.thirdIp && this.forIp){
            this.$emit('change',this.firstIp+'.'+this.secIp+'.'+this.thirdIp+'.'+this.forIp);
        }
    }
}
</script>