Vue Multiselect CSS基于select的值

2024-05-17 • 问答

我正在尝试根据值设置输入的多重选择的样式。当我将条件放在如下所示的位置时，我正在包括标签在内的所有div上获取颜色这是我的代码

<custom-select 
  :class="{
    orange : campaignStatus.value ==='ARCHIVED' || campaignStatus.value ==='PAUSED',red : campaignStatus.value ==='BANNED' || campaignStatus.value ==='REMOVED'
  }"
  v-model="campaignStatus"
  deselectLabel="Selected"
  label="Status"
  :options="statusOptions" 
  name="status" 
  data-test="campaign-status"
  disabled>
</custom-select>

其结果是：

目标是使多选颜色的橙色像这样

问题是我的html模板中没有multiselect.multislect_input，所以我可以根据其值设置样式吗？例如橙色表示已归档，红色表示已过期？

guxiaoke0510 回答：Vue Multiselect CSS基于select的值

您必须首先在CSS中拥有一类颜色。例如：

.orange{color:orange}
.red{color:red }

然后您可以在vue中使用这些类。喜欢：

:class="{'orange': campaignStatus.value === ARCHIVED,'red': campaignStatus.value === EXPIRED}"

vue-multiselect vuejs2

本文链接：https://www.f2er.com/2558863.html

Vue Multiselect CSS基于select的值

guxiaoke0510 回答：Vue Multiselect CSS基于select的值

大家都在问