Vuetify настройки V-BTN реквизит в CSS

Question

В настоящее время я устанавливаю реквизиты своих кнопок в HTML, как показано ниже. Однако, если я добавлю несколько реквизитов, они будут загромождены, и я не смогу повторно использовать точную кнопку, пока не скопирую весь HTML. Есть ли способ поместить fab и flat в класс CSS? Без использования темы?

<v-btn :flat="selectedUser !== user.id" :key="user.id" depressed fab flat round>
      <h4> {{user.name}} </h4> 
</v-btn>

Answer 1

Очевидно, что вы можете разбить vuetify.css и выполнить работу в своем собственном стиле (каламбур). Но есть несколько лучших способов, которые вы должны рассмотреть, прежде чем трогать CSS-файл.

Number 1, Поищите сходства в btns и создайте еще несколько компонентов, которые по умолчанию будут иметь назначенные реквизиты. Like Component (Flab.vue)

<template>
<v-btn
 flat
 fab>
    {{btnName}}
</v-btn>
</template>

Я лично не рекомендую этот способ, так как в случае более крупных приложений вы можете получить множество компонентов, имеющих только btns

Номер 2, используйте директивы (я очень рекомендую). Vue и некоторые другие хорошо известные фреймворки предоставляют директивы для компонентов и элементов dom, которые можно использовать для их настройки по вашему желанию. Если вы новичок в vue (new2vue), позвольте мне объяснить вам самые простые возможные термины.

По сути, вы устанавливаете атрибут (директиву) для любого элемента (Dom или Vuetify или Components), а затем непосредственно перед тем, как этот элемент вставляется в dom, vue вызовет функцию, позволяющую вам манипулировать этим элементом по своему усмотрению. Давайте теперь посмотрим код.

//global directive 
Vue.directive('flab',{
  inserted:function(el){
    el.setAttribute('fab');
    el.setAttribute('flat')
  }
})
//while using v-btn anywhere (as you have global directive now)
<v-btn 
 v-flab> //using directive flab with v- prefix
  {{btnName}}
</v-btn>

Это может выглядеть сложно, но поверьте мне, это облегчит вашу жизнь. Директивы имеют модификатор и значения, а также множество других хуков (в основном швейцарский армейский нож для разработчиков). Подробнее об этом можно прочитать здесь .

Номер 3, если вы боитесь писать больше кода (например, E = mc ² или Error = больше кода ² ), и ваша проблема заключается только в загроможденных реквизитах, тогда просто попробуйте сделать ваш код более читабельным. Поскольку упомянутое @Mathias_R прервало строки, убедитесь, что вы и ваша команда можете легко прочитать его.

Ну, я надеюсь, это поможет.

Answer 2

Вы всегда можете разбить его на новые строки, чтобы сделать его более читабельным, как показано ниже.

`<v-btn 
  :flat="selectedUser 
  !== user.id" 
  :key="user.id" 
  depressed 
  fab 
  flat 
  round>
  <h4> {{user.name}} </h4> 
</v-btn>`