Skip to content

Commit

Permalink
fix(examples): 修复 CSS 的问题 (#754)
Browse files Browse the repository at this point in the history
  • Loading branch information
那里好脏不可以 authored Apr 18, 2022
1 parent cca59fd commit 79652d1
Showing 1 changed file with 126 additions and 107 deletions.
233 changes: 126 additions & 107 deletions examples/tree/demos/line.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,35 @@
<div class="tdesign-demo-block-column-large tdesign-tree-demo tdesign-tree-line">
<t-form>
<t-form-item label="显示连线" style="margin-bottom: 16px">
<t-switch v-model="showLine"/>
<t-switch v-model="showLine" />
</t-form-item>
<t-form-item label="显示图标" style="margin-bottom: 16px">
<t-switch v-model="showIcon"/>
<t-switch v-model="showIcon" />
</t-form-item>
</t-form>

<div class="tdesign-demo-block-column">
<t-tree
:data="items"
:line="showLine"
:icon="showIcon"
expand-all
/>
<t-tree :data="items" :line="showLine" :icon="showIcon" expand-all />
<h3>render</h3>
<t-tree
:data="items"
:icon="showIcon"
expand-all
:line="renderLine"
/>
<t-tree :data="items" :icon="showIcon" expand-all :line="renderLine" />
<h3>scope slot</h3>
<t-tree
:data="items"
:icon="showIcon"
line
expand-all
>
<template #line="{node}">
<t-tree :data="items" :icon="showIcon" line expand-all>
<template #line="{ node }">
<div v-if="showLine" :class="lineClass(node)">
<div class="custom-line-box">
<span
v-for="(item, index) in getLineNodes(node)"
:key="index"
:class="{'custom-line-cross': item.cross}"
:class="{ 'custom-line-cross': item.cross }"
></span>
</div>
<i class="custom-line-icon" v-if="node.isLeaf()">
<icon name="heart-filled"/>
<icon name="heart-filled" />
</i>
</div>
</template>
</t-tree>
</div>

</div>
</template>

Expand All @@ -61,58 +45,80 @@ export default {
return {
showLine: true,
showIcon: true,
items: [{
value: '1',
label: '1',
children: [{
value: '1.1',
label: '1.1',
}, {
value: '1.2',
label: '1.2',
}],
}, {
value: '2',
label: '2',
children: [{
value: '2.1',
label: '2.1',
children: [{
value: '2.1.1',
label: '2.1.1',
children: [{
value: '2.1.1.1',
label: '2.1.1.1',
children: [{
value: '2.1.1.1.1',
label: '2.1.1.1.1',
}, {
value: '2.1.1.1.2',
label: '2.1.1.1.2',
}],
}],
}, {
value: '2.1.2',
label: '2.1.2',
}],
}, {
value: '2.2',
label: '2.2',
}],
}, {
value: '3',
label: '3',
children: [{
value: '3.1',
label: '3.1',
}, {
value: '3.2',
label: '3.2',
}],
}, {
value: '4',
label: '4',
}],
items: [
{
value: '1',
label: '1',
children: [
{
value: '1.1',
label: '1.1',
},
{
value: '1.2',
label: '1.2',
},
],
},
{
value: '2',
label: '2',
children: [
{
value: '2.1',
label: '2.1',
children: [
{
value: '2.1.1',
label: '2.1.1',
children: [
{
value: '2.1.1.1',
label: '2.1.1.1',
children: [
{
value: '2.1.1.1.1',
label: '2.1.1.1.1',
},
{
value: '2.1.1.1.2',
label: '2.1.1.1.2',
},
],
},
],
},
{
value: '2.1.2',
label: '2.1.2',
},
],
},
{
value: '2.2',
label: '2.2',
},
],
},
{
value: '3',
label: '3',
children: [
{
value: '3.1',
label: '3.1',
},
{
value: '3.2',
label: '3.2',
},
],
},
{
value: '4',
label: '4',
},
],
};
},
methods: {
Expand Down Expand Up @@ -153,28 +159,41 @@ export default {
const lineChildren = [];
const lines = this.getLineNodes(node)
.map((item) => createElement('span', {
class: {
'custom-line-cross': item.cross,
},
}));
const lines = this.getLineNodes(node).map((item) => createElement('span', {
class: {
'custom-line-cross': item.cross,
},
}));
lineChildren.push(createElement('div', {
class: 'custom-line-box',
}, lines));
lineChildren.push(
createElement(
'div',
{
class: 'custom-line-box',
},
lines,
),
);
if (node.isLeaf()) {
const tIcon = <Icon name='heart-filled' />;
const iconNode = createElement('i', {
class: 'custom-line-icon',
}, [tIcon]);
const tIcon = <Icon name="heart-filled" />;
const iconNode = createElement(
'i',
{
class: 'custom-line-icon',
},
[tIcon],
);
lineChildren.push(iconNode);
}
return createElement('div', {
class: this.lineClass(node),
}, lineChildren);
return createElement(
'div',
{
class: this.lineClass(node),
},
lineChildren,
);
},
},
};
Expand All @@ -183,29 +202,29 @@ export default {
.tdesign-tree-demo .t-tree {
margin-bottom: 20px;
}
.tdesign-tree-demo .title{
.tdesign-tree-demo .title {
margin-bottom: 10px;
}
.tdesign-tree-demo .tips{
.tdesign-tree-demo .tips {
margin-bottom: 10px;
}
.tdesign-tree-demo .operations{
.tdesign-tree-demo .operations {
margin-bottom: 10px;
}
.tdesign-tree-demo .t-form__item {
margin-bottom: 5px;
}
.tdesign-tree-demo .t-button{
.tdesign-tree-demo .t-button {
margin: 0 10px 10px 0;
}
.tdesign-tree-line .custom-line{
.tdesign-tree-line .custom-line {
display: flex;
position: absolute;
top: 2px;
left: 9px;
}
.tdesign-tree-line .custom-line-box{
.tdesign-tree-line .custom-line-box {
display: flex;
flex: 0 0 auto;
}
Expand All @@ -215,7 +234,7 @@ export default {
width: 24px;
height: 40px;
}
.tdesign-tree-line .custom-line span:last-child:before{
.tdesign-tree-line .custom-line span:last-child:before {
content: '';
position: absolute;
display: block;
Expand All @@ -224,12 +243,12 @@ export default {
width: 12px;
height: 26px;
border-left: 1px solid #ddd;
border-bottom: 1px solid #0052D9;
border-bottom: 1px solid #0052d9;
}
.tdesign-tree-line .custom-line-leaf span:last-child:before{
.tdesign-tree-line .custom-line-leaf span:last-child:before {
width: 16px;
}
.tdesign-tree-line .custom-line-cross:before{
.tdesign-tree-line .custom-line-cross:before {
content: '';
display: block;
position: absolute;
Expand All @@ -239,7 +258,7 @@ export default {
width: 1px;
border-left: 1px solid #ddd;
}
.tdesign-tree-line .custom-line-icon{
.tdesign-tree-line .custom-line-icon {
position: absolute;
top: 6px;
right: -14px;
Expand All @@ -248,12 +267,12 @@ export default {
width: 16px;
height: 16px;
border-radius: 16px;
border: 1px solid #0052D9;
border: 1px solid #0052d9;
background-color: #fff;
justify-content: center;
align-items: center;
}
.tdesign-tree-line .custom-line span:last-child:after{
.tdesign-tree-line .custom-line span:last-child:after {
content: '';
position: absolute;
display: block;
Expand All @@ -264,9 +283,9 @@ export default {
width: 8px;
height: 8px;
border-radius: 2px;
border: 1px solid #0052D9;
border: 1px solid #0052d9;
background-color: #fff;
transform: rotate(45deg);
transform-origin: 50%, 50%;
transform-origin: 50% 50%;
}
</style>

0 comments on commit 79652d1

Please sign in to comment.