我有以下代码,它只是创建一个div,当它悬停时,应该将其背景颜色更改为红色:
setTimeout(function() {
document.getElementById('example-id').className = 'example-class';
}, 1);.example-class:hover {
background: red;
}<body>
<div id="example-id">example text</div>
</body>这个代码似乎适用于我测试过的所有浏览器,但谷歌浏览器除外.具体来说,我使用以下操作系统和浏览器对其进行了测试:
但是,如果我删除了该setTimeout函数的使用,以便立即将该类添加到div中,那么代码将在所有浏览器中按预期工作.
那为什么会这样呢？这是谷歌浏览器中的一个错误,或某些规范中的含糊不清,还是别的什么？
我bootstrap-vue在我的应用程序中使用，并且我有很多表，它们都具有相同的样板代码。以下是该样板的示例：
<b-table
:items="someItemList"
:busy="someItemList === null"
:empty-text="$t('notFound')"
:empty-filtered-text="$t('notFound')"
no-sort-reset
show-empty
striped
hover
>
<div slot="table-busy" class="text-center my-3">
<b-spinner class="align-middle"/>
</div>
</b-table>
我当然想把这个样板分解成某种通用模块，比如自定义组件，这样我的新表的起点看起来更像这样：
<my-awesome-table :items="someItemList">
</my-awesome-table>
最终，我想表现得像my-awesome-table一个普通的b-table，但是所有这些样板都已经设置好了，我仍然可以根据需要设置额外的道具和插槽。
但是，我想不出一种方法来完成这项工作。我试过了：
b-tableb-table组件，但是我很难设置 prop 和 slot 值，因为我已经在我的样板模板中设置了它们如何创建允许我为道具和插槽设置默认值的自定义组件？