时间戳

首页 > 解决方案 > Vuetify/autocomple 组件如何自带`v-list-item`

vuetify.js - Vuetify/autocomple 组件如何自带`v-list-item`

问题描述

在组件库 Vuetify 上autocomplete/slot:item有一个提示，我可以自带v-list-item 

// item
// Description
// Define a custom item appearance

// Props
{
  parent: VueComponent
  item: object
  on: object // Only needed when providing your own v-list-item
  attrs: object // Only needed when providing your own v-list-item
}

我怎样才能做到这一点？因为当我这样做时

<template v-slot:item="data">
   <book :book="data.item"></book>
</template>

用自己的Vutifiey 翘曲v-list-item，我想在部分 ot 上放置一些自定义类v-list-item

标签： vuetify.js

解决方案

在v-auto-complete's 列表中添加一些自定义样式是一种非常常见的场景。但是，没有办法避免v-list/v-list-item，因为 Vuetify 不能让您完全控制下拉菜单。

您可能已经注意到，下拉菜单类似于 ，v-menu而输入元素v-autocomplete是下拉菜单的激活器。所以，这就是v-autocomplete组件的工作方式：

  • Vuetify 创建一个下拉菜单并在其中添加自己的逻辑（HTML、CSS、JS）。
  • 它为用户提供了在v-list-items

这就是为什么无法避免v-list组件的原因。

我附上了一支笔，以帮助您更好地了解如何在内部使用自定义组件v-list/v-list-item：v-autocompletehttps: //codepen.io/abdullah-shabaz/pen/MWwZNYW

如果您在设置book组件样式时遇到问题，请告诉我。我相信我可以帮助你。

推荐阅读