这是codepen:https://codepen.io/VincentBlouin/pen/zVJbaR
您可以看到左侧的节点(如“ 1.2左侧”)开始自动换行,但只能在其“ .child-label”最大宽度:500px处自动换行。我不知道为什么,但最重要的是,如何预防它。如果删除一些较长的lorsum ipsum文本(它是可编辑的),您会看到像“ 1.2”这样的左气泡恢复其正常形状。
该代码使用Vue.js,Vuetify.js和Material Design,因为它对我来说更容易,但我认为问题与flex CSS息息相关。
谢谢。
Vue.use(Vuetify)
let Child = {
name:'child',
props: ["child", "direction"],
data: function () {
return {
count: 0,
isLeft: null
}
},
mounted:function(){
this.isLeft = this.direction === "left";
},
template: '#child-template'
};
let tree = new Vue({
el: '#tree',
components:{
'child': Child
},
data: {
root : {
label: 'center',
isRoot: true,
leftChildren:[
{
label:'1 left',
children:[
{
label: '1.1 left'
},
{
label:'1.2 left',
children: [{
label: '1.2.1 left',
children:[{
label:'1.2.1.1 left'
},
{
label:'1.2.1.2 left',
children:[{
label:"left 1.2.1.2.1 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus"
,children:[{
label:"1.2.1.2.1.0 left"
},{
label:"1.2.1.2.1.1 left At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus",
children:[{
label:'1.2.1.2.1.1.1 left At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus'
},{
label: '1.2.1.2.1.1.2 left'
}]
},{
label:'1.2.1.2.1.2 left'
},{
label:'1.2.1.2.1.3 left'
}]}]
},
{
label:'1.2.1.3 left'
}]
}]
},{
label:'1.3 left'
}]
}],
children:[
{
label:'1 right'
},
{
label:'2 right',
children:[
{
label:"2.1 right"
},
{
label:"2.2 right little bit larger"
}
]
}
]
}
}
});
#tree {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
min-width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.child-label{
max-width:500px;
}
.vh-center {
display: flex;
align-items: center;
justify-content: center;
}
.v-center {
display: flex;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.16/vuetify.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.16/vuetify.min.js"></script>
<div id="tree" class="vh-center">
<v-layout row class="vh-center ma-5 pa-5">
<v-flex grow class="left-branch">
<v-layout row class="vh-center" v-for="child in root.leftChildren">
<v-flex grow>
<Child :child="child" direction="left"></Child>
</v-flex>
</v-layout>
</v-flex>
<v-flex grow class="vh-center">
<Child :child="root" direction="center"></Child>
</v-flex>
<v-flex grow class="right-branch">
<v-layout v-for="child in root.children">
<v-flex grow>
<Child :child="child" direction="right"></Child>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</div>
<script type="text/x-template" id="child-template">
<v-layout row class='child-container'>
<v-flex class="flex-child-container" :class="{
'v-center': !child.isRoot,
'vh-center' : child.isRoot
}">
<v-spacer v-if="isLeft"></v-spacer>
<div>
<child :child="grandChild" :direction="direction" v-for="grandChild in child.children" v-if="isLeft && child.children && !child.isRoot"></child>
</div>
<div :class="{
'vh-center':child.isRoot, 'v-center' :!child.isRoot,
'left':!isLeft && !child.isRoot,
'pl-2': 'isLeft',
'pr-2': '!isLeft',
'left':!isLeft && !child.isRoot
}">
<div class="child">
<div contenteditable="true" class="pt-1 pb-1 child-label" :class="{'font-weight-bold':child.isRoot}">
{{child.label}}
</div>
</div>
</div>
<div>
<child :child="grandChild" :diection="direction" v-for="grandChild in child.children" v-if="!isLeft && child.children && !child.isRoot"></child>
</div>
</v-flex>
</v-layout>
</script>
最佳答案
我不知道我是否能满足您的需求,但是我想您不希望文本“ 1.2.1.2 left”分成两行。尝试对他们应用“空白:nowrap”,看看是否有帮助(:
关于css - 当左侧有很多内容时,防止CSS将节点将其最大宽度以下的节点包裹在树中,例如思维导图,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56918114/