Question

我有一个按钮，单击该按钮即可显示表格。这是通过bootstrap vue完成的。我在css中做了一些：hover来突出显示它，但是我想在显示表格时使其保持突出显示。

按钮和表格如下所示：

<b-btn v-b-toggle.collapse1 class="toggle-table-btn">Cardboard size</b-btn>

 <b-collapse id="collapse1" class="mt-2">

   <b-table striped hover :items="(( table ))"></b-table>

 </b-collapse>

和CSS

.container .table-box .toggle-table-btn:hover {
    background-color: rgb(63, 63, 63);
    color: white;
}

Answer 1

您可以动态地将类应用于html对象。然后，您可以创建一个与hover相同的新类，并将该新类应用于您的按钮。

您将需要一个支持变量来处理表状态collapsed or not，我将此支持变量称为highlightButton

在CSS中，您可以“重用”悬停类声明以突出显示

.container .table-box .toggle-table-btn:hover, .toggle-table-btn.highlight {
    background-color: rgb(63, 63, 63);
    color: white;
}

当您单击按钮时，@click会更改highlightButton的值，那么您的课程是否适用。

<b-btn v-b-toggle.collapse1 @click.prevent="highlightButton = !highlightButton" :class="['toggle-table-btn', highlightButton ? 'highlight' : '']">Cardboard size</b-btn>

 <b-collapse id="collapse1" class="mt-2">

   <b-table striped hover :items="(( table ))"></b-table>

 </b-collapse>

组件数据

data: function {
    return {
       highlightButton: false
    }
}

Answer 2

充分利用对折叠组件的import {Component, OnInit} from "@angular/core"; import {FormControl} from "@angular/forms"; import {Router} from "@angular/router"; @Component({ selector: 'app-search', templateUrl: './search.component.html', styleUrls: ['./search.component.scss'] }) export class SearchComponent implements OnInit { private searchControl: FormControl; constructor(private router: Router) { } ngOnInit() { this.searchControl = new FormControl(''); this.searchControl.valueChanges .subscribe(query => { this.router.navigate(['/store-search']); }); } }支持。这样，您可以使用数据属性（在我的示例中为v-model）显式跟踪表当前是否可见。然后，您可以使用showTable向按钮动态添加额外的类。可以在表格可见时使用此类突出显示按钮。

请参见以下工作示例： https://jsfiddle.net/ebbishop/304jws9m

在Vue中单击时突出显示所选按钮

2 个答案: