vuetify 자동 완성 구성 요소 기본 아이콘 제거 방법

vuetify 자동 완성 구성 요소 기본 아이콘 제거 방법

Vuetify 자동 완성에는 기본적으로 사용자 지정 "위" 및 "아래" 화살표 아이콘이 있습니다.

이 아이콘을 변경하여 다른 이벤트(활성 또는 비활성)의 아이콘을 검색하여 이 보기를 얻으려면 어떻게 해야 합니까?

이 예에서는 다음을 사용하여 작성됩니다.v-text-field:

코드:

<v-text-field
  flat
  solo
  hide-details
  append-icon="search"
  label="Search..."
  color="#000000"
></v-text-field>

자동 완성 컴포넌트를 확인하기 위해 추가 아이콘을 지쳤지만 기본 상하 행을 제거할 수 없습니다.

코드:

<v-autocomplete
  v-model="select"
  :append-outer-icon="search ? 'search' : 'search'"
  label="Search..."
  type="text"
  :loading="loading"
  :items="items"
  :search-input.sync="search"
  cache-items
  class=""
  flat
  hide-no-data
  hide-details
  @click:append-outer="startSearch"
></v-autocomplete>

결과:

화살표 아이콘을 검색 아이콘으로 변경하여 클릭 가능한 검색으로 하는 방법 개요

사용하다append-icon=""공백으로 설정합니다.

여기 예가 있습니다.

콜백 기능이 있는 아이콘을 추가하려면append-icon-cb="()"

https://codepen.io/anon/pen/WqXVWj?&editable=true&editors=101

이거 드셔보세요append-icon="mdi-magnify"

언급URL : https://stackoverflow.com/questions/56801091/how-to-remove-vuetify-autocomplete-component-default-icon