有哪位大神可以棒棒忙，vue做出圖上的效果，連線題兩端文本框可以放圖片或文字的
uj5u.com熱心網友回復：
用svg畫線uj5u.com熱心網友回復：
這是Vue的題嗎不，這是CSS題
uj5u.com熱心網友回復：
<!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=https://bbs.csdn.net/topics/{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>
uj5u.com熱心網友回復：
不用客氣，我是雷鋒uj5u.com熱心網友回復：
先謝謝你，但是我想要的是把圖片換成一種文本框，可以放圖片可放文字，而且前面的文本框后面有個小點點，可以和后面的文本框進行連接，前后文本框之間是多對多的關系uj5u.com熱心網友回復：
連線題，還能多對多的嗎
uj5u.com熱心網友回復：
假設 需要向后鏈接的分別是一個人 他不僅有這一個屬性，還有其他屬性，巧了后面四個全是他的屬。然而一個屬性不是他一個人特有的，別人也有，那么其他的人也照樣可以連后面四個屬性
uj5u.com熱心網友回復：
你題目的文字看不清，不清楚需求，只能當普通連線題uj5u.com熱心網友回復：
哈哈 謝謝你啦 ！剛進一個新公司，給我的任務，我有點懵，邏輯比較復雜
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/141762.html
標籤：JavaScript
下一篇：來自小萌新的求助，瑟瑟發抖。