vue multiselect如何在禁用的选项上显示工具提示或标题？

7xzttuei 于 2023-03-24 发布在 Vue.js

关注(0)|答案(1)|浏览(210)

我正在使用vue multiselect向用户显示货币列表，当货币因任何原因不可用时，我将该货币显示为禁用（使用multiselect $isDisabled属性）..问题是，当鼠标悬停在此禁用选项上时，我想显示工具提示或标题，但vue multiselect中的禁用选项具有“pointer-events：无”设置在他们使用CSS和我不能做很多关于它，因为我不能操纵我的自定义选项的 Package 模板.我能做什么来实现我想要的？
我的代码如下：

<multiselect
                      v-model="buyCurrency"
                      :options="canBuyCurrencies"
                      :show-labels="false"
                      :searchable="false"
                      :allow-empty="false"
                      :clear-on-select="false"
                      :close-on-select="true"
                      class="select-buy-currency"
                      @select="handleBuyCurrencyChange"
                  >
                    <template slot="option" slot-scope="props">
                      <div title="Test title" class="d-flex flex-row justify-content-apart align-items-center">
                        <img
                            class="option__image"
                            :src="`/img/flags/${props.option.code}.svg`"
                            :alt="props.option.code"
                        />
                        <div class="option__desc">
                        <span class="option__title">
                          {{ props.option.code }}
                        </span>
                        </div>
                      </div>
                    </template>
                  </multiselect>

当前代码设置所有选项的标题，悬停时显示除禁用选项外的所有选项的标题。
编辑：我试图通过启用css中的指针事件来解决这个问题，但这会使禁用的选项可单击，从而导致错误，从而破坏整个程序，这就是我得到的

TypeError: Cannot read properties of undefined (reading 'every')
    at VueComponent.wholeGroupSelected (vue-multiselect.min.js?8e5f:1:1)
    at VueComponent.selectGroup (vue-multiselect.min.js?8e5f:1:1)
    at mousedown (vue-multiselect.min.js?8e5f:1:1)
    at invokeWithErrorHandling (vue.common.dev.js?4650:1868:1)
    at HTMLSpanElement.invoker (vue.common.dev.js?4650:2193:1)
    at original._wrapper (vue.common.dev.js?4650:7587:1)

我怎么能覆盖默认的点击行为？

vue.js

来源：https://stackoverflow.com/questions/75801487/vue-multiselect-how-to-display-tooltip-or-title-on-disabled-options

1条答案

按热度按时间

zyfwsgd61#

根据优先级的顺序，你的组件样式通常总是能够覆盖第三方库的CSS。你只需要知道要使用什么选择器，这可以通过浏览器的DOM检查器最容易地弄清楚。vue-multiselect中的一个禁用选项具有classname multiselect__option--disabled，所以你可以应用这个样式来解决你的问题：

<style scoped>
.select-buy-currency >>> .multiselect__option--disabled {
  cursor: pointer;
  pointer-events: auto;
}
</style>

注意深度选择器的使用，它在作用域样式中需要用于定位子组件中的元素（在本例中，是Multiselect子组件中的一个option元素）。
如果你不关心样式是否作用于特定的组件，并且可以全局应用样式，你可以省略scoped关键字和深度选择器：

<style>
.multiselect__option--disabled {
  cursor: pointer;
  pointer-events: auto;
}
</style>

codesandbox example

赞(0）回复(0）举报 2023-03-24

我来回答

vue multiselect如何在禁用的选项上显示工具提示或标题？

1条答案

相关问题

热门标签

最新问答