纸片

v-chip 组件用于传递小段信息。close 属性会让纸片变得可交互。此组件由 v-chip-group 用于高级选项。

用例

纸片有以下变量： Default, closeable, filter, outlined, pill。 默认的 v-chip 插槽文本的旁边也接受头像和图标。

Chips（纸片） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

API

示例

下面是一些简单到复杂的例子。

Material Design 调色板中的任何颜色都可用于更改纸片颜色。

Chips（纸片） - 图3

  1. <template>
  2.   <div class="text-center">
  3.     <v-chip
  4.       class="ma-2"
  5.     >
  6.       Default
  7.     </v-chip>
  9.     <v-chip
  10.       class="ma-2"
  11.       color="primary"
  12.     >
  13.       Primary
  14.     </v-chip>
  16.     <v-chip
  17.       class="ma-2"
  18.       color="secondary"
  19.     >
  20.       Secondary
  21.     </v-chip>
  23.     <v-chip
  24.       class="ma-2"
  25.       color="red"
  26.       text-color="white"
  27.     >
  28.       Red Chip
  29.     </v-chip>
  31.     <v-chip
  32.       class="ma-2"
  33.       color="green"
  34.       text-color="white"
  35.     >
  36.       Green Chip
  37.     </v-chip>
  38.   </div>
  39. </template>

图标

纸片可以使用文本或“ Material Icons 字体库中可用的任何图标。

Chips（纸片） - 图4

  1. <template>
  2.   <div class="text-center">
  3.     <v-chip
  4.       class="ma-2"
  5.       color="indigo"
  6.       text-color="white"
  7.     >
  8.       <v-avatar left>
  9.         <v-icon>mdi-account-circle</v-icon>
  10.       </v-avatar>
  11.       Ranee
  12.     </v-chip>
  14.     <v-chip
  15.       class="ma-2"
  16.       color="orange"
  17.       text-color="white"
  18.     >
  19.       Premium
  20.       <v-icon right>mdi-star</v-icon>
  21.     </v-chip>
  23.     <v-chip
  24.       class="ma-2"
  25.       color="primary"
  26.       text-color="white"
  27.     >
  28.       1 Year
  29.       <v-icon right>mdi-cake-variant</v-icon>
  30.     </v-chip>
  32.     <v-chip
  33.       class="ma-2"
  34.       color="green"
  35.       text-color="white"
  36.     >
  37.       <v-avatar
  38.         left
  39.         class="green darken-4"
  40.       >
  41.         1
  42.       </v-avatar>
  43.       Years
  44.     </v-chip>
  46.     <v-chip
  47.       class="ma-2"
  48.       close
  49.       color="teal"
  50.       text-color="white"
  51.       @click:close="close"
  52.     >
  53.       <v-avatar left>
  54.         <v-icon>mdi-checkbox-marked-circle</v-icon>
  55.       </v-avatar>
  56.       Confirmed
  57.     </v-chip>
  59.     <v-chip
  60.       class="ma-2"
  61.       close
  62.       color="teal"
  63.       text-color="white"
  64.       close-icon="mdi-delete"
  65.       @click:close="close"
  66.     >
  67.       <v-avatar left>
  68.         <v-icon>mdi-checkbox-marked-circle</v-icon>
  69.       </v-avatar>
  70.       Confirmed
  71.     </v-chip>
  72.   </div>
  73. </template>
  75. <script>
  76.   export default {
  77.     methods: {
  78.       close () {
  79.         alert('Chip close clicked')
  80.       },
  81.     },
  82.   }
  83. </script>

轮廓

轮廓纸片从当前文本颜色继承其边框颜色。

