输入血压，年龄范围等，支持数组和逗号分割两种形式

<!--
使用方法：
 <double-input :value="inputArr" @input="inputArr=$event" append="mg/L" width="200" valueFormat="String"></double-input>
    value和@input代替v-model双向绑定传值，inputArr替换为绑定的字段，换成v-model="inputArr"也可以
    append为两个输入框最后紧跟的文字内容，
    width只接受数字 代表两个输入框的总长度，默认为180，
    size支持primary，medium，small，mini，默认为mini
    valueFormat不设置时默认绑定值为一个数组["111","222"],设置为String时默认为数组用逗号分割组成的字符串"111,222"
-->
<template>
    <div class="doubleInput_container">
        <el-input :size="size"  v-model="inputData[0]" :style="{width:inputWid+'px'}" class="lInput" @input="inputLeft"></el-input>
        <div class="lineBack">
            <div class="line" :style="{height:lineHeight}"></div>
        </div>
        <el-input :size="size"  v-model="inputData[1]" :style="{width:inputWid+'px'}" class="rInput" @input="inputRight"> 
        </el-input> 
        <div :style="{lineHeight:lineHeight}" class="appendText">{{append}}</div>
    </div>
</template>
<script>
export default{
    name:"doubleInput",
    props:{
        value:{
            type: [Array,String],
            default: () => ["",""],
        },
        width:{
            type:[Number,String],
            default:180
        },
        size:{
            default:'mini'
        },
        append:{},
        valueFormat:{}
    },
    data(){
        return{
            lineHeight:'28px',
            inputData:["",""],
            inputWid:90,
        }
    },
    watch:{ 
        value(val){
            if(this.valueFormat=='String'){
                this.inputData=val.split(",")
            }else{
                this.inputData=val
            }
        },
        size(val){
            if(val=='mini'){
                this.lineHeight='28px'
            }else if(val=='small'){
                this.lineHeight='32px'
            }else if(val=='medium'){
                this.lineHeight='36px'
            }else if(val=='primary'){
                this.lineHeight='40px'
            }else{
                this.lineHeight='28px'
            }
        }
    },
    created(){
        this.inputWid=Number(this.width)/2
        if(this.valueFormat=='String'){
            this.inputData=this.value.split(",")
        }else{
            this.inputData=this.value
        }
    },
    methods:{
        inputLeft(){
            if(this.valueFormat=='String'){
                this.$emit('input',this.inputData.join(",")) 
            }else{ 
                this.$emit('input',this.inputData) 
            }  
        },
        inputRight(){
            if(this.valueFormat=='String'){
                this.$emit('input',this.inputData.join(",")) 
            }else{ 
                this.$emit('input',this.inputData) 
            }  
        },
    },
}
</script>
<style lang="scss" scoped>
.doubleInput_container{
    display: flex;
}
.line{
    width: 2px;
    background: #C0C4CC; 
    margin: 0 5px;
}
.lineBack{
    z-index: 20;
    transform: rotate(11deg) translate(-8px, 2px);
    padding: 2px;
    background: #fff;
}
.lInput{
}
.rInput{
    transform: translate(-14px, 0px);
}
.appendText{
    transform: translate(-8px, 0px);
}
</style>