vue.js - 在 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>

如何将芯片更改为样式标签和蓝色？

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 一样根据需要自定义芯片。如上所示，我们不能使用chipsand deletable-chipsprops 使该芯片可删除。

对于还需要在选择槽中实现可删除芯片的任何人，这里是我的片段：

<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>

除了 Selects 之外v-select，它还可以与 Autocomplete 一起使用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 选择器，它使规则能够应用于特定元素，即使在作用域样式块中也是如此。

编辑：

• 包括安迪的建议
• 在样式中添加了解释性注释
• 删除了不必要的 !important
• 在数据中添加了虚拟角色以使答案复制/粘贴可测试