如何停止 v-autocomplete 组件中图标的旋转？

Question

我正在尝试将 v-autocomplete 用于搜索框。由于它是一个搜索框，我使用 [append-icon="search"] 将三角形更改为搜索图标。现在的问题是搜索图标旋转 180 度并上下颠倒。阻止这种情况发生的解决方案是什么？

<v-autocomplete
   label="Search the collection"
   append-icon="search"
   :items ="components"
/>

Answer 1

v-selectVuetify 对活动组件的附加图标应用 180 度旋转

<style>
  .v-select.v-select--is-menu-active .v-input__icon--append .v-icon {
    transform: rotate(180deg);
  }
</style>

我将一个搜索图标附加到我的自动完成组件中，但当菜单打开时它总是会颠倒过来。我通过简单地覆盖上面的内容解决了这个问题：

<style>
  .v-autocomplete.v-select--is-menu-active .v-input__icon--append .v-icon {
    transform: none;
  }
</style>

当然，您可能不想为所有选择覆盖此设置。我建议您在覆盖默认样式时尽可能具体。

Answer 2

经过一番搜索后，我想到的唯一解决方案是使用 JavaScript 删除负责旋转的 css 类，如下所示：

var transformClass = document.querySelector(".v-input__icon--append");
transformClass.classList.remove("v-input__icon--append");

这是一个例子