更改 v-select 中筹码的样式和颜色

Question

如何更改 v-select 中筹码的颜色和样式？

我有这样的代码：

<v-select
  v-model="value"
  :items="roles"
  :menu-props="{ top: true, offsetY: true }"
  small-chips
  label="Roles"
  multiple
  hint="Select the role"
  persistent-hint
>
</v-select>

如何将筹码更改为样式 label 和颜色 blue？

Answer 1

您可能需要 selection 插槽。

<v-select
  v-model="value"
  :items="roles"
  :menu-props="{ top: true, offsetY: true }"
  small-chips
  label="Roles"
  multiple
  hint="Select the role"
  persistent-hint>
  <template #selection="{ item }">
    <v-chip color="blue">{{item.name}}</v-chip>
  </template>
</v-select>

其中 item.name 将取决于 roles 的这些单独项目。

Answer 2

如果我们使用selection slot来定制我们想要的芯片，就像@YomS。如上所示，我们不能使用 chips 和 deletable-chips 道具使该筹码可删除。

对于还需要在选择槽中实施 deletable-chips 的任何人，这里是我的代码片段：

<template>
    <v-select
          v-model="styleSelection" // Linking that v-select to one array
    
          clearable
          multiple
          :items="travelStyles"
          label="Travel Style"
        >
          <template #selection="{ item }">
            <v-chip
              
              color="primary"

              close
              @click:close="deleteChip(item, styleSelection)" // call a method deleteChip

              >{{ item }}</v-chip
            >
          </template>
        </v-select>
</template>

<script>
  export default {
    data: () => ({
      styleSelection: [],
      travelStyles: [
        'Discovery',
        'Family',
        'In-depth Cultural',
        'Historical',
        'Food & Culinary',
        'Adventure',
        'Beach',
        'Hiking & Trekking',
        'Bicycle',
        'Sightseeing',
        'Boat',
        'River Cruise',
        'Ocean Cruise',
      ],

    }),
    methods: {
      deleteChip(itemNeedToRemove, array) {
        for (let i = 0; i < array.length; i += 1) {
          if (array[parseInt(i, 10)] === itemNeedToRemove) {
            array.splice(i, 1);
          }
        }
      },
    },
  };
</script>

除了选择 v-select，它还适用于自动完成 v-autocompletes，代码段完全相同。

如果你想在V-autocompletes中自定义筹码颜色并使其可删除，你可以看下面的代码：

      <v-autocomplete
        v-model="citySelection"
        clearable
        multiple
        :items="city"
        label="Where do you want to go?"
        :search-input.sync="search"
        @change="search = ''"
      >
        <template #selection="{ item }">
          <v-chip
            close
            color="primary"
            @click:close="deleteChip(item, citySelection)"
            >{{ item }}</v-chip
          >
        </template>
      </v-autocomplete>

Answer 3

我站在你的立场上，我认为，如果你需要可删除的筹码，仅仅为了改变颜色而重新实现删除筹码的功能是一种矫枉过正的做法。

由于您的目标是风格化，我建议您使用简单的 scss 解决方案：

<template>
 <v-select
   class="mySelect"
   v-model="value"
   :items="roles"
   :menu-props="{ top: true, offsetY: true }"
   small-chips
   label="Roles"
   multiple
   hint="Select the role"
   persistent-hint
   deletable-chips
 >
 </v-select>
</template>
<script>
export default {
 data() {
   return {
     roles: ['role1', 'role2'],
   }
 },
}
</script>
<style lang="scss" scoped>
 .mySelect::v-deep .v-chip {

   /* chip background color */
   background-color: var(--v-primary-base);
   
   /* chip text color */
   color: white;

   /* chip X color */
   button {
     color: white;
 }
}
</style>

注意 .mySelect::v-deep 选择器，它使规则能够应用于特定元素，即使是在范围样式块中。

编辑：

采纳了 Andy 的建议
在样式中添加了解释性注释
删除了不必要的 !important
在数据中添加了虚拟角色来做出答案 copy/paste 可测试

更改 v-select 中筹码的样式和颜色

Change style and colors of chips in v-select

vue.js

vuejs2

vuetify.js

v-select