vue svg

最新推荐文章于 2024-08-16 10:24:31 发布

一叶知秋9307

最新推荐文章于 2024-08-16 10:24:31 发布

阅读量519

点赞数

文章标签： vue svg

本文链接：https://blog.csdn.net/qq_40285497/article/details/84070693

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <style>
        svg{
            width: 1000px;
            height: 1000px;
        }
        text{
            pointer-events: none;
        }
        rect{
            cursor: pointer;
        }
        rect:hover{
            fill: blue;
        }
    </style>
</head>
<body>
<div id="app" @mouseup="endDrag">
   <svg>
       <g class="cell" @mousedown="cellReady({index:index,ele:$event})" v-for="(item,index) in lists" :style="'transform: translate('+item.left+'px,'+item.top+'px)'">
           <rect width="100" height="40" fill="red" :sign="index"></rect>
           <text x="0" y="15" fill="#000"  style="transform: translate(10px,10px)">{{item.ruleName}}</text>
           <path d="M 0 10
                    A 5 5 0 0 1 10,0
                    L 0 10
                    A 5 5 0 0 0 10,0" stroke-width="1" stroke="#000" fill="blue" style="transform: translate(90px,15px)"> </path>
       </g>

       <g class="line" v-for="(item,index) in links">
           <path :d="'M '+item.source.left+' '+item.source.top+' C '+((item.target.left+item.source.left)/2)+' '+item.source.top+', '+((item.target.left+item.source.left)/2)+' '+item.target.top+', '+item.target.left+' '+item.target.top" stroke="#000" stroke-width="1" fill="none"></path>
       </g>
   </svg>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            lists:[
                {
                    decisionID:1,
                    ruleName:'规则1',
                    left:50,
                    top:50
                },
                {
                    decisionID:2,
                    ruleName:'规则4',
                    left:180,
                    top:200
                }
            ],
            links:[
                {
                    source:{
                        ele:1,
                        left:100,
                        top:90
                    },
                    target:{
                        left:230,
                        top:200
                    }
                }
            ],
            operationTempEle:{
                cell:{
                  ele:null,
                  left:0,
                  top:0
                },
                line:null
            }
        },
        methods:{
            cellMove(){
                console.log(this.operationTempEle.cell.ele)
                var index = this.operationTempEle.cell.ele.getAttribute('sign');
                console.log(index);
                console.log(this.lists[index]);
                this.lists[index].left=200
            },
            cellReady(opt){
                var This = this;
                console.log(opt.index);
                console.log(opt.ele.target);
                This.operationTempEle.cell.ele = opt.ele.target;
                document.addEventListener('mousemove',This.cellMove);
            },
            endDrag(){
                document.removeEventListener('mousemove',this.cellMove);
            }
        }
    })

</script>
</body>
</html>

今天先做这些，v-for生成svg元素，明天继续