那叫芯片，你可以叫自定义下拉芯片，你可以用javascript，jquery，css来达到这个效果，但是在Vue js的情况下，我会推荐给你vuetify.，它是为Vue js设计的，用更少的代码让组件变得更好。
示例：

<template>
      <v-card
        class="mx-auto"
        max-width="500"
      >
        <v-col
          v-if="!allSelected"
          cols="12"
        >
          <v-text-field
            ref="search"
            v-model="search"
            class="search"
            hide-details
            label="Search"
            single-line
          />
        </v-col>
            
        <v-list class="list">
          <template v-for="item in categories">
            <v-list-item
              v-if="!selected.includes(item)"
              :key="item.text"
              :disabled="loading"
              @click="selected.push(item)"
            >
              <template #prepend>
                <v-icon
                  :disabled="loading"
                  :icon="item.icon"
                  :color="item.color"
                />
              </template>
    
              <v-list-item-title v-text="item.text" />
            </v-list-item>
          </template>
        </v-list>
    
        <v-container>
          <v-row
            align="center"
            justify="start"
          >
            <v-col
              v-for="(selection, i) in selections"
              :key="selection.text"
              cols="auto"
              class="py-1 pe-0"
            >
              <v-chip
                :disabled="loading"
                closable
                :color="selection.color"
                @click:close="selected.splice(i, 1)"
              >
                <v-icon
                  :icon="selection.icon"
                  start
                />
    
                {{ selection.text }}
              </v-chip>
            </v-col>
          </v-row>
        </v-container>
    
        <v-divider v-if="!allSelected" />
    
       
    
        <v-divider />
    
        <v-spacer />
    
        <v-btn
          :disabled="!selected.length"
          :loading="loading"
          color="purple"
          variant="text"
          @click="next"
        >
          Next
        </v-btn>
      </v-card>
    </template>

脚本：

<script>
    export default {
      data: () => ({
        items: [
          {
            text: 'Nature',
            icon: 'mdi-nature',
            color: 'red',
          },
          {
            text: 'Nightlife',
            icon: 'mdi-glass-wine',
            color: 'yellow',
          },
          {
            text: 'November',
            icon: 'mdi-calendar-range',
            color: 'green',
          },
          {
            text: 'Portland',
            icon: 'mdi-map-marker',
            color: 'purple',
          },
          {
            text: 'Biking',
            icon: 'mdi-bike',
            color: 'orange',
          },
        ],
        loading: false,
        search: '',
        selected: [],
      }),
    
      computed: {
        allSelected () {
          return this.selected.length === this.items.length
        },
        categories () {
          const search = this.search.toLowerCase()
    
          if (!search) return this.items
    
          return this.items.filter(item => {
            const text = item.text.toLowerCase()
    
            return text.indexOf(search) > -1
          })
        },
        selections () {
          const selections = []
    
          for (const selection of this.selected) {
            selections.push(selection)
          }
    
          return selections
        },
      },
    
      watch: {
        selected () {
          this.search = ''
        },
      },
    
      methods: {
        next () {
          this.loading = true
    
          setTimeout(() => {
            this.search = ''
            this.selected = []
            this.loading = false
          }, 2000)
        },
      },
    }
    </script>

注意：这个例子取自Vuetify's官方网站。同样要得到结果，你首先需要在你的项目中安装Vuetify。