Chips（纸片） - 图5

  1. <template>
  2.   <div class="text-center">
  3.     <v-chip
  4.       class="ma-2"
  5.       color="success"
  6.       outlined
  7.     >
  8.       <v-icon left>mdi-server-plus</v-icon>
  9.       Server Status
  10.     </v-chip>
  12.     <v-chip
  13.       class="ma-2"
  14.       color="primary"
  15.       outlined
  16.       pill
  17.     >
  18.       User Account
  19.       <v-icon right>mdi-account-outline</v-icon>
  20.     </v-chip>
  22.     <v-chip
  23.       class="ma-2"
  24.       color="deep-purple accent-4"
  25.       outlined
  26.     >
  27.       <v-icon left>mdi-wrench</v-icon>
  28.       Update Settings
  29.     </v-chip>
  31.     <v-chip
  32.       class="ma-2"
  33.       close
  34.       color="indigo darken-3"
  35.       outlined
  36.     >
  37.       <v-icon left>mdi-fire</v-icon>
  38.       New Posts Available
  39.     </v-chip>
  40.   </div>
  41. </template>

标签

标签纸片使用 v-card border-radius。

Chips（纸片） - 图6

  1. <template>
  2.   <div class="text-center">
  3.     <v-chip
  4.       class="ma-2"
  5.       label
  6.     >
  7.       Label
  8.     </v-chip>
  10.     <v-chip
  11.       class="ma-2"
  12.       color="pink"
  13.       label
  14.       text-color="white"
  15.     >
  16.       <v-icon left>mdi-label</v-icon>
  17.       Tags
  18.     </v-chip>
  20.     <v-chip
  21.       class="ma-2"
  22.       color="primary"
  23.       label
  24.     >
  25.       <v-icon left>mdi-account-circle-outline</v-icon>
  26.       John Leider
  27.     </v-chip>
  29.     <v-chip
  30.       class="ma-2"
  31.       close
  32.       color="cyan"
  33.       label
  34.       text-color="white"
  35.     >
  36.       <v-icon left>mdi-twitter</v-icon>
  37.       New Tweets
  38.     </v-chip>
  39.   </div>
  40. </template>

尺寸

v-chip 组件可以拥有不同的大小，从 x-small 到 x-large。

Chips（纸片） - 图7

  1. <template>
  2.   <div class="text-center">
  3.     <v-chip
  4.       class="ma-2"
  5.       x-small
  6.     >
  7.       x-small chip
  8.     </v-chip>
  10.     <v-chip
  11.       class="ma-2"
  12.       small
  13.     >
  14.       small chip
  15.     </v-chip>
  17.     <v-chip
  18.       class="ma-2"
  19.     >
  20.       Default
  21.     </v-chip>
  23.     <v-chip
  24.       class="ma-2"
  25.       large
  26.     >
  27.       large chip
  28.     </v-chip>
  30.     <v-chip
  31.       class="ma-2"
  32.       x-large
  33.     >
  34.       x-large chip
  35.     </v-chip>
  36.   </div>
  37. </template>

可拖动

draggable v-chip 组件可以被鼠标拖放。

Chips（纸片） - 图8

  1. <template>
  2.   <v-row justify="center" align="center">
  3.     <v-chip draggable>Default</v-chip>
  4.   </v-row>
  5. </template>

过滤器

v-chip 组件有 filter 选项，如果纸片处于活动状态，那么就会在该纸片内向您显示一个额外的图标。可以使用 filter-icon 自定义。

Chips（纸片） - 图9

  1. <template>
  2.   <v-row justify="space-around" align="center">
  3.     <v-chip
  4.       class="ma-2"
  5.       :input-value="active"
  6.       filter
  7.     >
  8.       I'm v-chip
  9.     </v-chip>
  11.     <v-chip
  12.       class="ma-2"
  13.       :input-value="active"
  14.       filter
  15.       filter-icon="mdi-plus"
  16.     >
  17.       I'm v-chip
  18.     </v-chip>
  20.     <v-chip
  21.       class="ma-2"
  22.       :input-value="active"
  23.       filter
  24.       filter-icon="mdi-minus"
  25.     >
  26.       I'm v-chip
  27.     </v-chip>
  29.     <v-switch v-model="active" label="Active"></v-switch>
  30.   </v-row>
  31. </template>
  33. <script>
  34.   export default {
  35.     data: () => ({
  36.       active: false,
  37.     }),
  38.   }
  39. </script>

没有涟漪

如果 ripple 属性设置为 false，则 v-chip 将不会渲染涟漪。

Chips（纸片） - 图10

  1. <template>
  2.   <v-row justify="center" align="center">
  3.     <v-chip :ripple="false">Default</v-chip>
  4.   </v-row>
  5. </template>

