当手风琴打开时，如何画一条虚线"L“形线？
当手风琴打开时，如何画一条虚线"L“形线？
提问于 2021-12-27 16:03:28
import BaseAccordian from "@/components/BaseAccordion";
export default {
components: {
BaseAccordian,
},
data() {
return {
accordions: [
{
title: "Vue",
text: "AllaboutVue",
textwo: "hi",
},
{
title: "Nuxt",
text: "AllaboutNuxt",
textwo: "hi",
},
{
title: "webpack",
text: "Allaboutwebpack",
textwo: "hi",
},
],
};
},
};.green {
color: green;
font-weight: bold;
}
.red {
color: red;
font-weight: bold;
}
.pink {
color: pink;
font-weight: bold;
}<div>
<div
v-for="accordion in accordions"
:key="accordion.title"
:class="{
green: accordion.text === 'AllaboutVue',
red: accordion.textwo === 'hi',
red: accordion.text === 'AllaboutNuxt',
pink: accordion.text === 'Allaboutwebpack',
}"
>
<BaseAccordian>
<template v-slot:title>{{ accordion.title }}</template>
<template v-slot:content>
<div>{{ accordion.text }}</div>
<div>{{ accordion.textwo }}</div>
</template>
</BaseAccordian>
</div>
</div>
我已经为不同的文本设置了颜色，当手风琴打开时，现在我需要在上面画带有内容的虚线。从而根据内容颜色绘制虚线。
我认为css是可能的。
我已经为不同的文本设置了颜色，当手风琴打开时，现在我需要在上面画带有内容的虚线。从而根据内容颜色绘制虚线。
我认为css是可能的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-12-27 20:33:16
要获得如下布局：
只需在你的：
<div
v-for="accordion in accordions"
:key="accordion.title"
:class="{
green: accordion.text === 'AllaboutVue',
red: accordion.textwo === 'hi',
red: accordion.text === 'AllaboutNuxt',
pink: accordion.text === 'Allaboutwebpack',
}"
>类，例如，line
<div
v-for="accordion in accordions"
:key="accordion.title"
class="line"
:class="{
green: accordion.text === 'AllaboutVue',
red: accordion.textwo === 'hi',
red: accordion.text === 'AllaboutNuxt',
pink: accordion.text === 'Allaboutwebpack',
}"
>然后添加一些样式：
.line >>> .content > div {
--line-width: 2px;
--x-offset: 8px;
--x-width: 120px;
position: relative;
padding-bottom: var(--line-width);
}
.line >>> .content > div:before {
content: "";
display: block;
position: absolute;
bottom: 0;
left: var(--x-offset);
width: var(--x-width);
height: 100%;
border-left: var(--line-width) dashed currentColor;
border-bottom: var(--line-width) dashed currentColor;
}
.line >>> .content > div:after {
content: "";
display: block;
position: absolute;
bottom: calc(-1 * var(--line-width) * 1.75);
left: calc(var(--x-offset) + var(--x-width));
width: 0;
height: 0;
border: calc(var(--line-width) * 2.5) solid transparent;
border-right: 0;
border-left: calc(var(--line-width) * 5) solid currentColor;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70497755
复制相关文章
相似问题
腾讯云开发者
