vue制作连线题 有哪位大神可以棒棒忙,vue做出图上的效果,连线题两端文本框可以放图片或文字的 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 用svg画线 这是Vue的题吗不,这是CSS题 <!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> iframe 跨域问题 求解关于JavaScript cookie有效期问题 高手来,找错误! 【求助】关于图片滚动自动停止的问题 很难解决的问题 怎样在firefox中定制鼠标右键 windows.oen方法中宽度与高度能否与调用的文件一致? unonload事件是否只有在关闭窗口时触发? js文本选中和未选中触发事件 为什么Ext.MessageBox.show()不能显示? 正则表达式 Function.prototype 为何没有 prototype 属性?
<!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>