可关闭

可关闭的纸片可以通过 v-model 进行控制。如果您想知道纸片何时关闭，也可以监听 click:close 事件。

Chips（纸片） - 图11

  1. <template>
  2.   <div class="text-center">
  3.     <v-btn
  4.       v-if="!chip1 && !chip2 && !chip3 && !chip4"
  5.       close
  6.       color="primary"
  7.       dark
  8.       @click="chip1 = true, chip2 = true, chip3 = true, chip4= true"
  9.     >
  10.       Reset Chips
  11.     </v-btn>
  13.     <v-chip
  14.       v-if="chip1"
  15.       class="ma-2"
  16.       close
  17.       @click:close="chip1 = false"
  18.     >
  19.       Closable
  20.     </v-chip>
  22.     <v-chip
  23.       v-if="chip2"
  24.       class="ma-2"
  25.       close
  26.       color="red"
  27.       text-color="white"
  28.       @click:close="chip2 = false"
  29.     >
  30.       Remove
  31.     </v-chip>
  33.     <v-chip
  34.       v-if="chip3"
  35.       class="ma-2"
  36.       close
  37.       color="green"
  38.       outlined
  39.       @click:close="chip3 = false"
  40.     >
  41.       Success
  42.     </v-chip>
  44.     <v-chip
  45.       v-if="chip4"
  46.       class="ma-2"
  47.       close
  48.       color="orange"
  49.       label
  50.       outlined
  51.       @click:close="chip4 = false"
  52.     >
  53.       Complete
  54.     </v-chip>
  55.   </div>
  56. </template>
  58. <script>
  59.   export default {
  60.     data () {
  61.       return {
  62.         chip1: true,
  63.         chip2: true,
  64.         chip3: true,
  65.         chip4: true,
  66.       }
  67.     },
  68.   }
  69. </script>

操作纸片

纸片可以被操作。如果提供了click 事件，芯片将变成交互式的，并且可以调用方法。

Chips（纸片） - 图12

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="450"
  5.   >
  6.     <v-img
  7.       src="https://cdn.vuetifyjs.com/images/cards/house.jpg"
  8.       :aspect-ratio="16/9"
  9.     >
  11.     </v-img>
  12.     <v-card-title>
  13.       <div class="display-1 mb-2">Welcome Home...</div>
  14.       <div class="title font-weight-regular grey--text">Monday, 12:30 PM, Mostly Sunny</div>
  15.     </v-card-title>
  16.     <v-row
  17.       class="px-4 grey--text"
  18.       align="center"
  19.     >
  20.       <v-avatar
  21.         size="24"
  22.         class="mr-4"
  23.       >
  24.         <v-img src="https://cdn.vuetifyjs.com/images/weather/part-cloud-48px.png" contain></v-img>
  25.       </v-avatar>
  27.       <span>81° / 62°</span>
  28.     </v-row>
  30.     <v-divider class="mt-6 mx-4"></v-divider>
  32.     <v-card-text>
  33.       <v-chip
  34.         class="mr-2"
  35.         @click="lights"
  36.       >
  37.         <v-icon left>mdi-brightness-5</v-icon>
  38.         Turn on Lights
  39.       </v-chip>
  40.       <v-chip
  41.         class="mr-2"
  42.         @click="alarm"
  43.       >
  44.         <v-icon left>mdi-alarm-check</v-icon>
  45.         Set alarm
  46.       </v-chip>
  47.       <v-chip @click="blinds">
  48.         <v-icon left>mdi-blinds</v-icon>
  49.         Close blinds
  50.       </v-chip>
  51.     </v-card-text>
  52.   </v-card>
  53. </template>
  55. <script>
  56.   export default {
  57.     methods: {
  58.       alarm () {
  59.         alert('Turning on alarm...')
  60.       },
  61.       blinds () {
  62.         alert('Toggling Blinds...')
  63.       },
  64.       lights () {
  65.         alert('Toggling lights...')
  66.       },
  67.     },
  68.   }
  69. </script>

选中

选择框可以使用纸片显示所选数据。请尝试在下面添加您自己的标签。

Chips（纸片） - 图13

  1. <template>
  2.   <v-combobox
  3.     v-model="chips"
  4.     :items="items"
  5.     chips
  6.     clearable
  7.     label="Your favorite hobbies"
  8.     multiple
  9.     prepend-icon="filter_list"
  10.     solo
  11.   >
  12.     <template v-slot:selection="{ attrs, item, select, selected }">
  13.       <v-chip
  14.         v-bind="attrs"
  15.         :input-value="selected"
  16.         close
  17.         @click="select"
  18.         @click:close="remove(item)"
  19.       >
  20.         <strong>{{ item }}</strong>&nbsp;
  21.         <span>(interest)</span>
  22.       </v-chip>
  23.     </template>
  24.   </v-combobox>
  25. </template>
  27. <script>
  28.   export default {
  29.     data () {
  30.       return {
  31.         chips: ['Programming', 'Playing video games', 'Watching movies', 'Sleeping'],
  32.         items: ['Streaming', 'Eating'],
  33.       }
  34.     },
  36.     methods: {
  37.       remove (item) {
  38.         this.chips.splice(this.chips.indexOf(item), 1)
  39.         this.chips = [...this.chips]
  40.       },
  41.     },
  42.   }
  43. </script>

自定义列表

在本例中，我们选择使用自定义列表来替代 v-autocomplete。这允许我们始终显示可用的选项，同时仍然提供相同的搜索和选择功能。

Chips（纸片） - 图14

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="500"
  5.   >
  6.     <v-toolbar
  7.       flat
  8.       color="transparent"
  9.     >
  10.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  11.       <v-toolbar-title>Photo Info</v-toolbar-title>
  12.       <v-spacer></v-spacer>
  13.       <v-btn
  14.         icon
  15.         @click="$refs.search.focus()"
  16.       >
  17.         <v-icon>mdi-magnify</v-icon>
  18.       </v-btn>
  19.     </v-toolbar>
  21.     <v-container class="py-0">
  22.       <v-row
  23.         align="center"
  24.         justify="start"
  25.       >
  26.         <v-col
  27.           v-for="(selection, i) in selections"
  28.           :key="selection.text"
  29.           class="shrink"
  30.         >
  31.           <v-chip
  32.             :disabled="loading"
  33.             close
  34.             @click:close="selected.splice(i, 1)"
  35.           >
  36.             <v-icon
  37.               left
  38.               v-text="selection.icon"
  39.             ></v-icon>
  40.             {{ selection.text }}
  41.           </v-chip>
  42.         </v-col>
  44.         <v-col v-if="!allSelected" cols="12">
  45.           <v-text-field
  46.             ref="search"
  47.             v-model="search"
  48.             full-width
  49.             hide-details
  50.             label="Search"
  51.             single-line
  52.           ></v-text-field>
  53.         </v-col>
  54.       </v-row>
  55.     </v-container>
  57.     <v-divider v-if="!allSelected"></v-divider>
  59.     <v-list>
  60.       <template v-for="item in categories">
  61.         <v-list-item
  62.           v-if="!selected.includes(item)"
  63.           :key="item.text"
  64.           :disabled="loading"
  65.           @click="selected.push(item)"
  66.         >
  67.           <v-list-item-avatar>
  68.             <v-icon
  69.               :disabled="loading"
  70.               v-text="item.icon"
  71.             ></v-icon>
  72.           </v-list-item-avatar>
  73.           <v-list-item-title v-text="item.text"></v-list-item-title>
  74.         </v-list-item>
  75.       </template>
  76.     </v-list>
  78.     <v-divider></v-divider>
  80.     <v-card-actions>
  81.       <v-spacer></v-spacer>
  82.       <v-btn
  83.         :disabled="!selected.length"
  84.         :loading="loading"
  85.         color="purple"
  86.         text
  87.         @click="next"
  88.       >Next</v-btn>
  89.     </v-card-actions>
  90.   </v-card>
  91. </template>
  93. <script>
  94.   export default {
  95.     data: () => ({
  96.       items: [
  97.         {
  98.           text: 'Nature',
  99.           icon: 'mdi-nature',
  100.         },
  101.         {
  102.           text: 'Nightlife',
  103.           icon: 'mdi-glass-wine',
  104.         },
  105.         {
  106.           text: 'November',
  107.           icon: 'mdi-calendar-range',
  108.         },
  109.         {
  110.           text: 'Portland',
  111.           icon: 'mdi-map-marker',
  112.         },
  113.         {
  114.           text: 'Biking',
  115.           icon: 'mdi-bike',
  116.         },
  117.       ],
  118.       loading: false,
  119.       search: '',
  120.       selected: [],
  121.     }),
  123.     computed: {
  124.       allSelected () {
  125.         return this.selected.length === this.items.length
  126.       },
  127.       categories () {
  128.         const search = this.search.toLowerCase()
  130.         if (!search) return this.items
  132.         return this.items.filter(item => {
  133.           const text = item.text.toLowerCase()
  135.           return text.indexOf(search) > -1
  136.         })
  137.       },
  138.       selections () {
  139.         const selections = []
  141.         for (const selection of this.selected) {
  142.           selections.push(selection)
  143.         }
  145.         return selections
  146.       },
  147.     },
  149.     watch: {
  150.       selected () {
  151.         this.search = ''
  152.       },
  153.     },
  155.     methods: {
  156.       next () {
  157.         this.loading = true
  159.         setTimeout(() => {
  160.           this.search = ''
  161.           this.selected = []
  162.           this.loading = false
  163.         }, 2000)
  164.       },
  165.     },
  166.   }
  167. </script>

其他过滤器

纸片非常适合为特定任务提供辅助操作。在本例中，我们搜索项目列表并收集信息子集以显示可用的关键字。

Chips（纸片） - 图15

  1. <template>
  2.   <v-card
  3.     class="mx-auto mt-12"
  4.     max-width="450"
  5.   >
  6.     <v-system-bar></v-system-bar>
  8.     <v-toolbar
  9.       flat
  10.       color="transparent"
  11.     >
  12.       <v-btn icon>
  13.         <v-icon>mdi-arrow-left</v-icon>
  14.       </v-btn>
  16.       <v-text-field
  17.         v-model="search"
  18.         append-icon="mdi-magnify"
  19.         label="Search News"
  20.         single-line
  21.       ></v-text-field>
  22.     </v-toolbar>
  24.     <v-card-text class="py-0">
  25.       <v-chip
  26.         v-for="(keyword, i) in keywords"
  27.         :key="i"
  28.         class="mr-2"
  29.       >
  30.         {{ keyword }}
  31.       </v-chip>
  32.     </v-card-text>
  34.     <v-list three-line>
  35.       <v-list-item
  36.         v-for="(item, i) in searching"
  37.         :key="i"
  38.         ripple
  39.         @click="() => {}"
  40.       >
  41.         <v-img
  42.           :src="item.image"
  43.           class="mr-4"
  44.           max-width="64"
  45.           min-width="64"
  46.         ></v-img>
  48.         <v-list-item-content>
  49.           <span
  50.             class="text-uppercase font-weight-regular caption"
  51.             v-text="item.category"
  52.           ></span>
  54.           <div v-text="item.title"></div>
  55.         </v-list-item-content>
  56.       </v-list-item>
  57.     </v-list>
  58.   </v-card>
  59. </template>
  61. <script>
  63.   export default {
  64.     data: () => ({
  65.       items: [
  66.         {
  67.           image: 'https://cdn-images-1.medium.com/max/1024/1*9C9hLji68wV373tk8okLYA.jpeg',
  68.           title: 'TBI’s 5 Best: SF Mocktails to Finish Dry January Strong',
  69.           category: 'Travel',
  70.           keyword: 'Drinks',
  72.         },
  73.         {
  74.           image: 'https://cdn-images-1.medium.com/max/1024/1*BBNtYUieAqHoXKjiJ2mMjQ.png',
  75.           title: 'PWAs on iOS 12.2 beta: the good, the bad, and the “not sure yet if good”',
  76.           category: 'Technology',
  77.           keyword: 'Phones',
  78.         },
  79.         {
  80.           image: 'https://cdn-images-1.medium.com/max/1024/1*rTEtei1UEmNqbq6evRsExw.jpeg',
  81.           title: 'How to Get Media Mentions for Your Business',
  82.           category: 'Media',
  83.           keyword: 'Social',
  84.         },
  85.         {
  86.           image: 'https://cdn-images-1.medium.com/max/1024/1*FD2nkJewVeQnGf0ommQfrw.jpeg',
  87.           title: 'The Pitfalls Of Outsourcing Self-Awareness To Artificial Intelligence',
  88.           category: 'Technology',
  89.           keyword: 'Military',
  90.         },
  91.         {
  92.           image: 'https://cdn-images-1.medium.com/max/1024/1*eogFpsVgNzXQLCVgFzT_-A.jpeg',
  93.           title: 'Degrees of Freedom and Sudoko',
  94.           category: 'Travel',
  95.           keyword: 'Social',
  96.         },
  97.       ],
  98.       search: '',
  99.     }),
  101.     computed: {
  102.       keywords () {
  103.         if (!this.search) return []
  105.         const keywords = []
  107.         for (const search of this.searching) {
  108.           keywords.push(search.keyword)
  109.         }
  111.         return keywords
  112.       },
  113.       searching () {
  114.         if (!this.search) return this.items
  116.         const search = this.search.toLowerCase()
  118.         return this.items.filter(item => {
  119.           const text = item.title.toLowerCase()
  121.           return text.indexOf(search) > -1
  122.         })
  123.       },
  124.     },
  125.   }
  126. </script>

可展开

纸片可以与 v-menu 结合使用，以启用纸片的一组特定动作。

Chips（纸片） - 图16

  1. <template>
  2.   <v-card
  3.     max-width="400"
  4.     class="mx-auto"
  5.   >
  6.     <v-system-bar></v-system-bar>
  8.     <v-row
  9.       class="px-6 py-3"
  10.       align="center"
  11.     >
  12.       <span class="mr-4">To</span>
  13.       <v-menu
  14.         v-model="menu"
  15.         bottom
  16.         right
  17.         transition="scale-transition"
  18.         origin="top left"
  19.       >
  20.         <template v-slot:activator="{ on }">
  21.           <v-chip
  22.             pill
  23.             v-on="on"
  24.           >
  25.             <v-avatar left>
  26.               <v-img src="https://cdn.vuetifyjs.com/images/john.png"></v-img>
  27.             </v-avatar>
  28.             John Leider
  29.           </v-chip>
  30.         </template>
  31.         <v-card width="300">
  32.           <v-list dark>
  33.             <v-list-item>
  34.               <v-list-item-avatar>
  35.                 <v-img src="https://cdn.vuetifyjs.com/images/john.png"></v-img>
  36.               </v-list-item-avatar>
  37.               <v-list-item-content>
  38.                 <v-list-item-title>John Leider</v-list-item-title>
  39.                 <v-list-item-subtitle>john@vuetifyjs.com</v-list-item-subtitle>
  40.               </v-list-item-content>
  41.               <v-list-item-action>
  42.                 <v-btn
  43.                   icon
  44.                   @click="menu = false"
  45.                 >
  46.                   <v-icon>mdi-close-circle</v-icon>
  47.                 </v-btn>
  48.               </v-list-item-action>
  49.             </v-list-item>
  50.           </v-list>
  51.           <v-list>
  52.             <v-list-item @click="() => {}">
  53.               <v-list-item-action>
  54.                 <v-icon>mdi-briefcase</v-icon>
  55.               </v-list-item-action>
  56.               <v-list-item-subtitle>john@gmail.com</v-list-item-subtitle>
  57.             </v-list-item>
  58.           </v-list>
  59.         </v-card>
  60.       </v-menu>
  61.     </v-row>
  63.     <v-divider></v-divider>
  65.     <v-text-field
  66.       full-width
  67.       value="Re: Vacation Request"
  68.       label="Subject"
  69.       single-line
  70.     ></v-text-field>
  72.     <v-textarea
  73.       full-width
  74.       single-line
  75.       label="Message"
  76.     ></v-textarea>
  77.   </v-card>
  78. </template>
  80. <script>
  81.   export default {
  82.     data: () => ({
  83.       menu: false,
  84.     }),
  85.   }
  86. </script>