Vue2.0与SVG实现连线
Vue2.0与SVG实现连线<svgid="lineleft" version="1.1" ><path :d="topline" stroke="#000" stroke-width="1.5" fill="none"/><!--<path v-show="this...
·
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;
}
},
更多推荐
已为社区贡献5条内容
所有评论(0)