Question

我正在使用vuetify和vuejs。我有4个扩展面板，对齐两列和两行。我需要的是，当你点击其中一个时，其余3个消失，点击的一个填充它们所在的整个容器。如果你有办法实现这一目标，那不是很好，虽然id更喜欢vuetify

HTML：

function addtoFormula(){
    var a = ["A", "B", "C"];
    // Note that join accept the join delimiter. Here I have 
    // space, but you can add what ever you need.
    $("#formula").val(a.join(''));     // Output: ABC
    $("#formula").val(a.join(' '));    // Output: A B C
    $("#formula").val(a.join(','));    // Output: A,B,C
    $("#formula").val(a.join(', '));    // Output: A, B, C
}

脚本是：

<div id="mainContent">
    <v-app>
        <v-container>
            <v-layout row wrap>
                <v-flex xs12 lg5 mb-3>
                    <v-expansion-panel popout>
                        <v-expansion-panel-content>
                            <div slot="header" v-on:click="isHidden = !isHidden">Title</div>
                            <v-card>
                                <v-card-text>
                                    Content Goes here
                                </v-card-text>
                            </v-card>
                        </v-expansion-panel-content>
                        <v-expansion-panel-content>
                            <div slot="header" v-if="!isHidden">Title</div>
                                <v-card>
                                    <v-card-text>
                                        Content Goes here
                                    </v-card-text>
                                </v-card>
                            </v-expansion-panel-content>
                        </v-expansion-panel>
                    </v-flex>
                    <v-flex xs12 lg5 mb-3>
                        <v-expansion-panel popout>
                            <v-expansion-panel-content>
                                <div slot="header">Title</div>
                                <v-card>
                                    <v-card-text>
                                        Content Goes here
                                    </v-card-text>
                                </v-card>
                            </v-expansion-panel-content>
                            <v-expansion-panel-content>
                                <div slot="header">Title</div>
                                <v-card>
                                    <v-card-text>
                                        Content Goes here
                                    </v-card-text>
                                </v-card>
                            </v-expansion-panel-content>
                        </v-expansion-panel>
                    </v-flex>
                </v-layout>
            </v-container>
        </v-app>
    </div>

Answer 1

您犯的错误是将v-flex容器用作行。根据{{3}}设置flex: 1 1 auto，因此您的行中将始终存在与v-flex中的DOM元素一样多的元素。如果用v-flex包装每个元素，并使用方法和计算值，我确定您的任务是可以实现的。这是一个小的documentation你可以微调以完成任务

Vuetify扩展面板

1 个答案: