Компонент Vuetify: кнопка с подсказкой

Я использую Vue для большинства своих проектов, и в настоящее время Vuetify — это мой фреймворк пользовательского интерфейса. Я регулярно создаю кнопки, которые содержат только значок, особенно на панелях инструментов, и я хочу, чтобы у них были всплывающие подсказки. Компонент v-tooltip великолепен, но утомительно размещать его вокруг каждой кнопки.

Итак, я сделал удобный компонент: ButtonWithTooltip.vue

Вы можете увидеть код (и скопировать его) из моей сути. Если вы знакомы с Vuetify, то это будет иметь смысл без каких-либо объяснений.

При его использовании импортируйте компонент, как обычно. Он принимает три свойства: наконечник, значок и цвет. Он также принимает атрибут положения, который может быть нижним, левым, правым или верхним. Если вы не укажете атрибут position, по умолчанию он будет внизу.

<button-with-tooltip tip="Edit" color="primary" icon="mdi-pencil" bottom></button-with-tooltip>

Это создаст это:

<v-tooltip bottom>
  <template #activator="{ on }">
    <v-btn icon v-on="on">
      <v-icon> mdi-pencil </v-icon>
    </v-btn>
  </template>
  <span>Edit</span>
</v-tooltip>

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.