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 是可能的，但不確定？
uj5u.com熱心網友回復：
要獲得如下布局：
只需添加到您的：
<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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/397828.html
標籤：javascript css Vue.js