动态表单的自定义url组件

<template>
    <div class="createcom">
            <el-input 
            v-if="!disabled" 
            type="textarea"
            v-model="input2" 
            :disabled="disabled" 
            :placeholder="placeholderProName" 
            autosize
            @input="changeVal(val)"
            @keydown.native="keydown($event)"
            @blur="blurVal"
            @click.native="clickColor"
            :class="active"
            >
            </el-input>
            <div v-else class="inputbox">
                <ul>
                    <li v-for="(item,index) in value" :key="index">
                        <span @click="herfClick(item)">{{item}}</span>
                    </li>
                </ul>
            </div>
    </div>
</template>
<script>
    export default {
        name: 'customurl',
        data() {
            // 限制正整数
            return {
                input2: this.val,
                down:true,
                active:'active'
            }
        },
        props: {
            placeholderProName: {
                type: String,
                default: '请输入URL'
            },
            disabled: {
                type: Boolean,
                default: true
            },  
            value:{
                type:[Array,null],
                default:[]
            }         
        },
        mounted(){
            console.log(this.value)
            if(this.value){
                console.log('sss')
               this.input2= this.value.join(';\n')
            }
        },
        methods: {
            changeVal(val) {
                // if(this.down){
                //     // this.code13(val)
                // }  
            },
            //失焦获取url数组
            blurVal(val){
                this.active='active'
                let valUrl;
                valUrl=this.input2.split(/[;；]/)
                valUrl=valUrl.filter(item=>{
                  return item.length-1
                })
                this.$emit('input',valUrl)
            },
            keydown(event){
                // 禁用回车     
                // if(event.keyCode == 32){
                //     event.returnValue = false
                // }
                // 删除优化
                if(event.keyCode == 8){
                    this.down=false
                }else{
                    this.down=true
                }
            }, 
            clickColor(){
                this.active=''
            },
            // ;自动换行
            // code13(value){
            //     let content;
            //         content =  this.input2.replace(/;/g,";\r\n").replace(/；/g,"；\r\n").replace(/\n/g,"");
            //        this.input2=content  
            // },
            // 跳转
            herfClick(a){
                window.open(a)
            }
        }
    }
</script>
<style lang="scss" scoped>
.inputbox{
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    box-sizing: border-box;
    color: #606266;
    padding: 0 15px;
    padding: 0;
    background-color: #F5F7FA;
    ul{ 
        margin: 5px;
        padding: 0;
        li{
            list-style: none;
            padding: 0 15px;
            height: 24px;
            line-height: 24px;
            span{
                color: blue;
                cursor: pointer;
            }
        }
    }
}
.active{
    /deep/ .el-textarea__inner{
        color:blue;
    }
}
</style>

formCreate.component("customurl", CustomUrl);
在动态表单里  引入并注册