javascript - Vue 多选插槽插入符号下拉选项显示和隐藏

Question

<v-multiselect
      ref="tagMultiselect"
      v-model="sort"
      :options="sorts"
      class="filter"
    >
      <span
        slot="caret"
        slot-scope="{ toggle }"
        class="arrow"
        @mousedown.prevent.stop="toggle"
      >
        <font-awesome-icon
          class="icon"
          icon="chevron-down"
        />
      </span>
    </v-multiselect>

当下拉选项显示时，我只想将插入符号更改为 chevron up。

先感谢您。

Answer 1

他们使用类multiselect--active，您需要做的就是使用它并在其上添加一个转换（再次，与他们相同）

.multiselect--active .icon {
    transform: rotate(180deg);
}