有哪位大神可以棒棒忙,vue做出图上的效果,连线题两端文本框可以放图片或文字的

解决方案 »

  1.   

    用svg画线
      

  2.   

    这是Vue的题吗不,这是CSS题
      

  3.   


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://rawcdn.githack.com/cn00439805/start/bd22508bbb39ce230a4c968df59450dcb0dfad6c/jquery-ui.min.css">
        <link rel="stylesheet" href="https://rawcdn.githack.com/cn00439805/start/bd22508bbb39ce230a4c968df59450dcb0dfad6c/jquery.flowchart.css">
        <script src="https://rawcdn.githack.com/cn00439805/start/ece0b26d895deb28c70619c6d35ed1f14c373fe3/jquery-1.10.2.js"></script>
        <script src="https://rawcdn.githack.com/cn00439805/start/4e087012ba83ccdda94e3312f2befdfc740145d4/jquery-ui.min.js"></script>
        <script src="https://rawcdn.githack.com/cn00439805/start/c4919370f57a125b2f00cc1ff4381ff53cee7046/jquery.flowchart.js"></script>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <style>
            .container{width:502px;height:702px;background:#fff;}
            .flowchart-operator .flowchart-operator-title{display:none;}
            .flowchart-operator{width:100px;height:30px;padding:35px 0;background-size:contain;}
        </style>
    </head>
    <body>
        <div id="app">
            <my-item-container class="container">
                <my-item v-for="item in items" :image="item.image" :left="item.left" :top="item.top" :type="item.type"></my-item>
            </my-item-container>
        </div>
    </body>
    <script>
        function broadcast(componentName,eventName,params){this.$children.forEach(child=>{var name=child.$options.componentName;if(name===componentName){child.$emit.apply(child,[eventName].concat(params));}else{broadcast.apply(child,[componentName,eventName].concat([params]));}});}
        var Emitter={methods:{dispatch(componentName,eventName,params){var parent=this.$parent||this.$root;var name=parent.$options.componentName;while(parent&&(!name||name!==componentName)){parent=parent.$parent;if(parent){name=parent.$options.componentName;}}
        if(parent){parent.$emit.apply(parent,[eventName].concat(params));}},broadcast(componentName,eventName,params){broadcast.call(this,componentName,eventName,params);}}}
        var MyItem = {
            name: 'MyItem',
            componentName: 'MyItem',
            mixins: [Emitter],
            template: '<div></div>',
            props: {
                image: {
                    type: String,
                    default: "https://center.mvcx.net/web/img/a0.jpg"
                },
                left: {
                    type: Number
                },
                top: {
                    type: Number
                },
                type: {
                    type: String,
                    default:"output",
                },
            },
            created(){
                this.$on('MyItemContainerMounted',(parentComp,parentEl) => {
                    var inputs={},outputs={};if(this.type==="input"){inputs["a"]={label:""}}
                    if(this.type==="output"){outputs["b"]={label:""}}
                    var data={left:this.left,top:this.top,properties:{inputs,outputs,},};var index=parentEl.flowchart('addOperator',data);var $el=parentEl.find(".flowchart-operator").eq(index)
                    $el.css("background-image",`url('${this.image}')`)
                });
            }
        }
        var MyItemContainer = {
            name: 'MyItemContainer',
            componentName: 'MyItemContainer',
            mixins: [Emitter],
            template: '<div><slot></slot></div>',
            data(){
                return {
                    el:null,
                }
            },
            methods:{
                init(){
                    var $el = $(this.$el)
                    $el.flowchart()
                    this.broadcast('MyItem', 'MyItemContainerMounted', [this,$el]);
                }
            },
            mounted(){
                if(document.readyState === "loading"){
                    $(function(){
                        this.init()
                    }.bind(this))
                }
                else{
                    this.init()
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            data: function () {
                return {
                    items:[
                        {left:0,top:0,type:"output"},
                        {image:"https://file5.mvcx.net/files/1000/2019129/21b813aa-741e-40b8-a0c1-9751119dab52.png",left:400,top:0,type:"input"},
                        {left:0,top:200,type:"output"},
                        {image:"https://file5.mvcx.net/files/1000/2019129/acf72003-6623-494b-83d8-07ab3b5ba4db.png",left:400,top:200,type:"input"},
                        {left:0,top:400,type:"output"},
                        {image:"https://file5.mvcx.net/files/1000/2019129/acf72003-6623-494b-83d8-07ab3b5ba4db.png",left:400,top:400,type:"input"},
                        {left:0,top:600,type:"output"},
                        {image:"https://file5.mvcx.net/files/1000/2019129/21b813aa-741e-40b8-a0c1-9751119dab52.png",left:400,top:600,type:"input"}
                    ]
                }
            },
            components: {
                MyItemContainer,
                MyItem
            },
        })
    </script>
    </html>