Vue2.0与SVG实现连线

Vue2.0与SVG实现连线

<svg  id="lineleft" version="1.1" >
                    <path :d="topline" stroke="#000" stroke-width="1.5" fill="none"/>

                    <!--<path v-show="this.knowledges.twoProducers.length>0" :d="levellinel" stroke="#000" stroke-width="1.5" fill="none"/>-->
                    <path :d="brokenlinel" stroke="#000" stroke-width="1.5" fill="none"/>
                    <path :d='"M 190 "+(parseInt(30)+index*41)+ " H 220"' v-for="(pathgrid,index) in pathgrids" stroke="#000" stroke-width="1.5" fill="none"/>

                    <path :d="topliner" stroke="#000" stroke-width="1.5" fill="none"/>
                    <path :d="brokenliner" stroke="#000" stroke-width="1.5" fill="none"/>
                    <path :d='"M 480 "+(parseInt(30)+index*41)+ " H 510"' v-for="(pathgridrr,index) in pathgrids" stroke="#000" stroke-width="1.5" fill="none"/>
                    <!--<path d="M 190 30 H 220" stroke="#000" stroke-width="1.5" fill="none"></path>-->
                </svg>

点击时候给不同位置加上不同属性值。需要先确认好每一条间距。和气垫终点位置。根据需要加上不同点的位置

 getNextProducer:function(data,type,index){
                this.chosedIndex2=0;
                this.chosedIndex3=0;
                this.detailsFalg=true;
                this.self=data;
                let params = {};
                params.id = data.id;
                params.type = type;
                if(type=='2'){//点击第一列
                    this.chosedIndex1=index;
                    this.chosedIndex2=0;
                    this.twoTreeLength=0;
                    this.oneTreeLength=index;
                    this.topline='',
                    this.pathgrids.length=0;
                    this.pathgrids.length=this.knowledges.twoProducers.length-1;
                    this.brokenlinel='M '+(parseInt(this.endgrid.left)-60)+' '+(parseInt(this.startgrid.top)+13)+' H '+(parseInt(this.endgrid.left)-30)+' V '+(parseInt(this.endgrid.top)+13)+' H '+parseInt(this.endgrid.left);
                    console.log(this.brokenlinel);
                    this.topline = 'M '+190+' '+(parseInt(this.startgrid.top)+13)+' V 30';
//                    for(var i=1;i<this.knowledges.twoProducers.length;i++ ){
//                        this.pathline = '<path d="'+'M '+(parseInt(this.endgrid.left)-30)+' '+'30'+' H '+parseInt(this.endgrid.left)+'" stroke="#000" stroke-width="1.5" fill="none"/>'
//                    $("svg").append(this.pathline);
//                    }
//                    this.levellinel = 'M '+(parseInt(this.endgrid.left)-30)+' '+'30'+' H '+parseInt(this.endgrid.left);
//                    console.log(this.levellinel)
                    
                }else {//点击第二列
                    this.pathgridrs.length=0;
                    this.pathgridrs.length=this.knowledges.twoProducers.length-1;
                    this.brokenliner='M '+(parseInt(this.endgrid.left)-60)+' '+(parseInt(this.startgrid.top)+13)+' H '+(parseInt(this.endgrid.left)-30)+' V '+(parseInt(this.endgrid.top)+13)+' H '+parseInt(this.endgrid.left);
                    this.topliner = 'M '+480+' '+(parseInt(this.startgrid.top)+13)+' V 510';

                    this.chosedIndex2=index;
                    this.twoTreeLength=index;
                    this.threeTreeLength=index;
                    this.knowledges.threeProducers.length=0;
                   
                }

            },